正文
HTML编辑器 -- KindEditor
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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', {
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))
