Django-- KindEditor 富文本编辑器使用

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文件中去

 

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

 

首先导入

<script src="{% static 'js/jquery-1.12.1.min.js' %}"></script>
<script src="{% static 'js/axios.js' %}"></script>
<script src="{% static 'js/kindeditor/kindeditor-all-min.js' %}"></script>

body中使用

内容:<textarea id='content' value="">{{i.content}}</textarea>
                            <script>
                                initKindEditor();
                                function initKindEditor() {
                                    var kind = KindEditor.create('#content', {
                                        width: '100%',       // 文本框宽度(可以百分比或像素)
                                        height: '300px',     // 文本框高度(只能像素)
                                        minWidth: 200,       // 最小宽度（数字）
                                        minHeight: 400      // 最小高度（数字）
                                    });
                                }
                            </script>

异步将富文本内容提交给后台，就需要动态获取富文本的内容

<script>
    function add(){
        var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
        let params = new URLSearchParams();
        params.append('id',$("#id").val())
        params.append('title',$("#tit").val())
        params.append('author',$("#author").val())
        params.append('content',content)
        axios({
            url:'news_update',
            data:params,
            method:'post',
            responseType:"text",
        })
        .then(function(obj){
            console.log(obj.data)
            if(obj.data == '更新成功'){
                alert("更新成功")
                window.location.href="news"
                
            }
            else{
                alert("更新失败")
            }    
        })
    }
      
   
   </script>