GrapesJS Starter

HTML

<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">
  <div style="padding: 25px">Hello World!!!</div>
</div>

CSS

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

Babel + JSX

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.
        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',
    }
  }
});