CKEditor 4 - markdown - Not work with CKEditor 4.6.1

Posted on: July 30, 2020 07:44 PM

Posted by: Renato

Categories: PHP markdown ckeditor

Views: 16

Markdown Plugin for CKEditor This is a plugin for CKEditor, you can use markdown mode in CKEditor. Moreover, your article in WYSIWYG mode can be translated to markdown.

Source Code

 

<textarea name="editor1" id="editor1" rows="10"></textarea>
    <script>
    CKEDITOR.replace('editor1', {
        toolbarGroups: [
            {name: 'tools'},
            {name: 'links'},
            {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
            {name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ]},
            {name: 'styles'},
            {name: 'others'}
        ],
        extraPlugins: 'markdown'
    });
    </script>

Online builder

The recommended way to install all CKEditor add-ons is to create a custom build by using Online builder. To do that, click the Add to my editor button on the plugin page. When you are done, click the Build my editor button on the right side of the page to go to Online builder.

Add-on installation instructions

If you want to add the plugin manually, you will need to:

  1. Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
    http://example.com/ckeditor/plugins/markdown
  2. Enable the plugin by using the extraPlugins configuration setting. Example:
    config.extraPlugins = 'markdown';
  3. Download and configure all its dependencies, too.

Add-on dependencies

No additional dependencies.

Note: The plugin may have additional requirements. Check the add-on page and documentation for more details.

Soluction error:

On your browser, open developer tools and check the console.
You might be getting an error as:
Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('cke_source cke_reset cke_enable_context_menu') contains HTML space characters, which are not valid in tokens.

Go to your project>ckeditor>plugins>markdown>plugin.js:
search for "textarea.addClass('cke_source cke_reset cke_enable_context_menu');"

If you found the same. Replace this with:
"textarea.addClass('cke_source','cke_reset','cke_enable_context_menu');"

Fontes:

https://github.com/hectorguo/CKEditor-Markdown-Plugin/issues/22

https://ckeditor.com/cke4/addon/markdown

https://ckeditor.com/ckeditor-4/download/

http://hectorguo.com/CKEditor-Markdown-Plugin/

 

Share
About Author

Renato

Developer

Add a Comment
Comments 0 Comments

No comments yet! Be the first to comment