编辑器

kindeditor 编辑器

博客园用的 TinyMCE 编辑器 支持拖放/粘贴上传图片

编辑器使用方法

1. 下载编辑器

下载 KindEditor 最新版本，下载以后打开 examples/index.html 就能够看到演示。

下载页面: http://www.kindsoft.net/down.php

2. 部署编辑器

解压 kindeditor-x.x.x.zip 文件，将全部文件上传到您的网站程序目录里，例如：http://您的域名/editor/

Note

您能够根据需求删除如下目录后上传到服务器。

• asp - ASP程序
• asp.net - ASP.NET程序
• php - PHP程序
• jsp - JSP程序
• examples - 演示文件

3. 修改HTML页面

1. 在须要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;"> &lt;strong&gt;HTML内容&lt;/strong&gt; </textarea> 

Note

• id在当前页面必须是惟一的值。
• 在textarea里设置HTML内容便可实现编辑，在这里须要注意的是，若是从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
• 在有些浏览器上不设宽度和高度可能显示有问题，因此最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。

2. 在该HTML页面添加如下脚本。

<script charset="utf-8" src="/editor/kindeditor.js"></script> <script charset="utf-8" src="/editor/lang/zh-CN.js"></script> <script> KindEditor.ready(function(K) { window.editor = K.create('#editor_id'); }); </script> 

Note

• 第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
• 经过K.create函数的第二个参数，能够对编辑器进行配置，具体参数请参考 编辑器初始化参数 。

var options = { cssPath : '/css/index.css', filterMode : true }; var editor = K.create('textarea[name="content"]', options); 

4. 获取HTML数据

// 取得HTML内容
html = editor.html(); // 同步数据后能够直接取得textarea的value editor.sync(); html = document.getElementById('editor_id').value; // 原生API html = K('#editor_id').val(); // KindEditor Node API html = $('#editor_id').val(); // jQuery // 设置HTML内容 editor.html('HTML内容'); 

Note

• KindEditor的可视化操做在新建立的iframe上执行，代码模式下的textarea框也是新建立的，因此最后提交前须要执行 sync() 将HTML数据设置到原来的textarea。
• KindEditor在默认状况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，因此用form方式提交数据，不须要手动执行sync()函数。
• KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。固然也能够用 filterMode 参数关闭过滤模式，保留全部标签。

// 关闭过滤模式，保留全部标签
KindEditor.options.filterMode = false; KindEditor.ready(function(K)) { K.create('#editor_id'); }


调节参数参考 http://kindeditor.net/doc.php
例如：

KindEditor.ready(function(K)) { K.create('#editor_id'，{
width:"800",
heigth:"600",
.....
}

); }

编辑器上传文件

uploadJson

指定上传文件的服务器端程序。

• 数据类型: String
• 默认值: basePath + ‘php/upload_json.php’
• 是post请求须要添加csrf

extraFileUploadParams

上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

• 数据类型: Array
• 默认值: {}

KindEditor.ready(function(K) { K.create('#id', { extraFileUploadParams : { item_id : 1000, category_id : 1 } }); }); 

Note

4.1.1版本开始支持。

上传文件写法

KindEditor.ready(function(K)) { K.create('#editor_id'，{

　　　　uploadJson：“/upload/”,   #上传文件储存路径

 extraFileUploadParams : { 

　　　　　　　　csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

},

filePostName:"upload_img"   #知道上传文件的key值

}

def upload(request):
    """
    编辑器上传文件接受视图函数
    :param request:
    :return:
    """

    print(request.FILES)
    img_obj=request.FILES.get("upload_img") #取出文件对象
    print(img_obj.name)

    path=os.path.join(settings.MEDIA_ROOT,"add_article_img",img_obj.name) #文件保存路径

    with open(path,"wb") as f:

        for line in img_obj:
            f.write(line)

import jsonresponse = {    'error':0,    'url':'media/add_articel_img%s'%img_obj}# 返回图片路径，预览图片return HttpResponse(json.dumps(response))