(注意：整个文件都是在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
网友评论