Extend built-in RTE

Extend built-in RTE

by artur_arseniev

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<div id="gjs">
  <div style="padding: 25px">Extend built-in RTE</div>
</div>

CSS

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

Babel + JSX

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 }
});

const block_paragraph =
{
    label: 'Paragraph',
    category: 'Text',
    content:
        `<p>
            {Insert Paragraph Content Here}.
        </p>`,
    select: true
};

editor.BlockManager.add('paragraph', block_paragraph);

editor.RichTextEditor.remove('link');

editor.RichTextEditor.add('dropcap',
{
    icon: '<b>D<sup>c</sup></b>',
    attributes: {title: 'Dropcap'},
    result: rte =>
    {
        var component = editor.getSelected();
        
        if(component.is('text') && component.getClasses().includes('dropCaps'))
        {
            component.replaceWith(`${component.get('content')}`);
        }
        else
        {
            var range = rte.selection().getRangeAt(0);
            
            var container = range.commonAncestorContainer;
            
            if (container.nodeType == 3)
                container = container.parentNode;
            
            if(container.nodeName == "SPAN" && container.classList.contains('dropCaps'))
            {
                var parent = container.parentNode;
                var content = document.createTextNode(container.innerHTML);
                
                // insert all our children before ourselves.
                parent.insertBefore(content, container);
                
                parent.removeChild(container);
            }
            else
            {
                rte.insertHTML(`<span class="dropCaps">${rte.selection()}</span>`);
            }
        }
  }
});

editor.RichTextEditor.add('superscript',
{
  icon: '<b>S<sup>s</sup></b>',
  attributes: {title: 'Superscript'},
  result: rte => rte.exec('superscript')
});

editor.RichTextEditor.add('subscript',
{
  icon: '<b>S<sub>s</sub></b>',
  attributes: {title: 'Subscript'},
  result: rte => rte.exec('subscript')
});

editor.RichTextEditor.add('hyperlink',
{
    icon: '&#128279;',
   ...