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:

  1. {# 载入js库 #}
  2.     <script src='{% static "js/jquery-1.12.1.min.js" %}'></script>
  3.     <script src='{% static "js/kindeditor/kindeditor-all-min.js" %}'></script>
  4. </head>
  5. <body>
  6. <textarea id='content'>富文本</textarea>
  7.  
  8.     <script>
  9.  
  10.         initKindEditor();
  11.  
  12.         function initKindEditor() {
  13.             var kind = KindEditor.create('#content', {    //id选择器绑定
  14.                 width: '100%',       // 文本框宽度(可以百分比或像素)
  15.                 height: '300px',     // 文本框高度(只能像素)
  16.                 minWidth: 200,       // 最小宽度（数字）
  17.                 minHeight: 400      // 最小高度（数字）
  18.             });
  19.         }
  20. 　　</script>

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

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

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

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

后台文件上传代码：

  1. import os
  2. import time
  3. import json
  4. def file_manager(request):
  5.     dic = {}
  6.     root_path = 'E:/week_23_1/static'
  7.     static_root_path = '/static/'
  8.     request_path = request.GET.get('path')
  9.     if request_path:
  10.         abs_current_dir_path = os.path.join(root_path, request_path)
  11.         move_up_dir_path = os.path.dirname(request_path.rstrip('/'))
  12.         dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path
  13.  
  14.     else:
  15.         abs_current_dir_path = root_path
  16.         dic['moveup_dir_path'] = ''     #  上一级目录
  17.  
  18.     dic['current_dir_path'] = request_path  #current_dir_path 指当前的路径
  19.     dic['current_url'] = os.path.join(static_root_path, request_path)
  20.  
  21.     file_list = []            #文件目录
  22.     for item in os.listdir(abs_current_dir_path):         #listdir 就是把某一路径下的东西全部拿下来
  23.         abs_item_path = os.path.join(abs_current_dir_path, item)
  24.         a, exts = os.path.splitext(item)
  25.         is_dir = os.path.isdir(abs_item_path)
  26.         if is_dir:
  27.             temp = {
  28.                 'is_dir': True,   #是否是dir
  29.                 'has_file': True, #目录下面是否存在文件
  30.                 'filesize': 0,   #文件大小是多少
  31.                 'dir_path': '',  #当前的路径是在哪
  32.                 'is_photo': False,  #是否是图片
  33.                 'filetype': '',    #文件的类型是什么
  34.                 'filename': item,  #文件名是什么
  35.                 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) #文件创始时间是什么
  36.             }
  37.         else:
  38.             temp = {
  39.                 'is_dir': False,
  40.                 'has_file': False,
  41.                 'filesize': os.stat(abs_item_path).st_size,
  42.                 'dir_path': '',
  43.                 'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False,
  44.                 'filetype': exts.lower().strip('.'),
  45.                 'filename': item,
  46.                 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
  47.             }
  48.  
  49.         file_list.append(temp)
  50.     dic['file_list'] = file_list
  51.     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. linux下执行QT可执行文件报错

    老样子,不多BiBi,直接进入主题! 有时候在linux下编译好QT程序,用QTCreator运行没问题,打包移植到另一台机器上,用命令./XX执行就会报错:error while loading s ...

  2. ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes

    今天在MySQL 5.6版本的数据库中修改InnoDB表字段长度时遇到了"ERROR 1071 (42000): Specified key was too long; max key le ...

  3. selenium-启动浏览器（二）

    selenium下启动浏览器,有两种方法 以 chromedrvier.exe 为例 1. chromedrvier.exe 与 python 启动程序 python.exe 在同一个目录下则可直接使 ...

  4. Microsoft Excel行列限制简明列表

    Excel行列限制简明列表:数据出处+-----------------+-----------+--------------+---------------------+ | | Max. Rows ...

  5. sqlmap --tamper 绕过WAF脚本分类整理

    分类: https://blog.csdn.net/whatday/article/details/54774043 详细介绍: https://blog.csdn.net/qq_34444097/a ...

  6. .net 添加api不能访问的问题

    在一个.netmvc项目中,本身没有提供api后来想添加api就会出现问题.会发生添加的apicontrol不能访问的情况.这种情况一般是因为,global文件中,application_start( ...

  7. Spark的性能调优杂谈

    下面这些关于Spark的性能调优项,有的是来自官方的,有的是来自别的的工程师,有的则是我自己总结的. 基本概念和原则 <1>  每一台host上面可以并行N个worker,每一个worke ...

  8. Docker 镜像仓库

    仓库 仓库(Repository)是集中存放镜像的地方. 一个容易混淆的概念是注册服务器(Registry).实际上注册服务器是管理仓库的具体服务器,每个服务器上可以有多个仓库,而每个仓库下面有多个镜 ...

  9. PHP程序员从小白到高手，掌握这些技能少走弯路

    PHP程序员从小白到高手,掌握这些技能少走弯路 PHP究竟是不是最好的语言,一直以来是程序员最大的“争议”,但毋庸置疑的是,PHP绝对是最有前途和力量的变成语言,也是你入门最值得学习的语言. 作为老牌 ...

  10. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...