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的更多相关文章

  1. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  2. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  3. 后台文本编辑器KindEditor介绍

    后台文本编辑器KindEditor介绍 我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...

  4. python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  5. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

  6. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  7. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  8. 在线HTML编辑器KindEditor

     简介 KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.KindEdi ...

  9. HTML编辑器 -- KindEditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

随机推荐

  1. 定时删除所有文件夹下的_desktop.ini文件

    写个批处理,删除对应的文件,命名为DELDesktopIni.bat,存于D盘根目录 @echo off :delini for %%a in ( C: D: E: ) DO ( del /f/s/a ...

  2. Cherrypy文件上传非ASCII文件名乱码问题解决

    Cherrypy 版本: 18.0.1 由于某些特殊原因(可能是与标准兼容的问题),Cherrypy对上传文件的原文件名使用 ISO-8859-1 编码方式解码,导致非 ASCII 的文件名显示为乱码 ...

  3. MySQL 数据查询

    SELECT子句:用来指定查询返回字段,星号(*)表示返回所有字段 SELECT  [DISTINCT]*|字段列表        #DISTINCT 用来过滤重复数据 FROM子句:用来指定数据来源 ...

  4. 英语口语练习系列-C21-美式幽默

    1. 基础词汇 1.1 back [bæk] n. 后背 on the back 靠着背 sleep on the back 仰着睡 back of the chair 椅子的后背 stab sb. ...

  5. Spring类型转换（Converter）

    Spring的类型转换 以前在面试中就有被问到关于spring数据绑定方面的问题,当时对它一直只是朦朦胧胧的概念,最近稍微闲下来有时间看了一下其中数据转换相关的内容,把相应的内容做个记录. 下面先说明 ...

  6. linux 本机内核模块

    make -C /lib/modules/4.13.0-36-generic/build M=/$(pwd) modules 内核里只需要写obj-m:=hello.o

  7. js 设备判断（移动端pc端 安卓ios 微信）

    苹果安卓判断 $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.in ...

  8. Zabbix 3.4.7针对一些主机设置期间维护

    场景说明: 由于公司有些主机设置了定时开机关机,每次开机关机得时候都会发邮件告警,每次都需要值班人员提醒,为了处理这种无效告警,可以在zabbix中设置维护 zabbix中的维护---维护期间:用来设 ...

  9. Zabbix 3.4.7调整监控阈值以及告警级别

    1.找到需要监控的主机:右上角进行搜索 我们要更改sepm02p的阈值和级别: 进行更改级别:先点击Triggers , 选中要更改的监控项,例如我要更改CPU,点击以下红色标出的,千万不要选择Tem ...

  10. STM32 FSMC使用笔记

    最近在使用STM32的FSMC与FPGA做并行通信总线控制,做一下总结 1,利用FSMC读取写入16位数据时的封装函数如下,不这样使用的话在与FPGA进行通信的过程中可能会出现不可预知的错误. #de ...