title: Inline CKeditor integrated in GrapesJS editor
body: <p>I'm working in an editor application where GrapesJS is implemented. Its editor and feature are working fine. I have integrated inline CKeditor to GrapesJS editor and it has few issues.</p>
  <ol>
  <li>Multiple inline edit options are showing</li>
  <li>Sometimes the editor options are not positioned properly</li>
  <li><strong>Main issue</strong>: Inline options are showing but <strong>it's not reflecting</strong> in the selected text. I mean we can click those inline options to format the editor contents but it is not reflected in the editor.</li>
  </ol>
  <p>Here I'm sharing few codes written:</p>
  <pre><code>const editor = grapesjs.init({
      container: '#gjs',
      fromElement: 1,
      height: '100%',
      storageManager: { type: 0 },
      plugins: ['gjs-plugin-ckeditor']
  });
  
  editor.setCustomRte({
      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',
              
              // sharedSpaces: {
              //  top: editor.RichTextEditor.getToolbarEl(),
              // }
          });
      
          this.focus(el, rte); // implemented later
          return rte;
      },
      focus(el, rte) {
          // Do nothing if already focused
          if (rte &amp;&amp; rte.focusManager.hasFocus) {
              return;
          }
          el.contentEditable = true;
          rte &amp;&amp; rte.focus();
      },
      disable(el, rte) {
          el.contentEditable = false;
          if (rte &amp;&amp; rte.focusManager)
              rte.focusManager.blur(true);
      }
  });
  </code></pre>
  <p>Here is <a href="https://jsfiddle.net/Sinto990/d0gsh83a/" rel="nofollow noreferrer">JSFiddle</a> where you can check the working &amp; code.</p>
  <p><strong>Version:</strong></p>
  <p>grapesjs - 0.16.18</p>
  <p>ckeditor - standard - 4.14.1</p>
  <p><strong>What is the expected behavior?</strong></p>
  <p>While applying the inline formatting options from inline CKeditor options, it should reflect in the selected text.</p>
  <p><strong>Describe the bug detailed:</strong></p>
  <p>I have integrated the CKeditor in the grapesJS editor for inline editing purposes. Currently, when I select text to format it, the inline CKeditor options are displaying along with another few options in a black toolbar. I'm confused about that. And the main issue is that even I use any of the inline formatting options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..</p>
  <p><strong>What is the current behavior?</strong></p>
  <p>The main issue is that even I use any of the inline options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..</p>
  <p><a href="https://i.stack.imgur.com/lhQeN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lhQeN.png" alt="enter image description here" /></a></p>