KindEditor文本编辑器
下载地址：http://www.kindsoft.net/down.php
官网使用方法：http://kindeditor.net/docs/usage.html
启用方法
下载解压后，将期中的kindeditor文件夹完全拷贝到网站存储静态文件的文件夹中（python：static文件夹）
引用方法
1、引入kindeditor文件夹中名为kindeditor-all-min.js的文件以及lang文件夹下的zh-CN.js文件
// 可以直接路径引入
2、自行添加一个form组件的 textarea
3、textarea输入框替换成kindeditor面板JS方法
{#导入kindeditor面板方法（实际是替换HTML中的textarea文本框）#}
呈现：
精简常用初始化参数：
width
编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。
数据类型: String
默认值: textarea输入框的宽度
示例:
K.create('#id', {
width : '700px'
});
height
编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。
数据类型: String
默认值: textarea输入框的高度
items
配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
数据类型: Array
默认值:
使用方法：不是用的直接在列表中直接删除
items：[
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]
source
HTML代码
preview
预览
undo
后退
redo
前进
cut
剪切
copy
复制
paste
粘贴
plainpaste
粘贴为无格式文本
wordpaste
从Word粘贴
selectall
全选
justifyleft
左对齐
justifycenter
居中
justifyright
右对齐
justifyfull
两端对齐
insertorderedlist
编号
insertunorderedlist
项目符号
indent
增加缩进
outdent
减少缩进
subscript
下标
superscript
上标
formatblock
段落
fontname
字体
fontsize
文字大小
forecolor
文字颜色
hilitecolor
文字背景
bold
粗体
italic
斜体
underline
下划线
strikethrough
删除线
removeformat
删除格式
image
图片
flash
Flash
media
视音频
table
表格
hr
插入横线
emoticons
插入表情
link
超级链接
unlink
取消超级链接
fullscreen
全屏显示
about
关于
打印
code
插入程序代码
map
Google地图
baidumap
百度地图
lineheight
行距
clearhtml
清理HTML代码
pagebreak
插入分页符
quickformat
一键排版
insertfile
插入文件
template
插入模板
anchor
插入锚点
resizeType（固定输入框大小方法）
2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
数据类型: Int
默认值: 2
uploadJson：（重要）
指定上传文件的服务器端程序。
数据类型: String
默认值: basePath + ‘php/upload_json.php’
KindEditor.ready(function (k) {
window.editor=k.create("#article_box",{ // 内填textarea的id值
width:1110, // 默认为像素
hight:570,
resizeType:0,
uploadJson:"/upload_img/", // 需要下语句话传输csrf
extraFileUploadParams:{"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
})
})
extraFileUploadParams（额外的上传时用到的参数）
上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
数据类型: Array
默认值: {}
KindEditor.ready(function(K) {
K.create('#id', {
extraFileUploadParams : {
item_id : 1000,
category_id : 1
}
});
});
完整示例：
HTML与JS区
{% load static %} # 关于资源链接
{#导入kindeditor面板方法（实际是替换HTML中的textarea文本框）#}
HTML代码与JS代码
Urls需要添加的链接（添加与后端交互路径）
# 配置用户上传图片路径
url(r'^upload_img/', views.upload_img, name='upload_img'), # 用户上传非文本所走路径
urls代码
后端代码（views.py）
# 数据上传
def upload_img(request):
img_obj = request.FILES.get("imgFile") # 获取前端传输回的非文本资源 (默认的键名为:imgFile)
# 设计存储路径
media_path = settings.MEDIA_ROOT
path = os.path.join(media_path, "article_imgs", img_obj.name)
# 存储方法
with open(path, mode="wb") as f:
for line in img_obj:
f.write(line)
# 反回给前端数据
res = {
"url": "/media/article_imgs/"+img_obj.name, # 资源存储相对路径
"error": 0 # 状态码（可不填）
}
return HttpResponse(json.dumps(res)) # 序列化反回
后端代码
存储路径示例图
最终示意图