Django使用ckeditor富文本编辑器

后台使用

步骤1：安装django-ckeditor：、

pip install django-ckeditor

步骤2：在settings.py中注册app

my_blog/settings.py

...
INSTALLED_APPS = [
    ...
    
    'ckeditor',  # 不带图片上传功能
    'ckeditor_uploader',  # 带图片上传功能
    ...
]
...

步骤3：接下来需要修改模型了。用django-ckeditor库自己的富文本字段替换普通的文本字段TextField，根据要不要上传图片功能可以选择使用以下两种方式之一

# 不上传图片使用
from ckeditor.fields import RichTextField   # 不可上传图片

    content=RichTextField(verbose_name='博客正文')

# 需要上传图片功能
from ckeditor_uploader.fields import RichTextUploadingField

    content=RichTextUploadingField(verbose_name='博客正文')

步骤4：设置URL和图片上传路径，如果使用RichTextUploadingField不上传图片，则跳过此步骤。

# urls.py设置图片路由
re_path(r'^ckeditor', include('ckeditor_uploader.urls')),

# settings.py设置图片存储路径

#设置图片访问的统一路由
MEDIA_URL = '/media/'
#设置上传的图片 保存到media目录下
MEDIA_ROOT = os.path.join(BASE_DIR,'media/')

CKEDITOR_UPLOAD_PATH = 'cBlog/' # 图片将上传到项目下的media/cBlog路径下
CKEDITOR_IMAGE_BACKEND = 'pillow'   # 用于生成图片缩略图，在编辑器里浏览上传的图片

步骤5：要迁移数据库

python manage.py makemigrations
python manage.py migrate

步骤6：为方便测试，修改app/admin.py文件，将富文本字段模型注册到后台中：

步骤7：启动服务器，进入后台的评论页面，发现已经可以使用django-ckeditor了：

步骤8：如果需要自己设置富文本编辑器的功能，有如下两种方法：

        方法一：settings.py中进行自定义配置：

CKEDITOR_CONFIGS = {
    'default': {
        'width': 'auto',    # 编辑器宽度自适应
        'height': '300px',
        'skin': 'moono-lisa',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'toolbar_Full': [
            [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ],
            [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],

            [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ],
            [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],
            '/',
            [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ],
            [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ],
            [ 'Link','Unlink','Anchor' ],
            [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ],
            '/',
            [ 'Styles','Format','Font','FontSize' ] ,
            [ 'TextColor','BGColor' ] ,
            [ 'Maximize', 'ShowBlocks','-','CodeSnippet', '-', 'About' ] ,
        ],
        # 'toolbar': 'Full',
        # 加入代码块插件,toolbar_Full中需要有'CodeSnippet'
        'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils']),
    }
}

        方法二：在ckeditor模块的\ckeditor\configs.py文件中也能配置

前端展示和代码高亮

参考Django搭建个人博客：使用django-ckeditor富文本编辑器 - 简书

前端使用

引入编辑器

<!-- 文本区域 -->
 <textarea type="text" class="form-control" id="content" name="content" rows="12"></textarea>
   

 <script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
    <script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
    <script>
        CKEDITOR.replace('content', {

        });
    </script>

功能设置

        方法一：config.js中配置

# 在ckeditor模块的路径\ckeditor\static\ckeditor\ckeditor\config.js中配置

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
    config.extraPlugins = "codesnippet";     /*配置代码功能*/
    config.height = 600;
    //设置图片上传时，预览中的文字为空
	config.image_previewText=' ';
	//开启图片上传
	config.filebrowserImageUploadUrl= "/media/cBlog";

    config.uploadUrl= '/media/uploadimg'; //粘贴图片上传
};

        方法二：script标签中直接配置

    <script>
        CKEDITOR.replace('content', {
            "filebrowserImageUploadUrl":"/media/cBlog",
            "image_previewText":"",
            "extraPlugins":"codesnippet",
        });
    </script>