富文本编辑器的使用

KindEditor为例：下载

1、下载KindEditor

2、根据需求上传所需文件至服务器

3、HTML页面编辑

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

<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>

4、初始化参数：参考官网

　　示例：

<script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#article_content', {
                 "800",  //宽度
                height: "500px", //高度
                resizeType: 0, //禁止拖动编辑框
                uploadJson: '/blog/upload/', //指定处理文件程序url
                extraFileUploadParams: {
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
                },//可以指定上传其它参数，可以用于解决跨站请求伪造csrf的问题
                filePostName: 'img_file', //指定上传文件form名称，后端显示为{'img_file':''}
            })
            ;

        });

    </script>

5、后端处理图片文件

　　1、配置路由

# blog/...
    url(r'^blog/', include('blog.urls')),  # 处理博客页

# 处理副本文本编辑器上传图片
    url(r'^upload/', views.upload),

　　2、视图处理

# 更改xframe属性为sameorigin
@xframe_options_sameorigin
def upload(request):
    obj = request.FILES.get("img_file")  # 获取上传的图片
    print("name", obj.name)
    path = os.path.join(settings.MEDIA_ROOT, "add_article", obj.name)  # 拼接地址，用于存放至服务端
    with open(path, "wb") as f:
        for line in obj:
            f.write(line)  # 将图片存放至本地
    res = {
        "error": 0,
        "url": "/media/add_article/" + obj.name
    }
    return HttpResponse(json.dumps(res))  # 返回图片地址及上传信息

总结：1、注意csrf的问题，可以在初始化中利用extraFileUploadParams指定参数

　　　2、可以在视图函数中添加逻辑判断，例如图片大小等，返回不同的信息提示

　　　3、关于响应头的问题，如果不讲响应头设置为sameorigin属性，可能会报如下错误　

Refused to display '页面url' in a frame because it set 'X-Frame-Options' to 'deny'.

　　　解决方式：django提供为单独的页面更换响应头的方法，为这个视图函数添加装饰器即可

# 更改xframe属性为sameorigin
@xframe_options_sameorigin
def upload(request):
        pass

　　django中的frame_options 详解参考