【补充】富文本编辑器WangEditor

【补充】富文本编辑器WangEditor

使用Textarea · wangEditor 用户文档

【一】前端页面文本域

<p>内容</p>
<br>
<div>
    <textarea name="content" cols="40" rows="10" class="vLargeTextField" required="" id="id_content"
              style="display: none"></textarea>
    <div id='wangeditor'></div>
</div>

• 定义文本域标签

【二】绑定JQ事件

<script>
    // 富文本编辑器

    $(document).ready(function () {
    const E = window.wangEditor
    // 编辑器
    const editor = new E('#wangeditor')
    // 输入框
    const $text1 = $('#id_content')

    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $text1.val(html)
    }

    // 配置 server 接口地址
    editor.config.uploadImgServer = '{% url "upload_img" %}'
    // 跨域携带 csrf_token ， 如果有其它参数也加在这里
    editor.config.uploadImgParams = {
        'csrfmiddlewaretoken': '{{ csrf_token }}',
    }

    // 第一步，初始化 textarea 的值
    $text1.val(editor.txt.html())

    editor.create()
})

• 依赖于jQuery

【三】后端保存图片

def upload_img(request):
    '''
    # 必须返回指定数据格式，否则会报错
    :param request:
    :return:
       {
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
    "data": [
        {
            url: "图片地址",
            alt: "图片文字说明",
            href: "跳转链接"
        },
        {
            url: "图片地址1",
            alt: "图片文字说明1",
            href: "跳转链接1"
        },
        "……"
    ]
}

    '''
    back_dict = {"errno": 0, "data": []}
    if request.method == "POST":
        img_dict = {}
        img_file_obj = request.FILES
        img_file_dir = os.path.join(BASE_DIR, 'Source', 'article_img')
        keys = list(img_file_obj.keys())
        for key in keys:
            file_data = request.FILES.get(key)
            if not os.path.exists(img_file_dir):
                os.mkdir(img_file_dir)
            file_path = os.path.join(img_file_dir, file_data.name)
            with open(file_path, 'wb') as f:
                for chunk in file_data.chunks():
                    f.write(chunk)
            img_dict["url"] = f'/Source/article_img/{file_data.name}'
            back_dict['data'].append(img_dict)
            print('back_dict:>>>', back_dict)

    return JsonResponse(back_dict)

• 返回格式注意参考官方文档指定方式返回才能接收到数据