KindEditor文本编辑器
下载地址：
官网使用方法：
启用方法
下载解压后，将期中的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文本框）#} Urls需要添加的链接（添加与后端交互路径）
# 配置用户上传图片路径 url(r'^upload_img/', views.upload_img, name='upload_img'), # 用户上传非文本所走路径
后端代码（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)) # 序列化反回 存储路径示例图
最终示意图
