Django配置富文本编辑器django-ckeditor

1. 安装

   $ pip install django-ckeditor

2. 注册

   # setting.py

   INSTALLED_APPS = [
       'django.contrib.admin',
       'django.contrib.auth',
       'django.contrib.contenttypes',
       'django.contrib.sessions',
       'django.contrib.messages',
       'django.contrib.staticfiles',
       # 将 django-ckeditor 注册到该列表中
       'ckeditor',
   ]

3. 创建模型

   from django.db import models
   from ckeditor.fields import RichTextField

   class Article(models.Model):
       title = models.CharField(verbose_name='标题', max_length=255, null=True)
       body = RichTextField()

       class Meta:
           db_table = 'blog_article'
           app_label = 'article'
           verbose_name = '文章'
           verbose_name_plural = verbose_name

       def __str__(self):
           return self.title

4. 生成迁移文件

   $ python manage.py makemigrations
   $ python manage.py migrate

5. 进入后台添加文章，你就会看到富文本编辑器了
6. 添加更多配置

   # setting.py

   # ckeditor
   CKEDITOR_CONFIGS = {
       # 将这份配置命名为 my_config
       'my_config': {
           'skin': 'moono-lisa',
           'toolbar_Basic': [
               ['Source', '-', 'Bold', 'Italic']
           ],
           'toolbar_Full': [
               ['Styles', 'Format', 'Bold', 'Italic', 'Underline', 'Strike', 'SpellChecker', 'Undo', 'Redo'],
               ['Link', 'Unlink', 'Anchor'],
               ['Image', 'Flash', 'Table', 'HorizontalRule'],
               ['TextColor', 'BGColor'],
               ['Smiley', 'SpecialChar'],
               # 在工具栏中添加该功能的按钮
               ['CodeSnippet'], ['Source'],

           ],
           'toolbar': 'Full',
           'height': 291,
           'width': 835,
           'filebrowserWindowWidth': 940,
           'filebrowserWindowHeight': 725,
           # 添加的插件
           'extraPlugins': 'codesnippet',
       }
   }

7. 在模型文件添加以下内容

   from django.db import models
   from ckeditor.fields import RichTextField

   class Article(models.Model):
       title = models.CharField(verbose_name='标题', max_length=255, null=True)
       # 添加参数 config_name 指定使用的配置
       body = RichTextField(config_name='my_config')

       class Meta:
           db_table = 'blog_article'
           app_label = 'article'
           verbose_name = '文章'
           verbose_name_plural = verbose_name

       def __str__(self):
           return self.title

8. 代码高亮

   <link rel="stylesheet" href="/static/css/googlecode.css">
   <script src="/static/js/highlight.pack.js"></script>
   <script>hljs.initHighlightingOnLoad();</script>

添加图片

默认是不能上传图片的，这里教大家怎么上传图片

1. 下载

   $ pip install pillow

2. 注册

   # setting.py

   INSTALLED_APPS = [
       'django.contrib.admin',
       'django.contrib.auth',
       'django.contrib.contenttypes',
       'django.contrib.sessions',
       'django.contrib.messages',
       'django.contrib.staticfiles',
       'ckeditor',
       # 添加以下字段
       'ckeditor_uploader',
   ]

图片自适应

使用ckeditor中发现,上传图片时，总会自动给img标签添加width和height的style内联样式

1. 在ckeditor中的config.js文件中，找到editorConfig并设置disallowedContent属性

   CKEDITOR.editorConfig = function( config ) {
       // Define changes to default configuration here. For example:
       // config.language = 'fr';
       // config.uiColor = '#AADC6E';
       # 添加
       config.disallowedContent='img{width,height};img[width,height]';
   };

2. 引入css样式

   p img{
       width: auto;
       height: auto;
       max-width: 100%;
       display: block;
   }

修改代码的样式

代码高亮需要添加额外的插件Prism。在Prism插件官方页面下载（也可以点击这里直接下载）后，将解压出来的prism放到env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins目录下。注意env是你创建的虚拟环境的目录。

之前你安装的所有库都在这个env目录中的。

https://www.jianshu.com/p/a14970431762

然后在Prism官网选择主题：

• 根据喜好选择一个喜欢的主题
• 然后选择需要高亮的语言。不清楚就可以全选
• 勾选行号插件
• 最后点击DOWNLOAD CSS下载样式

在static目录中新建prism目录，将下载好的CSS文件放进去。

注意这里的static是项目中的静态文件目录（与前面的章节相同），而不是env文件夹中的static目录。

然后在需要代码高亮的模板文件中引用prism的静态文件，对代码进行渲染：

templates/article/detail.html

...

<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">

...

将Prism、widget、lineutils插件添加到配置文件中。后面两个编辑器自带，不用单独下载，添上就可以了：

my_blog/settings.py

...
CKEDITOR_CONFIGS = {
    'default': {
        ...
        # 添加 Prism 相关插件
        'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils']),
    }
}

页面展示HTML

{% autoescape off %}
    {{content.body}}
{% endautoescape %}

参考文章

https://www.jianshu.com/p/65d2a748634b

http://yshblog.com/blog/193

https://blog.csdn.net/dakengbi/article/details/94378280