Package: django-ckeditor-5
CKEditor 5 for Django >= 2.0Quick startpipinstalldjango-ckeditor-5Add “django_ckeditor_5” to your INSTALLED_APPS in yourproject/settings.pylike this:INSTALLED_APPS=[...'django_ckeditor_5',]Also, in yourproject/settings.pyadd: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'# optionalCKEDITOR_5_FILE_STORAGE="path_to_storage.CustomStorage"# optionalCKEDITOR_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',}}}Include the app URLconf in yourproject/urls.pylike this:fromdjango.confimportsettingsfromdjango.conf.urls.staticimportstatic# [ ... ]urlpatterns+=[path("ckeditor5/",include('django_ckeditor_5.urls'),name="ck_editor_5_upload_file"),]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)Add to yourproject/models.py:fromdjango.dbimportmodelsfromdjango_ckeditor_5.fieldsimportCKEditor5FieldclassArticle(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,
LinkImageExamplesExample of using a widget in a form:fromdjangoimportformsfromdjango_ckeditor_5.widgetsimportCKEditor5Widgetfrom.modelsimportCommentclassCommentForm(forms.ModelForm):"""Form for comments to the article."""def__init__(self,*args,**kwargs):super().__init__(*args,**kwargs)self.fields["text"].required=FalseclassMeta:model=Commentfields=("author","text")widgets={"text":CKEditor5Widget(attrs={"class":"django_ckeditor_5"},config_name="comment")}Custom storage example:importosfromurllib.parseimporturljoinfromdjango.confimportsettingsfromdjango.core.files.storageimportFileSystemStorageclassCustomStorage(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/")Installing from GitHub:cdyour_root_projectgitclonehttps://github.com/hvlads/django-ckeditor-5.gitcddjango-ckeditor-5yarninstallyarnrunprodcdyour_root_projectpythonmanage.pycollectstaticExample 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<linkrel="stylesheet"href="path/to/assets/content-styles.css"type="text/css">...<divclass="ck-content"><p>ckeditor content</p></div>