Grapesjs Rte Extensions

Some useful actions supported by the grapesjs built-in rich text editor but not implemented by default

$3

html

$3

js
const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-rte-extensions'],
});

$3

css
body, html {
  margin: 0;
  height: 100%;
}



Summary

* Plugin name: grapesjs-rte-extensions

`Options`

Set section to false to disable completely

| Option | Description | Default | |-|-|- |base | This is section contains default rte buttons | base: {bold: true,italic: true,underline: true,strikethrough: true,link: true,},| |fonts | Buttons for font options | fonts: {fontColor: true,hilite: true,},| |format | Buttons for format options | format: heading1: true,heading2: true,heading3: true,paragraph: true,clearFormatting: true,},| |indentOutdent | Indent and outdent buttons | false| |list | Ordered and unordered list buttons | false| |align | Text align buttons | false| |actions | Copy, cut, paste and delete buttons | false| |extra | Code and horizontal line buttons | false| |undoredo | undo and redo buttons | false| |darkColorPicker | Set color picker to darkmode | true| |icons | Custom icons fontColor, hiliteColor, heading1-6, paragraph, quote, clear, indent, outdent, subscript, superscript, olist, ulist, justifyLeft, justifyRight, justifyCenter, justifyFull, copy, cut, paste, delete, code, line, undo, redo | {}| |maxWidth | maximum-width before buttons move to next row, the default width fits the 16 default buttons | 600px |

`Download`

* CDN *https://unpkg.com/grapesjs-rte-extensions* NPM *npm i grapesjs-rte-extensions* GIT *git clone https://github.com/Ju99ernaut/grapesjs-rte-extensions.git

`Usage`

Directly in the browser`html

Modern javascript`js import grapesjs from 'grapesjs'; import plugin from 'grapesjs-rte-extensions'; import 'grapesjs/dist/css/grapes.min.css'; import 'grapesjs-rte-extensions/dist/grapesjs-rte-extensions.min.css';

const editor = grapesjs.init({ container : '#gjs', // ... plugins: [plugin], pluginsOpts: { [plugin]: { / options / } } // or plugins: [ editor => plugin(editor, { / options / }), ], });`

Rearranging the buttons example

#### JS

`js const rteEl = editor.RichTextEditor.getToolbarEl(); //By default there are 16 buttons, index them from 0 to 15 //og position [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] // | | | | | | \ \ \ \ \ \ \ \ \ | Move to position in second array const order = [0, 1, 2, 3, 4, 14, 15, 9, 10, 11, 12, 13, 5, 6, 7, 8]; rteEl.firstChild.childNodes.forEach((child, idx) => child.style.order = order[idx]);`

Before:

After:

`Development`

Clone the repository

`sh $ git clone https://github.com/Ju99ernaut/grapesjs-rte-extensions.git $ cd grapesjs-rte-extensions`

Install dependencies

`sh $ pnpm i`

Start the dev server

`sh $ pnpm start`

Build the source

`sh $ pnpm run build``

License

MIT