标题:ckeditor使用总结 | 作者: catfish | 时间:2020年01月02日
暂无法显示图片

博客全文来自于http://xieboke.net。做相关总结与收录,方便自己今后使用与查询。

后端使用CKEDITOR

下载ckeditor的prism版本:http://download.ckeditor.com/prism/releases/prism_1.0.1.zip,解压到 ckeditor/static/ckeditor/ckeditor/plugins 路径下。在settings.py中配置:

# ckeditor configs
CKEDITOR_CONFIGS = {
    'language': 'zh-cn',
    'awesome_ckeditor': {
        'toolbar': 'full',
        'width': 'auto',
        'height': '480px',
        'tabSpaces': 4,

        # 插件
        
        # prism:代码高亮、代码行数

        # uploadimage:允许用户直接在编辑器里粘贴(ctrl + v)图片

        # codesnippet:添加代码块的功能

        'extraPlugins': ','.join(['codesnippet', 'uploadimage', 'prism', 'widget', 'lineutils', ]),
    },
}

前端代码高亮

下载prism:https://prismjs.com/download.html的js和css代码,并在html中引入即可。如果想加入显示代码行数请加上:

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

前端使用CKEDITOR

https://ckeditor.com/cke4/builder中下载相关版本后引入文件即可。

<script src="{% static 'ckeditor_4.13.0/ckeditor.js' %}"></script>

记住:ckeditor.js文件不能脱离文件夹而引入。

<textarea name="editor1" id="editor1">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>

<script>
    window.onload = function() {
        CKEDITOR.replace( 'editor1' );
    };
</script>

选择使用相关插件有待深究。

在代码中使用CKEDITOR

简单

安装:

pip3 install django-ckeditor

在INSTALL_APP中激活应用:

INSTALL_APP = [
    'ckeditor',
]

然后使用:

from ckeditor.fields import RichTextField

content = RichTextField(verbose_name="内容")

添加上传图片功能

若想上传图片,保证pillow库已安装。

在INSATLL_APP中增加激活应用"ckeditor_uploader",在配置settings.py文件中写入:

CKEDITOR_UPLOAD_PATH = "upload"
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

在urls.py中配置:

from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('ckeditor', include('ckeditor_uploader.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

然后可以使用了:

from ckeditor_uploader.fields import RichTextUploadingField

content = RichTextUploadingField(verbose_name="内容", config_name="awesome_ckeditor")

 

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!