[Python知识库]django快速集成富文本编辑器wangeditor

django快速集成富文本编辑器wangeditor

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',
            'https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.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文档：https://www.wangeditor.com/
    """
    
    @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哦！