Posted on: July 30, 2020 07:44 PM
Posted by: Renato
Views: 1601
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:
- Extract the downloaded plugin
.zipinto thepluginsfolder of your CKEditor installation. Example:http://example.com/ckeditor/plugins/markdown
- Enable the plugin by using the
extraPluginsconfiguration setting. Example:config.extraPlugins = 'markdown';
- 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/
Donate to Site
Renato
Developer