HTML编辑器线编辑器

顺晟科技

2021-08-06 10:41:04

321

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: \'\',       // 文本框宽度(可以百分比或像素)
                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编辑器基础:兼容各种浏览器下一篇：N个富文本编辑器/基于网络的HTML

网站建设

Html

HTML编辑器线编辑器