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

  1. 安装
   $ pip install django-ckeditor
  1. 注册
   # 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',
   ]
  1. 创建模型
   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
  1. 生成迁移文件
   $ python manage.py makemigrations
   $ python manage.py migrate
  1. 进入后台添加文章,你就会看到富文本编辑器了
  2. 添加更多配置
   # 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',
       }
   }
  1. 在模型文件添加以下内容
   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
  1. 代码高亮
   <link rel="stylesheet" href="/static/css/googlecode.css">
   <script src="/static/js/highlight.pack.js"></script>
   <script>hljs.initHighlightingOnLoad();</script>

添加图片

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

  1. 下载
   $ pip install pillow
  1. 注册
   # 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]';
   };
  1. 引入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' %}">

...

Prismwidgetlineutils插件添加到配置文件中。后面两个编辑器自带,不用单独下载,添上就可以了:

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

给TA打赏
共{{data.count}}人
人已打赏
其它

安装NPM包时报错“ run `npm audit fix` to fix them, or `npm audit` for details”

2020-10-27 22:46:43

其它

前端开发中使用阿里巴巴矢量库

2020-10-27 23:02:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索