富文本编辑器(KindEditor)

目录

• 富文本编辑器
  • 文章内容区使用富文本编辑器
  • 富文本编辑器上传图片问题

富文本编辑器

文章内容区使用富文本编辑器

KindEditor 是一套开源的在线 HTML 编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框 (textarea) 替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

• 官网下载：http://kindeditor.net/down.php
• 如何使用富文本编辑器，点击文档查看或者网址：http://kindeditor.net/doc.php
• 下载编辑器并拷贝到static目录下，照着上面的使用方法简介使用，类似于bootstrap的用法

富文本编辑器上传图片问题

1. 因为编辑器是后端没有处理，正常上传图片会变成下载图片，我们需要去KindEditor官网查看文档是如何解决这类问题？

查看文档信息，锁定要查看的信息内容>>:查看上传文件和extraFileUploadParams（参数）的用法

案例一

1.首先在html的js部分导入静态文件
<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
2.根据官方文档为边编辑器设置编辑内容的高宽以及滚动条的滑动、设置上传的路由以及参数
<script>
KindEditor.ready(function(K) {
    window.editor = K.create('#editor_id',{
        width : '100%',  //编辑器内容宽度
        height: '600px',  //编辑器内容高度
        resizeType:1,    //2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
        uploadJson : '/upload_img/',
        extraFileUploadParams : {
            csrfmiddlewaretoken:'{{ csrf_token }}',
        }
    });

});
</script>
3.根据上传的图片编写后端逻辑
def upload_img_func(request):
    # 返回的数据格式是有要求的
    """
    官方数据返回的格式
    //成功时
    {
            "error" : 0,
            "url" : "http://www.example.com/path/to/file.ext"
    }
    //失败时
    {
            "error" : 1,
            "message" : "错误信息"
    }

    """
    back_dict = {
        "error": 0,
    }

    print(request.FILES)  # 通过打印可知结果是字典形式{“imgFile”，[] }
    """
    <MultiValueDict: {'imgFile': [<InMemoryUploadedFile: src=http___i0.hdslb.com_bfs_archive_a950a0a98c107b172ac0ae55642998da3369cc62.jpg&refer=http___i0.hdslb.webp (image/webp)>]}>
    """
    currentTime = datetime.datetime.today().strftime('%Y%m%d %H%M%S')
    print(currentTime)
    if request.method == 'POST':
        # 获取编辑器上传的图片数据files
        img_obj = request.FILES.get("imgFile")
        # 拼接文章图片所存放的路径
        img_dir_path = os.path.join(settings.BASE_DIR, 'media', 'article')
        if not os.path.exists(img_dir_path):
            os.mkdir(img_dir_path)

        img_file_path = os.path.join(img_dir_path,
                                     f'{request.user.username}${currentTime}${img_obj.name}')  # 针对当前文件名，为了防止冲突可以添加唯一标识，比如：用户名+当前时间+文件名
        with open(img_file_path, 'wb') as f:
            for line in img_obj:
                f.write(line)
        back_dict[
            'url'] = f'/media/article/{request.user.username}${currentTime}${img_obj.name}'  # 不能返回后端绝对路径 而应该是暴露的接口路径
    return JsonResponse(back_dict)

注意点：

• 如果不知道传到后端的数据形式，可以提前打印看看
• 获取图片格式是request.FILES
• 拼接路径，路径一般存在暴露接口，为了让前端暴露给用户看media文件夹下
• 返回给前端的网址接口应该是项目暴露的接口路径url