hvlads / django-ckeditor-5

Django CKEditor 5 integration.
Other
154 stars 60 forks source link

Add new plugins #146

Closed lilianzzz closed 1 year ago

lilianzzz commented 1 year ago

Could you please add instructions on how to add additional plugins?

I tried to add the Markdown plugin. Got the library npm install --save @ckeditor/ckeditor5-markdown-gfm and put in \static\django_ckeditor_5\src\ckeditor.js line import Markdown from '@ckeditor/ckeditor5-markdown-gfm/markdown'; and ClassicEditor.builtinPlugins = [ ... , Markdown, ] But it didn't help.

hvlads commented 1 year ago

To add additional plugins to CKEditor 5 and ensure compatibility with Django templates, you'll need to follow these steps:

  1. Install the desired plugin using npm:

    npm install --save @ckeditor/ckeditor5-markdown-gfm
  2. Import the plugin in your ckeditor.js file, which should be located in the static/django_ckeditor_5/src/ directory. Add the following import statement at the top of the file:

    import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';
  3. Locate the ClassicEditor.builtinPlugins array in ckeditor.js. It should contain a list of plugins enabled for your CKEditor instance. Add Markdown to the list:

    ClassicEditor.builtinPlugins = [
     // Other plugins...
     Markdown
    ];
  4. Run the following command to build your CKEditor project for production:

    npm run prod
  5. After making the changes and compiling the code, you should have the Markdown plugin integrated into CKEditor. However, note that the output generated by the plugin will be in Markdown format, not HTML.

To convert the Markdown output to HTML within Django templates, you can use a library like markdownx. Follow these steps to integrate it:

  1. Install the markdownx library:

    pip install django-markdownx
  2. In your Django project's settings file (settings.py), add 'markdownx' to the INSTALLED_APPS list:

    INSTALLED_APPS = [
       # Other apps...
       'markdownx',
    ]
  3. Run the necessary database migrations to create the required tables for markdownx:

    python manage.py migrate
  4. In your Django template, you can now render the Markdown content as HTML using the markdownx template tags. Import the template tags at the beginning of your template file:

    {% load markdownx %}
  5. Wherever you want to display the Markdown content, use the markdownx template filter:

    {{ your_markdown_content|markdownx }}

By following these steps, you should be able to utilize the CKEditor 5 Markdown plugin and convert the Markdown output to HTML within your Django templates using the markdownx library.