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路径是为了渲染到前端,给用户预览.

 

转载于:https://www.cnblogs.com/52forjie/p/7912937.html