GrapesJS Starter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://cdn.jsdelivr.net/npm/grapesjs-plugin-ckeditor@0.0.9/dist/grapesjs-plugin-ckeditor.min.js"></script>
<script src="https://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js"></script>
<div id="gjs">

<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span><br>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</i><br>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h6>Lorem ipsum dolor sit amet</h6>
</div>

CSS

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

Babel + JSX

$(function () {

CKEDITOR.dtd.$editable.span = 1
CKEDITOR.dtd.$editable.a = 1
CKEDITOR.dtd.$editable.strong = 1
CKEDITOR.dtd.$editable.em = 1
CKEDITOR.dtd.$editable.s = 1
CKEDITOR.dtd.$editable.u = 1
CKEDITOR.dtd.$editable.i = 1
CKEDITOR.dtd.$editable.p = 1
CKEDITOR.dtd.$editable.sub = 1
CKEDITOR.dtd.$editable.sup = 1
CKEDITOR.dtd.$editable.h1 = 1
CKEDITOR.dtd.$editable.h2 = 1
CKEDITOR.dtd.$editable.h3 = 1
CKEDITOR.dtd.$editable.h4 = 1
CKEDITOR.dtd.$editable.h5 = 1

CKEDITOR.disableAutoInline = true;

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-plugin-ckeditor'],
  pluginsOpts: {
  	'gjs-plugin-ckeditor': {
  		options: {
        language: 'en',
        startupFocus: true,
        extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
        allowedContent: true, // Disable auto-formatting, class removing, etc.
        format_tags: "p;h1;h2;h3;h4;h5;h6;div;span;strong",
        enterMode: CKEDITOR.ENTER_BR,
        uiColor: '#0000001a', // Inline editor color
        extraPlugins: 'justify,colorbutton,panelbutton,font,sourcedialog,showblocks',
        toolbar:[
        [ "Format", "-", "Bold", "Italic", "Strike", "Underline", "Subscript", "Superscript", "RemoveFormat", "-", "NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "Link", "Unlink", "Anchor", "TextColor", "BGColor", "-", "ShowBlocks", "-", "Image", "Table", "-", "Sourcedialog"]
            ]
      },
      position: 'left',
    }
  }
});
});