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})
上一篇:dll文件缺失的解决方案


下一篇:intellisense_copilot for vscode 基本配置和问题列举