Loading... 1. 安装 ```python $ pip install django-ckeditor ``` 2. 注册 ```python # 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. 创建模型 ```python 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 $ python manage.py makemigrations $ python manage.py migrate ``` 5. 进入后台添加文章，你就会看到富文本编辑器了 6. 添加更多配置 ```python # 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. 在模型文件添加以下内容 ```python 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. 代码高亮 ```python <link rel="stylesheet" href="/static/css/googlecode.css"> <script src="/static/js/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script> ``` ## 添加图片 > 默认是不能上传图片的，这里教大家怎么上传图片 1. 下载 ```python $ pip install pillow ``` 2. 注册 ```python # 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属性 ```python 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样式 ```css p img{ width: auto; height: auto; max-width: 100%; display: block; } ``` ## 修改代码的样式 > 代码高亮需要添加额外的插件**Prism**。在[Prism](https://links.jianshu.com/go?to=https%3A%2F%2Fckeditor.com%2Fcke4%2Faddon%2Fprism)插件官方页面下载（也可以点击[这里](https://links.jianshu.com/go?to=https%3A%2F%2Fdownload.ckeditor.com%2Fprism%2Freleases%2Fprism_1.0.1.zip)直接下载）后，将解压出来的`prism`放到`env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins`目录下。注意**env**是你创建的虚拟环境的目录。 > > 之前你安装的所有库都在这个env目录中的。 [https://www.jianshu.com/p/a14970431762](https://www.jianshu.com/p/a14970431762) 然后在[Prism官网](https://links.jianshu.com/go?to=https%3A%2F%2Fprismjs.com%2Fdownload.html%23themes%3Dprism-okaidia%26languages%3Dmarkup%2Bcss%2Bclike%2Bjavascript%2Bpython%26plugins%3Dline-numbers)选择主题： - 根据喜好选择一个喜欢的主题 - 然后选择需要高亮的语言。不清楚就可以全选 - 勾选行号插件 - 最后点击`DOWNLOAD CSS`下载样式 在`static`目录中新建`prism`目录，将下载好的CSS文件放进去。 > 注意这里的static是项目中的静态文件目录（与前面的章节相同），而不是env文件夹中的static目录。 然后在需要代码高亮的**模板文件**中引用prism的静态文件，对代码进行渲染： ```html 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**插件添加到配置文件中。后面两个编辑器自带，不用单独下载，添上就可以了： ```python my_blog/settings.py ... CKEDITOR_CONFIGS = { 'default': { ... # 添加 Prism 相关插件 'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils']), } } ``` ## 页面展示HTML ```python {% autoescape off %} {{content.body}} {% endautoescape %} ``` ## 参考文章 [https://www.jianshu.com/p/65d2a748634b](https://www.jianshu.com/p/65d2a748634b) [http://yshblog.com/blog/193](http://yshblog.com/blog/193) [https://blog.csdn.net/dakengbi/article/details/94378280](https://blog.csdn.net/dakengbi/article/details/94378280) Last modification：August 29th, 2020 at 06:18 am © 允许规范转载 Support 如果觉得我的文章对你有用，请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
