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
kindeditor HTML内的简单设置
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script src="js/axios.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/kindeditor/kindeditor-all-min.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <textarea id='content'>富文本</textarea> <button onclick="checkit()">提交评论</button> </body> <script> initKindEditor(); function initKindEditor() { var kind = KindEditor.create('#content', { '100%', // 文本框宽度(可以百分比或像素) height: '100px', // 文本框高度(只能像素) minWidth: 200, // 最小宽度（数字） minHeight: 400 , // 最小高度（数字） uploadJson:'/md_admin/imageupload', // 图片上传路由方法 items:['emoticons',] // 显示的功能单个功能后必须要加， }); } function checkit(){ alert($(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()) } </script> </html>
图片上传路由方法
from django.http import HttpResponse,HttpResponseRedirect #导入类视图 from settings import UPLOAD_ROOT import json import os #导包 #kindeditor上传方法 def imageupload(request): if request.method == 'POST': item = {} file = request.FILES.get('imgFile') f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb') item['message'] = '上传成功' item['url'] = 'http://localhost:8000/upload/'+ file.name item['error'] = 0 #写文件 遍历图片文件流 for chunk in file.chunks(): f.write(chunk) return HttpResponse(json.dumps(item,ensure_ascii=False),content_type='application/json')