首页 > Web开发 > 详细

HTML编辑器KindEditor

时间:2019-04-03 20:37:31      阅读:164      评论:0      收藏:0      [点我收藏+]

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

主要特点

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

 

官方文档:http://kindeditor.net/doc.php

 

集成到django2.0.4:

{# 载入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>
      
    
    <script>

        initKindEditor();

     
        function initKindEditor() {
            var kind = KindEditor.create(#content, {    //id选择器绑定
                width: 100%,       // 文本框宽度(可以百分比或像素)
                height: 300px,     // 文本框高度(只能像素)
                minWidth: 200,       // 最小宽度(数字)
                minHeight: 400      // 最小高度(数字)
            });
        }
  </script>

 

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

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

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

 

另外如果你想利用富文本编辑器上传文件到本地,前端需要添加配置:fileManagerJson: ‘/file_manager/‘,

 

后台文件上传代码:

import os
import time
import json
def file_manager(request):    
    dic = {}
    root_path = E:/week_23_1/static
    static_root_path = /static/
    request_path = request.GET.get(path)
    if request_path:
        abs_current_dir_path = os.path.join(root_path, request_path)
        move_up_dir_path = os.path.dirname(request_path.rstrip(/))
        dic[moveup_dir_path] = move_up_dir_path + / if move_up_dir_path else move_up_dir_path

    else:
        abs_current_dir_path = root_path
        dic[moveup_dir_path] = ‘‘     #  上一级目录

    dic[current_dir_path] = request_path  #current_dir_path 指当前的路径
    dic[current_url] = os.path.join(static_root_path, request_path)

    file_list = []            #文件目录
    for item in os.listdir(abs_current_dir_path):         #listdir 就是把某一路径下的东西全部拿下来
        abs_item_path = os.path.join(abs_current_dir_path, item)
        a, exts = os.path.splitext(item)
        is_dir = os.path.isdir(abs_item_path)
        if is_dir:
            temp = {
                is_dir: True,   #是否是dir
                has_file: True, #目录下面是否存在文件
                filesize: 0,   #文件大小是多少
                dir_path: ‘‘,  #当前的路径是在哪
                is_photo: False,  #是否是图片
                filetype: ‘‘,    #文件的类型是什么
                filename: item,  #文件名是什么
                datetime: time.strftime(%Y-%m-%d %H:%M:%S, time.gmtime(os.path.getctime(abs_item_path))) #文件创始时间是什么
            }
        else:
            temp = {
                is_dir: False,
                has_file: False,
                filesize: os.stat(abs_item_path).st_size,
                dir_path: ‘‘,
                is_photo: True if exts.lower() in [.jpg, .png, .jpeg] else False,
                filetype: exts.lower().strip(.),
                filename: item,
                datetime: time.strftime(%Y-%m-%d %H:%M:%S, time.gmtime(os.path.getctime(abs_item_path)))
            }

        file_list.append(temp)
    dic[file_list] = file_list
    return HttpResponse(json.dumps(dic))

 

HTML编辑器KindEditor

原文:https://www.cnblogs.com/Niuxingyu/p/10651257.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!