django-kindeditor编辑器

一:kindeditor是HTML的一款编辑器插件.

1,下载地址::    KindEditor 4.1.11 (2016-03-31)

2,修改html页面的具体的操做:

1,在须要显示编辑器的位置添加textarea输入框
<textarea id="editor_id" name="content" style="width:700px;height:300px;">  #这里的id值是惟一的,可是也能够变,只要后面用到id值的地方都同样便可.
</textarea>

注意:
    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>

 

3,获取textarea里面的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'); }

 3,操做img图片:

在html里面先写好html代码:

例:
KindEditor.ready(function(K) {    //这段代码是处理img以及byte类型代码
                window.editor = K.create('#editor_id',{
                    resizeType:0,   //设置该textarea能不能变化
                    uploadJson:"/blog/uploadFile/",   //下载byte类型用一个单独的路径运行
                    extraFileUploadParams:{
                           csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                       }  //加上这个字段传文件过去,能够和图片一块儿传过去.
                });
        })


处理图片咱们给他一个单独的路径,和视图函数处理他.后面的extraFileUploadParams字段,是为了配合POST请求的forbidden,一块儿传过去的.

 

在views视图函数里

def uploadFile(request):
    print(request.file)  #能够查看file的文件格式,而且查看到键值对
    file_obj=request.FILES.get('imgFile')  #imgFile就是file文件的键
    file_name=file_obj.name         #取到文件名
    path=os.path.join(根路径,文件夹路径,file_name)  #拼接路径,建立文件夹.
    
    with open(path,'wb')as f:
         for i in file_obj.chunks():            #遍历图片,chunks()指按照必定量取值  
         f.write(i)
    response={
     'error':0,
     url:'/存图片的路径/'  
}    
return Httpresponse(json.dumps(response))
#这里必须用json处理,  返回给插件识别,  url路径是为了渲染到前端,给用户预览.