KindEditor 富文本编辑框

(注意：整个文件都是在django项目中写的)
富文本编辑框，看起来十分高大上啊，其实直接引用插件就直接可以调用出来了。。
富文本编辑框有好几种，CKEditor，UEEditor，TinyEditor，KindEditor
下面使用的是KindEditor

1.下载插件：http://kindeditor.net/down.php，官网上基本都是中文，使用基本就是调用参数就可以了，
2.下载完整个扔到pycharm的django项目中，各种配置完成。
程序：

# views. py 有些库这里没有引入
import json
import os
def test(request):
    return render(request,"test.html")

def get_img(request):
    print(request.POST)
    print(request.FILES)
    img = request.FILES.get("imgFile")  # 这里接收上传的img图片文件，
    print(img.name)
    base_dir = os.path.join("static/images",img.name) # 图片路径
    f = open(base_dir,"wb")
    for line in img.chunks():
        f.write(line)
    f.close()

    dic = {
        'error': 0, # 0代表成功，1代表失败，失败会弹出提示框，提示文本为这里的 message
        'url': '/' + base_dir,  # 必须返回一个路径，使得图片在富文本框中显示
        'message': '错误了...'
    }
    return HttpResponse(json.dumps(dic))  # json 格式化字典

test.html 模版文件

# test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea id="content"></textarea>
<script src="/static/kindeditor/kindeditor-all.js"></script>
 # 虽然下载的文件夹中有很多文件，但是这里只需要一个

<script>
    var editor;
    KindEditor.ready(function (K) { # 这个ready是kindEditor内置的，也就是等到页面加载完执行
        editor = K.create('#content',{
            resizeType: 1, # 是否可以拖动，1是可以上下拖动
            allowPreviewEmoticons: true,  # 一个小效果
            allowImageUpload: true, # 是否运行本地上传img
            items: [  # 这个items 就是编辑框上可选的项目
                'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
            uploadJson:"/get_img.html/"
        })
    })
</script>
</body>
</html>

配置一下路径导航文件

# urls.py
    path("test.html/", web_views.test),
    path('get_img.html/', web_views.get_img),

这就可以了。
效果图：：

1.png

详细参数：http://kindeditor.net/docs/option.html
参考博客：http://www.cnblogs.com/wupeiqi/articles/6307554.html

KindEditor 富文本编辑框

推荐阅读更多精彩内容