Artigos - Artigos e dicas feito com PHP + Laravel

Posted on: July 30, 2020 07:44 PM

Posted by: Renato

Categories: PHP markdown ckeditor

Views: 1467

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/

Renato

Developer

No comments yet! Be the first to comment