diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 117cfdfa1..501d464ec 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -65,6 +65,7 @@ module.exports = { ['/api/selector_manager', 'Selector Manager'], ['/api/css_composer', 'CSS Composer'], ['/api/modal_dialog', 'Modal'], + ['/api/rich_text_editor', 'Rich Text Editor'], ], '/': [ '', diff --git a/docs/api.js b/docs/api.js index 5437b542c..d06807768 100644 --- a/docs/api.js +++ b/docs/api.js @@ -16,7 +16,8 @@ const cmds = [ // ['device_manager/index.js', 'device_manager.md'], // ['selector_manager/index.js', 'selector_manager.md'], // ['css_composer/index.js', 'css_composer.md'], - ['modal_dialog/index.js', 'modal_dialog.md'], + // ['modal_dialog/index.js', 'modal_dialog.md'], + ['rich_text_editor/index.js', 'rich_text_editor.md'], /* ['rich_text_editor/index.js', 'rich_text_editor.md'], ['keymaps/index.js', 'keymaps.md'], diff --git a/docs/api/rich_text_editor.md b/docs/api/rich_text_editor.md index edfc0bd92..96e193842 100644 --- a/docs/api/rich_text_editor.md +++ b/docs/api/rich_text_editor.md @@ -2,27 +2,39 @@ ## RichTextEditor -This module allows to customize the toolbar of the Rich Text Editor and use commands from the HTML Editing APIs. -For more info about HTML Editing APIs check here: -[https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand][1] +This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the [HTML Editing APIs][1]. +It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager -It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') -and leave this task to the Style Manager. +You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][2] -Before using methods you should get first the module from the editor instance, in this way: +```js +const editor = grapesjs.init({ + rte: { + // options + } +}) +``` + +Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance ```js -var rte = editor.RichTextEditor; +const rte = editor.RichTextEditor; ``` +- [add][3] +- [get][4] +- [getAll][5] +- [remove][6] +- [getToolbarEl][7] + ## add Add a new action to the built-in RTE toolbar ### Parameters -- `name` **[string][2]** Action name -- `action` **[Object][3]** Action options (optional, default `{}`) +- `name` **[string][8]** Action name +- `action` **[Object][9]** Action options (optional, default `{}`) ### Examples @@ -64,7 +76,7 @@ Get the action by its name ### Parameters -- `name` **[string][2]** Action name +- `name` **[string][8]** Action name ### Examples @@ -73,13 +85,13 @@ const action = rte.get('bold'); // {name: 'bold', ...} ``` -Returns **[Object][3]** +Returns **[Object][9]** ## getAll Get all actions -Returns **[Array][4]** +Returns **[Array][10]** ## remove @@ -87,7 +99,7 @@ Remove the action from the toolbar ### Parameters -- `name` **[string][2]** +- `name` **[string][8]** ### Examples @@ -96,20 +108,32 @@ const action = rte.remove('bold'); // {name: 'bold', ...} ``` -Returns **[Object][3]** Removed action +Returns **[Object][9]** Removed action ## getToolbarEl Get the toolbar element -Returns **[HTMLElement][5]** +Returns **[HTMLElement][11]** [1]: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[2]: https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js + +[3]: #add + +[4]: #get + +[5]: #getall + +[6]: #remove + +[7]: #gettoolbarel + +[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array +[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array -[5]: https://developer.mozilla.org/docs/Web/HTML/Element +[11]: https://developer.mozilla.org/docs/Web/HTML/Element diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js index 1449ad977..cbdfe45f1 100644 --- a/src/rich_text_editor/index.js +++ b/src/rich_text_editor/index.js @@ -1,18 +1,31 @@ /** - * This module allows to customize the toolbar of the Rich Text Editor and use commands from the HTML Editing APIs. - * For more info about HTML Editing APIs check here: - * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand + * This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the [HTML Editing APIs](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand). + * It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager * - * It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') - * and leave this task to the Style Manager. + * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js) + * ```js + * const editor = grapesjs.init({ + * rte: { + * // options + * } + * }) + * ``` * - * Before using methods you should get first the module from the editor instance, in this way: + * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance * * ```js - * var rte = editor.RichTextEditor; + * const rte = editor.RichTextEditor; * ``` + * + * * [add](#add) + * * [get](#get) + * * [getAll](#getall) + * * [remove](#remove) + * * [getToolbarEl](#gettoolbarel) + * * @module RichTextEditor */ + import RichTextEditor from './model/RichTextEditor'; import { on, off } from 'utils/mixins';