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的值，第二个参数是一个字典，通过这里设置多行文本框的行高，列宽，属性名，外形，功能等
Original: https://blog.csdn.net/weixin_44304678/article/details/121924666
Author: 小胡yhu
Title: 在Django前台使用ckeditor富文本编辑器
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/734550/
转载文章受原作者版权保护。转载请注明原作者出处！