Home

How to add CKEditor to a react component in Meteor

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Adding CKEditor to a react component in Meteor is easiest if you manually download and add the Editor yourself. Meteor packages or NPM packages had me running around trying to fix errors.

  1. Download CKEditor files from the official site.
  2. Extract all the files to /public/ckeditor folder
  3. In your “index.html” add script ref to editor js.
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
  4. In your react component add a DIV that CKEditor can render to.
    <div id="inline1" contentEditable="true" suppressContentEditableWarning='true'></div>

    You must set the contentEditable to true so that React won’t mess with the tag and cause Ckeditor errors. Also use the suppress attribute.

  5. In the componentDidMount, start CKEditor.
    componentDidMount() {
      CKEDITOR.disableAutoInline = true;
    
      CKEDITOR.config.allowedContent = true;
    
      CKEDITOR.inline('inline1', {
        // To enable source code editing in a dialog window, inline editors require the "sourcedialog" plugin.
        extraPlugins: 'sharedspace',
        removePlugins: 'floatingspace,maximize,resize',
        sharedSpaces: {
          top: 'top2',
          bottom: 'bottom2'
        }
      });
    }
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Powered by WordPress. Designed by WooThemes