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

2019-04-04 17:52:41 阅读：313 来源： 互联网

标签：文本编辑 kindeditor val KindEditor Django content params append

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>

标签：文本编辑,kindeditor,val,KindEditor,Django,content,params,append
来源： https://www.cnblogs.com/xcsg/p/10656224.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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