Django CKEditor 5
==================
CKEditor 5 for Django >= 2.0
Quick start
-----------
.. code-block:: bash
pip install django-ckeditor-5
1. Add "django_ckeditor_5" to your INSTALLED_APPS in your `project/settings.py` like this:
.. code-block:: python
INSTALLED_APPS = [
...
'django_ckeditor_5',
]
2. Also, in your `project/settings.py` add:
.. code-block:: python
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
customColorPalette = [
{
'color': 'hsl(4, 90%, 58%)',
'label': 'Red'
},
{
'color': 'hsl(340, 82%, 52%)',
'label': 'Pink'
},
{
'color': 'hsl(291, 64%, 42%)',
'label': 'Purple'
},
{
'color': 'hsl(262, 52%, 47%)',
'label': 'Deep Purple'
},
{
'color': 'hsl(231, 48%, 48%)',
'label': 'Indigo'
},
{
'color': 'hsl(207, 90%, 54%)',
'label': 'Blue'
},
]
CKEDITOR_5_CUSTOM_CSS = 'path_to.css' # optional
CKEDITOR_5_FILE_STORAGE = "path_to_storage.CustomStorage" # optional
CKEDITOR_5_CONFIGS = {
'default': {
'toolbar': ['heading', '|', 'bold', 'italic', 'link',
'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],
},
'extends': {
'blockToolbar': [
'paragraph', 'heading1', 'heading2', 'heading3',
'|',
'bulletedList', 'numberedList',
'|',
'blockQuote',
],
'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
'code','subscript', 'superscript', 'highlight', '|', 'codeBlock', 'sourceEditing', 'insertImage',
'bulletedList', 'numberedList', 'todoList', '|', 'blockQuote', 'imageUpload', '|',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
'insertTable',],
'image': {
'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft',
'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side', '|'],
'styles': [
'full',
'side',
'alignLeft',
'alignRight',
'alignCenter',
]
},
'table': {
'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
'tableProperties', 'tableCellProperties' ],
'tableProperties': {
'borderColors': customColorPalette,
'backgroundColors': customColorPalette
},
'tableCellProperties': {
'borderColors': customColorPalette,
'backgroundColors': customColorPalette
}
},
'heading' : {
'options': [
{ 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },
{ 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },
{ 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },
{ 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' }
]
}
},
'list': {
'properties': {
'styles': 'true',
'startIndex': 'true',
'reversed': 'true',
}
}
}
# Define a constant in settings.py to specify file upload permissions
CKEDITOR_5_FILE_UPLOAD_PERMISSION = "staff" # Possible values: "staff", "authenticated", "any"
3. Include the app URLconf in your `project/urls.py` like this:
.. code-block:: python
from django.conf import settings
from django.conf.urls.static import static
# [ ... ]
urlpatterns += [
path("ckeditor5/", include('django_ckeditor_5.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Alternatively, you can use your own logic for file uploads. To do this, add the following to your `settings.py` file:
.. code-block:: python
# Define a constant in settings.py to specify the custom upload file view
CK_EDITOR_5_UPLOAD_FILE_VIEW_NAME = "custom_upload_file"
Then, in your `urls.py`, include the custom upload URL pattern:
.. code-block:: python
path("upload/", custom_upload_function, name="custom_upload_file"),
This allows users to customize the upload file logic by specifying their own view function and URL pattern.
4. Add to your `project/models.py`:
.. code-block:: python
from django.db import models
from django_ckeditor_5.fields import CKEditor5Field
class Article(models.Model):
title=models.CharField('Title', max_length=200)
text=CKEditor5Field('Text', config_name='extends')
Includes the following ckeditor5 plugins:
Essentials,
UploadAdapter,
CodeBlock,
Autoformat,
Bold,
Italic,
Underline,
Strikethrough,
Code,
Subscript,
Superscript,
BlockQuote,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageResize,
Link,
List,
Paragraph,
Alignment,
Font,
PasteFromOffice,
SimpleUploadAdapter,
MediaEmbed,
RemoveFormat,
Table,
TableToolbar,
TableCaption,
TableProperties,
TableCellProperties,
Indent,
IndentBlock,
Highlight,
TodoList,
ListProperties,
SourceEditing,
GeneralHtmlSupport,
ImageInsert,
WordCount,
Mention,
Style,
HorizontalLine,
LinkImage,
HtmlEmbed,
FullPage,
SpecialCharacters,
ShowBlocks,
SelectAll,
FindAndReplace,
FullScreen
Examples
-----------
Example of using a widget in a form:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. code-block:: python
from django import forms
from django_ckeditor_5.widgets import CKEditor5Widget
from .models import Comment
class CommentForm(forms.ModelForm):
"""Form for comments to the article."""
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["text"].required = False
class Meta:
model = Comment
fields = ("author", "text")
widgets = {
"text": CKEditor5Widget(
attrs={"class": "django_ckeditor_5"}, config_name="comment"
)
}
Example of using a widget in a template:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. code-block:: python
{% extends 'base.html' %}
{% block header %}
{{ form.media }} # Required for styling/js to make ckeditor5 work
{% endblock %}
{% block content %}
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit article">
</form>
{% endblock %}
Custom storage example:
^^^^^^^^^^^^^^^^^^^^^^^
.. code-block:: python
import os
from urllib.parse import urljoin
from django.conf import settings
from django.core.files.storage import FileSystemStorage
class CustomStorage(FileSystemStorage):
"""Custom storage for django_ckeditor_5 images."""
location = os.path.join(settings.MEDIA_ROOT, "django_ckeditor_5")
base_url = urljoin(settings.MEDIA_URL, "django_ckeditor_5/")
Changing the language:
^^^^^^^^^^^^^^^^^^^^^^
You can change the language via the ``language`` key in the config
.. code-block:: python
CKEDITOR_5_CONFIGS = {
'default': {
'toolbar': ['heading', '|', 'bold', 'italic', 'link',
'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],
'language': 'de',
},
``language`` can be either:
1. a string containing a single language
2. a list of languages
3. a dict ``{"ui": <a string (1) or a list of languages (2)>}``
If you want the language to change with the user language in django
you can add ``CKEDITOR_5_USER_LANGUAGE=True`` to your django settings.
Additionally you will have to list all available languages in the ckeditor
config as shown above.
Creating a CKEditor5 instance from javascript:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
To create a ckeditor5 instance dynamically from javascript you can use the
``ClassicEditor`` class exposed through the ``window`` global variable.
.. code-block:: javascript
const config = {};
window.ClassicEditor
.create( document.querySelector( '#editor' ), config )
.catch( error => {
console.error( error );
} );
}
Alternatively, you can create a form with the following structure:
.. code-block:: html
<form method="POST">
<div class="ck-editor-container">
<textarea id="id_text" name="text" class="django_ckeditor_5" >
</textarea>
<div></div> <!-- this div or any empty element is required -->
<span class="word-count" id="id_text_script-word-count"></span>
</div>
<input type="hidden" id="id_text_script-ck-editor-5-upload-url" data-upload-url="/ckeditor5/image_upload/" data-csrf_cookie_name="new_csrf_cookie_name">
<span id="id_text_script-span"><script id="id_text_script" type="application/json">{your ckeditor config}</script></span>
</form>
The ckeditor will be automatically created once the form has been added to the
DOM.
To access a ckeditor instance you can either get them through ``window.editors``
.. code-block:: javascript
const editor = windows.editors["<id of your field>"];
or by registering a callback
.. code-block:: javascript
//register callback
window.ckeditorRegisterCallback("<id of your field>", function(editor) {
// do something with editor
});
// unregister callback
window.ckeditorUnregisterCallback("<id of your field>");
Allow file uploading as link:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
By default only images can be uploaded and embedded in the content. To allow
uploading and embedding files as downloadable links you can add the following
to your config:
.. code-block:: python
CKEDITOR_5_ALLOW_ALL_FILE_TYPES = True
CKEDITOR_5_UPLOAD_FILE_TYPES = ['jpeg', 'pdf', 'png'] # optional
CKEDITOR_5_CONFIGS = {
'default': {
'toolbar': ['heading', '|', 'bold', 'italic', 'link',
'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', 'fileUpload' ], # include fileUpload here
'language': 'de',
},
**Warning**: Uploaded files are not validated and users could upload malicious
content (e.g. a pdf which actually is an executable). Furthermore allowing file
uploads disables any validation for the image upload as the backend can't
distinguish between image and file upload. Exposing the file upload to
all/untrusted users poses a risk!
Restrict upload file size:
^^^^^^^^^^^^^^^^^^^^^^^^^^
You can restrict the maximum size for uploaded images and files by adding
.. code-block:: python
CKEDITOR_5_MAX_FILE_SIZE = 5 # Max size in MB
to your config. Default is 0 (allow any file size).
Installing from GitHub:
^^^^^^^^^^^^^^^^^^^^^^^
.. code-block:: bash
cd your_root_project
git clone https://github.com/hvlads/django-ckeditor-5.git
cd django-ckeditor-5
yarn install
yarn run prod
cd your_root_project
python manage.py collectstatic
Example Sharing content styles between front-end and back-end:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
To apply ckeditor5 styling outside of the editor, download content.styles.css from the official ckeditor5 docs and include it as a styleshet within your HTML template. You will need to add the ck-content class to the container of your content for the styles to be applied.
`<https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html#sharing-content-styles-between-frontend-and-backend>`_
.. code-block:: html
<link rel="stylesheet" href="path/to/assets/content-styles.css" type="text/css">
...
<div class="ck-content">
<p>ckeditor content</p>
</div>
Raw data
{
"_id": null,
"home_page": null,
"name": "django-ckeditor-5",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "CKEditor, CKEditor5, Django",
"author": null,
"author_email": "Vladislav Khoboko <vladislah@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/58/61/86d285a9b690c785393083e4d3604ac07c8ec5360dca92ca3f6701c0a8b4/django_ckeditor_5-0.2.15.tar.gz",
"platform": null,
"description": "Django CKEditor 5 \n==================\n\n CKEditor 5 for Django >= 2.0\n\nQuick start\n-----------\n\n .. code-block:: bash\n \n pip install django-ckeditor-5\n\n1. Add \"django_ckeditor_5\" to your INSTALLED_APPS in your `project/settings.py` like this:\n\n .. code-block:: python\n\n INSTALLED_APPS = [\n ...\n 'django_ckeditor_5',\n ]\n\n\n2. Also, in your `project/settings.py` add:\n\n .. code-block:: python\n\n STATIC_URL = '/static/'\n MEDIA_URL = '/media/'\n MEDIA_ROOT = os.path.join(BASE_DIR, 'media')\n\n customColorPalette = [\n {\n 'color': 'hsl(4, 90%, 58%)',\n 'label': 'Red'\n },\n {\n 'color': 'hsl(340, 82%, 52%)',\n 'label': 'Pink'\n },\n {\n 'color': 'hsl(291, 64%, 42%)',\n 'label': 'Purple'\n },\n {\n 'color': 'hsl(262, 52%, 47%)',\n 'label': 'Deep Purple'\n },\n {\n 'color': 'hsl(231, 48%, 48%)',\n 'label': 'Indigo'\n },\n {\n 'color': 'hsl(207, 90%, 54%)',\n 'label': 'Blue'\n },\n ]\n\n CKEDITOR_5_CUSTOM_CSS = 'path_to.css' # optional\n CKEDITOR_5_FILE_STORAGE = \"path_to_storage.CustomStorage\" # optional\n CKEDITOR_5_CONFIGS = { \n 'default': {\n 'toolbar': ['heading', '|', 'bold', 'italic', 'link',\n 'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],\n \n },\n 'extends': {\n 'blockToolbar': [\n 'paragraph', 'heading1', 'heading2', 'heading3',\n '|',\n 'bulletedList', 'numberedList',\n '|',\n 'blockQuote',\n ],\n 'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',\n 'code','subscript', 'superscript', 'highlight', '|', 'codeBlock', 'sourceEditing', 'insertImage',\n 'bulletedList', 'numberedList', 'todoList', '|', 'blockQuote', 'imageUpload', '|',\n 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',\n 'insertTable',],\n 'image': {\n 'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft',\n 'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side', '|'],\n 'styles': [\n 'full',\n 'side',\n 'alignLeft',\n 'alignRight',\n 'alignCenter',\n ]\n \n },\n 'table': {\n 'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',\n 'tableProperties', 'tableCellProperties' ],\n 'tableProperties': {\n 'borderColors': customColorPalette,\n 'backgroundColors': customColorPalette\n },\n 'tableCellProperties': {\n 'borderColors': customColorPalette,\n 'backgroundColors': customColorPalette\n }\n },\n 'heading' : {\n 'options': [\n { 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },\n { 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },\n { 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },\n { 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' }\n ]\n }\n },\n 'list': {\n 'properties': {\n 'styles': 'true',\n 'startIndex': 'true',\n 'reversed': 'true',\n }\n }\n }\n\n # Define a constant in settings.py to specify file upload permissions\n CKEDITOR_5_FILE_UPLOAD_PERMISSION = \"staff\" # Possible values: \"staff\", \"authenticated\", \"any\"\n\n3. Include the app URLconf in your `project/urls.py` like this:\n \n .. code-block:: python\n\n from django.conf import settings\n from django.conf.urls.static import static\n \n # [ ... ]\n \n urlpatterns += [ \n path(\"ckeditor5/\", include('django_ckeditor_5.urls')),\n ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\n\n Alternatively, you can use your own logic for file uploads. To do this, add the following to your `settings.py` file:\n\n .. code-block:: python\n\n # Define a constant in settings.py to specify the custom upload file view\n CK_EDITOR_5_UPLOAD_FILE_VIEW_NAME = \"custom_upload_file\"\n\n Then, in your `urls.py`, include the custom upload URL pattern:\n\n .. code-block:: python\n\n path(\"upload/\", custom_upload_function, name=\"custom_upload_file\"),\n\nThis allows users to customize the upload file logic by specifying their own view function and URL pattern.\n\n\n\n\n\n\n \n \n4. Add to your `project/models.py`:\n\n .. code-block:: python\n\n\n from django.db import models\n from django_ckeditor_5.fields import CKEditor5Field\n \n \n class Article(models.Model):\n title=models.CharField('Title', max_length=200)\n text=CKEditor5Field('Text', config_name='extends')\n \n\nIncludes the following ckeditor5 plugins:\n\n Essentials,\n UploadAdapter,\n CodeBlock,\n Autoformat,\n Bold,\n Italic,\n Underline,\n Strikethrough,\n Code,\n Subscript,\n Superscript,\n BlockQuote,\n Heading,\n Image,\n ImageCaption,\n ImageStyle,\n ImageToolbar,\n ImageResize,\n Link,\n List,\n Paragraph,\n Alignment,\n Font,\n PasteFromOffice,\n SimpleUploadAdapter,\n MediaEmbed,\n RemoveFormat,\n Table,\n TableToolbar,\n TableCaption,\n TableProperties,\n TableCellProperties,\n Indent,\n IndentBlock,\n Highlight,\n TodoList,\n ListProperties,\n SourceEditing,\n GeneralHtmlSupport,\n ImageInsert,\n WordCount,\n Mention,\n Style,\n HorizontalLine,\n LinkImage,\n HtmlEmbed,\n FullPage,\n SpecialCharacters,\n ShowBlocks,\n SelectAll,\n FindAndReplace,\n FullScreen\n\n\nExamples\n-----------\n\nExample of using a widget in a form:\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n .. code-block:: python\n\n from django import forms\n\n from django_ckeditor_5.widgets import CKEditor5Widget\n from .models import Comment\n\n\n class CommentForm(forms.ModelForm):\n \"\"\"Form for comments to the article.\"\"\"\n\n def __init__(self, *args, **kwargs):\n super().__init__(*args, **kwargs)\n self.fields[\"text\"].required = False\n\n class Meta:\n model = Comment\n fields = (\"author\", \"text\")\n widgets = {\n \"text\": CKEditor5Widget(\n attrs={\"class\": \"django_ckeditor_5\"}, config_name=\"comment\"\n )\n }\n\nExample of using a widget in a template:\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n .. code-block:: python\n\n {% extends 'base.html' %}\n {% block header %}\n {{ form.media }} # Required for styling/js to make ckeditor5 work\n {% endblock %}\n {% block content %}\n <form method=\"POST\">\n {% csrf_token %}\n {{ form.as_p }}\n <input type=\"submit\" value=\"Submit article\">\n </form>\n {% endblock %}\n\nCustom storage example:\n^^^^^^^^^^^^^^^^^^^^^^^\n .. code-block:: python\n\n import os\n from urllib.parse import urljoin\n\n from django.conf import settings\n from django.core.files.storage import FileSystemStorage\n\n\n class CustomStorage(FileSystemStorage):\n \"\"\"Custom storage for django_ckeditor_5 images.\"\"\"\n\n location = os.path.join(settings.MEDIA_ROOT, \"django_ckeditor_5\")\n base_url = urljoin(settings.MEDIA_URL, \"django_ckeditor_5/\")\n\n\nChanging the language:\n^^^^^^^^^^^^^^^^^^^^^^\nYou can change the language via the ``language`` key in the config\n\n .. code-block:: python\n\n CKEDITOR_5_CONFIGS = {\n 'default': {\n 'toolbar': ['heading', '|', 'bold', 'italic', 'link',\n 'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],\n 'language': 'de',\n },\n\n``language`` can be either:\n\n1. a string containing a single language\n2. a list of languages\n3. a dict ``{\"ui\": <a string (1) or a list of languages (2)>}``\n\nIf you want the language to change with the user language in django\nyou can add ``CKEDITOR_5_USER_LANGUAGE=True`` to your django settings.\nAdditionally you will have to list all available languages in the ckeditor\nconfig as shown above.\n\nCreating a CKEditor5 instance from javascript:\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\nTo create a ckeditor5 instance dynamically from javascript you can use the\n``ClassicEditor`` class exposed through the ``window`` global variable.\n\n .. code-block:: javascript\n\n const config = {};\n window.ClassicEditor\n .create( document.querySelector( '#editor' ), config )\n .catch( error => {\n console.error( error );\n } );\n }\n\nAlternatively, you can create a form with the following structure:\n\n .. code-block:: html\n\n <form method=\"POST\">\n <div class=\"ck-editor-container\">\n <textarea id=\"id_text\" name=\"text\" class=\"django_ckeditor_5\" >\n </textarea>\n <div></div> <!-- this div or any empty element is required -->\n <span class=\"word-count\" id=\"id_text_script-word-count\"></span>\n </div>\n <input type=\"hidden\" id=\"id_text_script-ck-editor-5-upload-url\" data-upload-url=\"/ckeditor5/image_upload/\" data-csrf_cookie_name=\"new_csrf_cookie_name\">\n <span id=\"id_text_script-span\"><script id=\"id_text_script\" type=\"application/json\">{your ckeditor config}</script></span>\n </form>\n\nThe ckeditor will be automatically created once the form has been added to the\nDOM.\n\nTo access a ckeditor instance you can either get them through ``window.editors``\n\n .. code-block:: javascript\n\n const editor = windows.editors[\"<id of your field>\"];\n\nor by registering a callback\n\n .. code-block:: javascript\n\n //register callback\n window.ckeditorRegisterCallback(\"<id of your field>\", function(editor) {\n // do something with editor\n });\n // unregister callback\n window.ckeditorUnregisterCallback(\"<id of your field>\");\n\n\nAllow file uploading as link:\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\nBy default only images can be uploaded and embedded in the content. To allow\nuploading and embedding files as downloadable links you can add the following\nto your config:\n\n .. code-block:: python\n\n CKEDITOR_5_ALLOW_ALL_FILE_TYPES = True\n CKEDITOR_5_UPLOAD_FILE_TYPES = ['jpeg', 'pdf', 'png'] # optional\n CKEDITOR_5_CONFIGS = {\n 'default': {\n 'toolbar': ['heading', '|', 'bold', 'italic', 'link',\n 'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', 'fileUpload' ], # include fileUpload here\n 'language': 'de',\n },\n\n**Warning**: Uploaded files are not validated and users could upload malicious\ncontent (e.g. a pdf which actually is an executable). Furthermore allowing file\nuploads disables any validation for the image upload as the backend can't\ndistinguish between image and file upload. Exposing the file upload to\nall/untrusted users poses a risk!\n\n\nRestrict upload file size:\n^^^^^^^^^^^^^^^^^^^^^^^^^^\nYou can restrict the maximum size for uploaded images and files by adding\n\n .. code-block:: python\n\n CKEDITOR_5_MAX_FILE_SIZE = 5 # Max size in MB\n\nto your config. Default is 0 (allow any file size).\n\n\nInstalling from GitHub:\n^^^^^^^^^^^^^^^^^^^^^^^\n .. code-block:: bash\n\n cd your_root_project\n git clone https://github.com/hvlads/django-ckeditor-5.git\n cd django-ckeditor-5\n yarn install\n yarn run prod\n cd your_root_project\n python manage.py collectstatic\n \nExample Sharing content styles between front-end and back-end:\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\nTo apply ckeditor5 styling outside of the editor, download content.styles.css from the official ckeditor5 docs and include it as a styleshet within your HTML template. You will need to add the ck-content class to the container of your content for the styles to be applied.\n`<https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html#sharing-content-styles-between-frontend-and-backend>`_\n\n.. code-block:: html\n\n <link rel=\"stylesheet\" href=\"path/to/assets/content-styles.css\" type=\"text/css\">\n ...\n <div class=\"ck-content\">\n <p>ckeditor content</p>\n </div>\n",
"bugtrack_url": null,
"license": "BSD-3-Clause",
"summary": "CKEditor 5 for Django.",
"version": "0.2.15",
"project_urls": {
"homepage": "https://pypi.org/project/django-ckeditor-5/",
"repository": "https://github.com/hvlads/django-ckeditor-5"
},
"split_keywords": [
"ckeditor",
" ckeditor5",
" django"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "59ac771a22ff54cd9e7f252a4a4f431fc638153dfa89f386537394e90a508ea6",
"md5": "fa41833fc6cc27a6184fce9155a92910",
"sha256": "71980998d4bef7b272e50cb6878cca5c0bedec42b389a3827ffe1bbb88babd29"
},
"downloads": -1,
"filename": "django_ckeditor_5-0.2.15-py3-none-any.whl",
"has_sig": false,
"md5_digest": "fa41833fc6cc27a6184fce9155a92910",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 2603644,
"upload_time": "2024-10-18T07:27:01",
"upload_time_iso_8601": "2024-10-18T07:27:01.883455Z",
"url": "https://files.pythonhosted.org/packages/59/ac/771a22ff54cd9e7f252a4a4f431fc638153dfa89f386537394e90a508ea6/django_ckeditor_5-0.2.15-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "586186d285a9b690c785393083e4d3604ac07c8ec5360dca92ca3f6701c0a8b4",
"md5": "286614ed7f94702629c019a2e542a911",
"sha256": "587f0485a3dca6a1a7c7c68e4160770e46389b8cf50205bf352bd47fcb63567c"
},
"downloads": -1,
"filename": "django_ckeditor_5-0.2.15.tar.gz",
"has_sig": false,
"md5_digest": "286614ed7f94702629c019a2e542a911",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 2563275,
"upload_time": "2024-10-18T07:27:05",
"upload_time_iso_8601": "2024-10-18T07:27:05.056526Z",
"url": "https://files.pythonhosted.org/packages/58/61/86d285a9b690c785393083e4d3604ac07c8ec5360dca92ca3f6701c0a8b4/django_ckeditor_5-0.2.15.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-18 07:27:05",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "hvlads",
"github_project": "django-ckeditor-5",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "django-ckeditor-5"
}
JSON
