@poool/oak-addon-richtext-field

🌳 oak

oak-addon-richtext-field

A semi-complete WYSIWYG rich text editor field using Slate

Content

New field type:

• richtext: Allows to use rich text editing capabilities (bold, italic, font size, color, ...)

Installation

yarn add @poool/oak @poool/oak-addon-richtext-field

Usage

import { render } from '@poool/oak';
import richTextField from '@poool/oak-addon-richtext-field';

render(document.getElementById('app'), {
  addons: [richTextField],
  overrides: [{
    type: 'component',
    components: ['title', 'text', 'button', /* ... */],
    fields: [{
      key: 'content',
      type: 'richtext',
    }],
  }]
  /* ... */
});

Don't forget to import styles, for example using style-loader and webpack:

import '@poool/oak-addon-richtext-field/dist/oak-addon-richtext-field.min.css';

Or import them directly inside your own styles using less, sass or stylus:

@import "@poool/oak-addon-richtext-field/dist/oak-addon-richtext-field.min.css";

Translations

Available languages:

• English (default)
• French

To import translations and replace text with translations, use the texts setting:

import { render, localeFr } from '@poool/oak';
import richTextField, { localeFr as richTextLocaleFr } from '@poool/oak-addon-richtext-field';
import { mergeDeep } from '@poool/junipero-utils';

render(document.getElementById('app'), {
  addons: [richTextField],
  texts: mergeDeep({}, localeFr, richTextLocaleFr),
  /* ... */
});

Contributing

Please check the CONTRIBUTING.md doc for contribution guidelines.

License

This software is licensed under MIT.