首页 > 其他分享> 文章详细

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

2022-02-07 16:33:23 阅读：237 来源： 互联网

标签：... 文本编辑 ckeditor demo editor CKEditor name

前言

这几年一直在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

前言

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

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