前言:
当前大家对“web富文本编辑器原理”大体比较看重,咱们都需要知道一些“web富文本编辑器原理”的相关知识。那么小编在网摘上汇集了一些对于“web富文本编辑器原理””的相关资讯,希望朋友们能喜欢,我们一起来了解一下吧!django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的管理后台orm功能也是非常强大,几行简单的配置就能快速拥有一个强悍的管理后台,唯一的缺憾就是本身没有集成富文本编辑器,当然也有很多第三方包提供了集成富文本编辑器的功能,但维护貌似都不太积极,升级也不是很积极,因此上,我在自己的django-happ
django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的管理后台orm功能也是非常强大,几行简单的配置就能快速拥有一个强悍的管理后台,唯一的缺憾就是本身没有集成富文本编辑器,当然也有很多第三方包提供了集成富文本编辑器的功能,但维护貌似都不太积极,升级也不是很积极,因此上,我在自己的django-happy-shop项目上选择了自行集成富文本编辑器!
既然提到了django-happy-shop项目,那么我就厚着脸皮问大家要个star,代码开源托管在Gitee,大家搜索名称即可找到,欢迎体验start并试用。
HappyShop 是一个 Django 开发的第三方包,采用django + DRF + vue开发,具备前后端分离基因,拥有完整的多规格商品逻辑,集成支付宝支付,只需要简单配置即可快速收款,可以快速集成到任何django项目,以便快速获得一个简单的商城功能。
言归正传,为什么选择wangeditor?
首先是因为他是国人开发的一款非常优秀的富文本编辑器,支持原生JS集成及vue等前端优秀框架集成,文档也非常完善,最重要是中文文档阅读方便,配置简单明了,很容易使用,并且开源免费!
开始集成模型数据说明
商品模型中有个商品详情的字段content,选择的字段是TextFiled,如下所示:
content = models.TextField("商品详情")
在admin.py中我们通过继承ModelAdmin来实现后台管理功能,如下所示,具体大家可以看源码
@admin.register(HappyShopSPU)class HappyShopSPUAdmin(HappyShopAdmin): '''Admin View for HappyShopSPU''' list_display = ('get_title', 'get_main_picture', 'get_category', 'brand', 'is_new', 'sort', 'add_date')
通过这段代码我们就已经向admin管理后台注册了该模型!
我们集成wangeditor富文本编辑器采用原生JS引入的方法来进行引入,那么首先就需要把相关的JS文件引入到模板文件中,django的ModelAdmin为了提供了一个Media的源类来把js文件及css文件注册到模板中,如下所示:
@admin.register(HappyShopSPU)class HappyShopSPUAdmin(HappyShopAdmin): '''Admin View for HappyShopSPU''' list_display = ('get_title', 'get_main_picture', 'get_category', 'brand', 'is_new', 'sort', 'add_date') .... class Media: js = ( 'admin/js/vendor/jquery/jquery.min.js', ';, 'happy_shop/js/weditor.js' )
第一个JS文件看名称就知道我们先引入了django默认自带的jquery文件;第二个外链cdn的js连接是wangeditor提供的编辑器js文件;第三个weditor.js的文件是我们自己写的配置文件,前端主要的集成配置功能都集中在weditor.js文件中!内容如下:
$(document).ready(function () { // 创建富文本编辑器元素节点 var wehtml = "<div id='wangcontent'></div>" // 获取的div var field_div = document.querySelectorAll(".field-content>div") field_div[0].insertAdjacentHTML('afterbegin', '<b>商品详情:</b>'); field_div[0].insertAdjacentHTML('beforeend', wehtml); $(".field-content>div>label").attr('style', 'display:none') const E = window.wangEditor const editor = new E("#wangcontent") // 或者 const editor = new E( document.getElementById('div1') ) const $text1 = $('#id_content') console.log($text1.val()) editor.config.onchange = function (html) { // 第二步,监控变化,同步更新到 textarea $text1.val(html) } editor.config.height = 500 // 配置 server 接口地址 editor.config.uploadImgServer = '/happy/upload_img/' editor.config.uploadFileName = 'spuImg' editor.create() editor.txt.html($text1.val()) // 第一步,初始化 textarea 的值 $text1.val(editor.txt.html()) $text1.attr("style","display:none") })
这段代码我就不做过多的解读,只详细说一下思路,首先我们都知道django的表单默认会有一个id的属性,属性值是以id_字段的形式组合,因此上我们就只需要把富文本编辑器的内容赋值给id_content的输入框即可正常提交,总的逻辑就是这样,剩下的就是奔着这个目的去实现!
首先我们找到富文本编辑地块,位于一个.field-content的模块当中,找到这个区块,再在这个区块中用js的方式插入一个富文本的元素<div id='wangcontent'></div>,然后参照wangeditor的文档集成富文本编辑器,并且监听编辑器的onchange事件,把富文本编辑器的内容同步赋值到表单id_content,这里有一个需要注意的是如果原本添加的内容,在编辑的时候应该也要回显到富文本编辑器,所以说这里一定要处理,注意这句editor.txt.html($text1.val())就是解决这个问题,之后把原本的输入框加入属性style设置display为none隐藏即可!
其他代码,直接参考wangeditor的文档,写得很清楚!
实现图片上传功能
js文件中与上传图片相关的配置就以下两句:
// 配置 server 接口地址editor.config.uploadImgServer = '/happy/upload_img/'editor.config.uploadFileName = 'spuImg'
第一句是图片的上传地址url;第二句是自定义表单的name值;
上传url对应的视图代码如下,具体的逻辑大家可看代码,可能比文字描述更清楚,这里限制了需要登录才能上传,如果再进一步限制,我们可以只限制超管的权限【这个正在完善权限】,但我并没有这么做,也没有限制上传文件类型,这是因为该富文本编辑器在前段已经默认设置了图片的大小及类型,当然前端传的值作为后端应该永远不能相信,要对其验证,这个在后边版本中也会处理,全部提取到项目的配置文件中!
class HappyShopUploadImage(LoginRequiredMixin, View): """富文本编辑器上传图片 首先会检查项目根目录有没有media/upload/的文件夹 如果没有就创建,图片最终保存在media/upload/目录下 返回图片路径为 "/media/upload/file.png" wangEditor_v4文档: """ @method_decorator(csrf_exempt) def dispatch(self, *args, **kwargs): return super().dispatch(*args, **kwargs) def post(self, request, *args, **kwargs): import os import uuid file_data = request.FILES keys = list(file_data.keys()) file_path = settings.BASE_DIR / 'media/upload/' if os.path.exists(file_path) is False: os.mkdir(file_path) # 返回数据中需要的data data = [] for key in keys: img_dict = {} file = file_data.get(f'{key}') # 重命名文件名称 names = list(os.path.splitext(file.name)) names[0] = ''.join(str(uuid.uuid4()).split('-')) file.name = ''.join(names) new_path = os.path.join(file_path, file.name) # 开始上传 with open(new_path, 'wb+') as f: for chunk in file.chunks(): f.write(chunk) # 构造返回数据 img_dict['url'] = f'/media/upload/{file.name}' data.append(img_dict) context = {"errno": 0,"data":data} return JsonResponse(context)
最后,在应用的url文件中加入该视图url即可,如下:
path('upload_img/', views.HappyShopUploadImage.as_view(), name="upload_img")
到此,我们的富文本编辑器就集成成功了,若有不清楚的可留言咨询,或直接看源码哦!别忘了star哦!
标签: #web富文本编辑器原理 #富文本编辑器 js