Django中富文本编辑器KindEditor的使用和图片上传
1.简介
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用
2.主要特点
- 快速:体积小,加载速度快
- 开源:开放源代码,高水平,高品质
- 底层:内置自定义 DOM 类库,精确操作 DOM
- 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能
- 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件
- 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera
3.使用
3.1下载路径: http://kindeditor.net/down.php
下载后根据需求删除以下目录。
- asp - ASP程序
- asp.net - ASP.NET程序
- php - PHP程序
- jsp - JSP程序
- examples - 演示文件
3.2将文件夹拷贝到项目根目录的/static/文件夹中:
3.3在kineeditor目录下创建conifg.js配置文件
#config.js KindEditor.ready(function(K) { // K.create('textarea[name=content]', { K.create('#id_content', { width: '800px', height: '500px', }); });
注释: 这里的#id_content,或是name=content,是通过登录admin后,右击对应控件,选择审查元素获得的。
3.4在admin.py对应的管理类中添加class Media,引入js文件。
from .models import Article class ArticleAdmin(admin.ModelAdmin): list_display = ['title'] class Media: js = ('/static/js/kindeditor-4.1.10/kindeditor-all-min.js', '/static/js/kindeditor-4.1.10/lang/zh-CN.js', '/static/js/kindeditor-4.1.10/config.js') admin.site.register(Article,ArticleAdmin)
https://www.cnblogs.com/yangshl/p/6505308.html