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")[].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>