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.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/grapesjs-plugin-ckeditor@0.0.9/dist/grapesjs-plugin-ckeditor.min.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']
});

editor.setCustomRte({
					/**
					 * Enabling the custom RTE
					 * @param  {HTMLElement} el This is the HTML node which was selected to be edited
					 * @param  {Object} rte It's the instance you'd return from the first call of enable().
					 *                      At the first call it'd be undefined. This is useful when you need
					 *                      to check if the RTE is already enabled on the component
					 * @return {Object} The return should be the RTE initialized instance
					 */
					enable: function(el, rte) {
						// If already exists just focus
						if (rte) {
							this.focus(el, rte); // implemented later
							return rte;
						}
					
						// CKEditor initialization
						rte = CKEDITOR.inline(el, {
							// Your configurations...
							toolbar: [
							 	{ name: 'styles', items: ['Font', 'FontSize' ] },
							 	['Bold', 'Italic', 'Underline', 'Strike'],
							 	{name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
							 	{name: 'links', items: ['Link', 'Unlink']},
							 	{name: 'colors', items: [ 'TextColor', 'BGColor' ]},
							 ],
							// uiColor: '#9AB8F3', // Inline editor color
							//startupFocus: true,
							// extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
							// allowedContent: true, // Disable auto-formatting, class removing, etc.
							enterMode: CKEDITOR.ENTER_BR,
							//extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
							//allowedContent: true, // CKEditor stops filtering the inputted content at all
							//extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
							// extraAllowedContent: 'style;*[id,rel](*){*}',
							// extraAllowedContent: 'p;div;span;ul;li;table;td;style;*[id];*(*);*{*}',
							
							// IMPORTANT
							// Generally, inline editors...