在Django前台使用ckeditor富文本编辑器

1.首先安装CKEditor富文本编辑器

pip install django-ckeditor
pip install pillow

第二行命令安装图形处理模块
2.在settings.py里面注册富文本编辑器

INSTALLED_APPS = [
    # 三方应用程序
    "ckeditor",
    "ckeditor_uploader",
]

3.配置富文本编辑器
在settings.py里面加入下面代码

MEDIA_URL = "/media/"
CKEDITOR_UPLOAD_PATH = "upload/"
CKEDITOR_IMAGE_BACKEND = "pillow"

4.配置url
在项目的总urls.py加入如下代码

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

5.在需要用到富文本编辑器的前台页面引入js

<script src="../static/ckeditor/ckeditor-init.js" type="text/javascript"></script>
<script src="../static/ckeditor/ckeditor/ckeditor.js" type="text/javascript"></script>

我这里是加载的本地static文件，根据实际情况填写路径
6.添加一个form表单，里面添加多行文本框，配置name传给后台
注意textarea里面的值{{ bor.script | safe }}一定要加safe转义，否则识别处理的是html源码

<form action="{% url 'librarys:edit_bor' bor.id %}" method="post">
        {% csrf_token %}
        <div class="form-group">
            <input type='hidden' value="{{ bor.id }}" name='id'>
            <textarea name="desc" class="text">
                {{ bor.script |safe }}
            </textarea>
        </div>
        <button type="submit" class="btn btn-primary">修改</button>
    </form>

7.最后使用js把textarea标签转换为CKEditor富文本编辑器， 通过参数设置富文本编辑器的外形。

<script>CKEDITOR.replace('desc', {width: "1100px",height:"300px"})</script>

CKEDITOR.replace()函数有2个参数
他的第一个参数是textarea标签name的值，第二个参数是一个字典，通过这里设置多行文本框的行高，列宽，属性名，外形，功能等