Django框架前后端开发之前后台集成超好用ckeditor富文本编辑器超详demo

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

后台admin使用Ckeditor富文本编辑器

富文本编辑器有很多种，这里介绍如何使用ckeditor

• 安装ckeditor

pip install django-ckeditor

• settings配置

#settings.py
NSTALLED_APPS = [
    ...
    'ckeditor',  # 富文本编辑器
    'ckeditor_uploader',  # 富文本编辑器上传图片模块
    ...
]

• 添加ckeditor配置

#settings.py
CKEDITOR_CONFIGS = {
    'default':{
        'toolbar':'full', # 完整工具条
        'height': 300, # 编辑高度
        # 'woidth': 300, # 编辑宽度
    },
}
CKEDITOR_UPLOAD_PATH = ''   # 上传图片保存路径,使用了fastDFS,设置为''

• 添加ckeditor路由配置

#urls.py
urlpatterns = [
    ...
    re_path(r'^ckeditor/', include('ckeditor_uploader.urls')),
]

• 为我们的商品SPU表种设置额外的三个字段

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField
class Goods(BaseModel):
    ...
    desc_detail = RichTextUploadingField(default='', verbose_name='详细介绍')
    desc_pack = RichTextField(default='', verbose_name='包装信息')
    desc_service = RichTextUploadingField(default='', verbose_name='售后服务')
    ...

• 解决ckeditor繁体中文

C:\Python37\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\lang

修改其中的语言文件配置，把zh-ch文件内容复制到zh文件中即可

前台vue使用CKEditor富文本编辑器

• 在vue中安装CKEditor

cnpm install ckeditor/ckeditor5-build-classic

• 组件引入CKEditor

<script>
import CKEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn"; //中文包
</script>

• 模版标签嵌入

<template>
  <div id="toolbar-container"></div>	<!-- 编辑器容器 -->
  <div id="editor">
    <!-- <p>This is the initial editor content.</p> -->
  </div>
</template>

• vue实例数据保存编辑器实例

data() {
    return {
     		editor: null, // 编辑器实例
    }
},

• 钩子函数初始化CKEditor编辑器

mounted() {
  	this.initCKEditor();
},

methods: {
    initCKEditor() {
      CKEditor.create(document.querySelector("#editor"), {
        ckfinder: {
          uploadUrl: "http://127.0.0.1:8000/ck_upload/"
          // 接口返回需要：包括uploaded(选项true/false)，url两个字段
        }
      })
        .then(editor => {
          const toolbarContainer = document.querySelector("#toolbar-container");
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor; //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
        })
        .catch(error => {
          console.error(error);
        });
    },
}

• 在django中响应图片上传的接口

import hashlib
def md5_(filename):
    m = hashlib.md5()
    m.update(filename.encode())
    return m.hexdigest()
# Create your views here.
def ck_upload(request):
  	_f = request.FILES.get('upload')
    _name = md5_(_f.name) # 生成md5名
    _path = os.path.join(STATICFILES_DIRS[0],_name)
    with open(_path,'wb') as fp:
        fp.write(_f.read())
    return JsonResponse({
        'uploaded':'true',
      	# 表示上传成功
        'url': 'http://127.0.0.1:8000/static/' + _name 
      	# 拼接上传图片的绝对访问路径
    })

• 整个页面的提交，需要在vue组件template中绑定按钮点击时间

<template>
    <div>
        <div id="toolbar-container"></div>
        <div id="editor">
        </div>
        <button @click="post_editor">提交</button>
    </div>
</template>

• post_editor的提交事件方法

ck_post() {
    axios.post("http://127.0.0.1:8000/ck_post/", {
      	data: this.editor.getData() // 获取了编辑器的所有内容
    }).then(res=>{
        console.log(res.data)
    })
}

• 后端接收整个富文本部分的内容

class CkPost(APIView):
    def post(self,request):
        ck_data = request.data.get('data')
        ...
        return Response({'code':200})

标签：...,文本编辑,ckeditor,demo,editor,CKEditor,name
来源： https://blog.csdn.net/HeroicLee/article/details/122810743