Django_ KindEditor 插件使用

KindEditor 富文本编辑器插件

目的及原理:

　　更便捷的在前端页面上实现用户的文本编辑操作,

　　　　本质上就是对标签的样式进行封装和事件预处理,

　　　　常规操作都可以通过直接的引入即可实现,

　　　　但是对于存在前后摇交互的文件上传操作需要对后端数据采集和返回进行相应的配置

下载地址:
http://kindeditor.net/down.php

实现效果:

　　

引入:

 1 <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
 2 <script>
 3     KindEditor.ready(function (K) {
 4         window.editor = K.create('#article_content', { // 被修饰的 textarea
 5              "700px",
 6             height: "500px",
 7             // 可以控制 保留还算去除那些特定的功能
 8             items: [
 9                 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
10                 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
11                 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
12                 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
13                 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
14                 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
15                 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
16                 'anchor', 'link', 'unlink', '|', 'about'
17             ],
18             // 上传文件的时候需要指定路径
19             uploadJson: "/upload/",
20             // 因为 csrf 导致403 因此需要将csrf 的值也传入
21             extraFileUploadParams: {
22                 csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
23             },
24             // 为了方便拿到我们上传的文件的句柄 自定义一个
25             filePostName:"upload_img",
26         });
27 
28     });
29 </script>

特殊点 - 关于上传文件以及图片显示:

　　需要实现文件的上传在后端正确的保存的同时.还要实现前端的页面的显示在文本框内

前端后台需要用到的参数:

　　路径 ,403处理 ,句柄

 1 // 上传文件的时候需要指定路径
 2 uploadJson: "/upload/",
 3 
 4 // 因为 csrf 导致403 因此需要将csrf 的值也传入
 5 extraFileUploadParams: {
 6     csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
 7 },
 8 
 9 // 为了方便拿到我们上传的文件的句柄 自定义一个
10 filePostName:"upload_img",

后端后台的配置:

　　urls.py

　　　　指定一个路径处理上传文件的操作

    url(r'upload/',views.upload),

　　views.py

　　　　保存为本地文件, 设定文件的存放路径以及返回路径

 1 from bbs import settings
 2 import os, json
 3 
 4 
 5 def upload(request):
 6     # 文件句柄需要提前定义一个,便于后端操作
 7     obj = request.FILES.get("upload_img")
 8     # 对文件存放路径进行一个预处理,这里是直接将 media 的进行前缀拼接
 9     path = os.path.join(settings.MEDIA_ROOT, "add_article_img", obj.name)
10     # 对文件的读取后循环写入新文件保存在 预置的路径中
11     with open(path, "wb") as f:
12         for line in obj:
13             f.write(line)
14     # 前端页面的呈现需要返回文件的路径作为 img 标签的 src 属性
15     res = {
16         "error": 0,
17         "url":"/media/add_article_img/" + obj.name
18     }
19     # 返回的时候当然要转换成 json 数据
20     return HttpResponse(json.dumps(res))

其他相关操作详见官网 4.x 文档:
http://kindeditor.net/demo.php