码迷,mamicode.com
首页 > 其他好文 > 详细

django——文本编辑器

时间:2019-01-02 15:45:30      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:UNC   asc   比较   load   div   品质   ret   商城   edit   

在博客项目中,为了支持用户的在线编辑博客,我们选用了kindeditor这个强大的编辑器。

以下是对kindeditor的简介,以及在Django中引入这个编辑器的方法:)

1.KindEditor是什么?

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

主要特点

  • 快速:体积小,加载速度快
  • 开源:开放源代码,高水平,高品质
  • 底层:内置自定义 DOM 类库,精确操作 DOM
  • 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能
  • 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件
  • 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Oper

2.Django中引入kindeditor

2.1 templates代码:

<div class="content form-group">
    <label for="">内容(Kindeditor编辑器,不支持拖放/粘贴上传图片) </label>
    <div>
        <textarea name="content" id="article_content" cols="30" rows="10"></textarea>
    </div>
</div>

<input type="submit" class="btn btn-default">


<script src="/static/js/jquery-3.3.1.min.js"></script>
   <script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>

    <script>
            KindEditor.ready(function(K) {
                    window.editor = K.create(#article_content,{
                        width:"100%",
                        height:"600",
                        resizeType:0,
                        uploadJson:"/upload/",
                        extraFileUploadParams:{
                            csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val()
                        },
                        filePostName:"upload_img"


                    });
            });
    </script>

上面的html代码中的textarea将是kindeditor引入的对象

2.2 效果展示:

技术分享图片

django——文本编辑器

标签:UNC   asc   比较   load   div   品质   ret   商城   edit   

原文地址:https://www.cnblogs.com/key01/p/10208776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!