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',
}
}
}
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'), name="ck_editor_5_upload_file"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
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
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"
)
}
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.
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": "",
"name": "django-ckeditor-5",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": "",
"keywords": "CKEditor,CKEditor5,Django",
"author": "",
"author_email": "Vladislav Khoboko <vladislah@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/79/67/7bf598beb4b7aaa02a15c072098e918b0dc44a6f33bca4dc871474d36572/django-ckeditor-5-0.2.12.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\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'), name=\"ck_editor_5_upload_file\"),\n ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\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\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\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\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.12",
"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": "b0c422e7991cd1f97c3da00e687c1ab0868fac4520b7a9848cdb1e3261d94e86",
"md5": "a397dac1c1cef1d1accd04dab3ac5b8f",
"sha256": "f32cf1ce6e498d114baed8eda4b81526d61f55b55ee67ed985c26714365344e5"
},
"downloads": -1,
"filename": "django_ckeditor_5-0.2.12-py3-none-any.whl",
"has_sig": false,
"md5_digest": "a397dac1c1cef1d1accd04dab3ac5b8f",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 2092965,
"upload_time": "2024-03-02T12:36:00",
"upload_time_iso_8601": "2024-03-02T12:36:00.628519Z",
"url": "https://files.pythonhosted.org/packages/b0/c4/22e7991cd1f97c3da00e687c1ab0868fac4520b7a9848cdb1e3261d94e86/django_ckeditor_5-0.2.12-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "79677bf598beb4b7aaa02a15c072098e918b0dc44a6f33bca4dc871474d36572",
"md5": "53abceb50159dcf10b7a287a7c4fc527",
"sha256": "c7165f3736f3d29dddaeda09c175903bdf3cf2b3f376c46aa5be2cc30c2c4e97"
},
"downloads": -1,
"filename": "django-ckeditor-5-0.2.12.tar.gz",
"has_sig": false,
"md5_digest": "53abceb50159dcf10b7a287a7c4fc527",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 2061256,
"upload_time": "2024-03-02T12:36:03",
"upload_time_iso_8601": "2024-03-02T12:36:03.107866Z",
"url": "https://files.pythonhosted.org/packages/79/67/7bf598beb4b7aaa02a15c072098e918b0dc44a6f33bca4dc871474d36572/django-ckeditor-5-0.2.12.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-03-02 12:36:03",
"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
