Django2.0.4 结合 KindEditor 4.1.11 富文本编辑器

首页 - Python/2019-04-02

标签: Django2.0 文本编辑 KindEditor 4.1 11 结合

KindEditor是一款还不错的开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。之所以推荐这一款编辑器，是因为它非常的轻量化，也不需要安装，从而耦合度非常低，无论是使用表单提交内容还是异步提交，都非常方便，这里简单介绍一下如何在Django2.0.4中使用这款富文本编辑器。

首先在官网下载文件 http://kindeditor.net/down.php

解压后，删除掉一些没有用的文件，只留下lang(语言包) themes(风格包) plugins(插件) 和 kindeditor-all-min.js

将kindeditor文件夹放到项目目录的static/js文件中去

最后在页面中就可以使用了

<!DOCTYPE html>
{# 加载静态文件 #}
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    {# 载入js库 #}
    <script src='{% static "js/jquery-1.12.1.min.js" %}'></script>
    <script src='{% static "js/kindeditor/kindeditor-all-min.js" %}'></script>
</head>
<body>
<textarea id='content'>富文本</textarea>
<button onclick="checkit()">查看</button>
	  
	
	<script>

        initKindEditor();

     
        function initKindEditor() {
            var kind = KindEditor.create('#content', {
                uploadJson:'/md_admin/imageupload', 
                width: '100%',       // 文本框宽度(可以百分比或像素)
                height: '300px',     // 文本框高度(只能像素)
                minWidth: 200,       // 最小宽度（数字）
                minHeight: 400      // 最小高度（数字）
            });
		}
		
		function checkit(){
			var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()

			alert(content);


		}
    </script>
    



    
</body>
</html>

需要注意的一点是，如果你要异步将富文本内容提交给后台，就需要动态获取富文本的内容，那么需要这样写

var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()

而使用传统的 $("#content").val() 是获取不到html标签的

另外如果你想利用富文本编辑器上传文件到本地，前端需要添加配置：uploadJson:'/md_admin/imageupload'

后台文件上传代码：

#kindeditor上传方法
def imageupload(request):
    if request.method == 'POST':
        item = {}
        file = request.FILES.get('imgFile')
        f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb')

        item['message'] = '上传成功'
        item['url'] = 'http://localhost:8000/upload/'+ file.name
        item['error'] = 0
        #写文件 遍历图片文件流
        for chunk in file.chunks():
            f.write(chunk)
        return HttpResponse(json.dumps(item,ensure_ascii=False),content_type='application/json')