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' %}">

...

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

Last modification:August 29th, 2020 at 06:18 am
如果觉得我的文章对你有用,请随意赞赏