Django配置富文本编辑器kindeditor
一.简介
django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便。遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件。常见的富文本编辑器有ckeditor,ueditor,kindeditor,tinmce...
- 使用第三方库,如django-ckeditor
- 在admin中定义富文本编辑器的widget
- 通过定义ModelAdmin的媒体文件
本文采用第三方库的方法。
三.具体步骤
1.下载kindeditor
解压后,将文件夹放在 yourproject/static/js 目录下:D:\blog_project\static\js\kindeditor-4.1.10
kindeditor-4.1.10中提供了许多关于asp,jsp,php的demo,因为使用python,这些文件用不到可以删掉。
2.定义ModelAdmin的媒体文件
admin.py: class ArticleAdmin(admin.ModelAdmin):
list_display = ('title', 'desc', 'date_publish', 'category')
search_fields = ('click_count', 'tag')
class Media:
js = (
'/static/js/kindeditor-4.1.10/kindeditor-min.js',
'/static/js/kindeditor-4.1.10/lang/zh_CN.js',
'/static/js/kindeditor-4.1.10/config.js', # 配置文件,这个需要自己实现
) admin.site.register(content) # 注册models.py中定义的模型
admin.site.register(Article, ArticleAdmin)
目前还没有实现富文本,因为无法获知在何处实现此功能。需配置config.jsconfig.js文件,在需要显示编辑器的位置添加textarea输入框。
3.修改kindeditor的配置文件
在D:\blog_project\static\js\kindeditor-4.1.10下创建config.js文件,写入以下js代码:
KindEditor.ready(function(K) {
K.create('textarea[name=content]',{
width:'800px',
height:'200px',
});
});
注意 textarea[name=content] 没有这一句也无法显示,因为,解析网页源代码:指定文章内容对应的html代码为 id = "id_content",和name = "content"。所以用代码 textarea[name=content]来确定我i们需要利用富文本编辑的区域。
final:
Django配置富文本编辑器kindeditor的更多相关文章
- Django之富文本编辑器kindeditor 及上传
1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...
- 给Django后台富文本编辑器添加上传文件的功能
使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...
- 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传
富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...
- Django之富文本编辑器
1.在虚拟环境中安装包. pip install django-tinymce==2.6.0 2.在配置文件中INSTALLED_APPS注册 3.配置富文本编辑器的宽高 4.配置编辑器url.
- JAVAEE——宜立方商城04:图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成
1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...
- Django 之 富文本编辑器-tinymce
这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...
随机推荐
- 自学Linux Shell17.1-正则表达式
点击返回 自学Linux命令行与Shell脚本之路 17.1-正则表达式 1. 正则表达式概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“ ...
- pip常用命令、配置pip源
1.查找软件 # pip search Package 2.安装软件 # pip install Package # pip install -r requirements.txt 3.更新软件 # ...
- module 'scipy.misc' has no attribute 'toimage',python
anaconda环境下: 错误:python 命令行运行出错:module 'scipy.misc' has no attribute 'toimage' 解决:打开Anaconda prompt,输 ...
- Linux 常用命令——which, whereis, locate, find
转载请注明出处:http://blog.csdn.net/drecik__/article/details/8455399 1. which 查找使用命令所在的位置 2. whereis 搜索文件,跟 ...
- 百度地图BMapLib.InfoBox 手机兼容源码修改
InfoBox.prototype.initialize = function (map) { var me = this; var div = this._div = baidu.dom.creat ...
- tcp的4次挥手、三次握手
1. TCP短连接模拟一种TCP短连接的情况:1. client 向 server 发起连接请求2. server 接到请求,双⽅建⽴连接3. client 向 server 发送消息4. serve ...
- maveb安装与配置(win10)
转载:https://www.cnblogs.com/eagle6688/p/7838224.html 看了几篇博客,感觉这篇博客写的含金量最高了,因为我电脑的系统是win10的,所以配置有细微的差别 ...
- javascript 迭代与递归
<script type="text/javascript"> // //原生js // window.onload = function(){ // var btn ...
- Neo4j安装&入门&一些优缺点
本篇将介绍Neo4j的安装,入门,和自己使用了一段时间后发现的优点缺点,争取简洁和实用. 如果你是第一次接触Neo4j,并且之前也都没接触过类似的Graph Database的话,建议先浏览一下我之前 ...
- 25. Spring Boot与缓存 JSR-107、Spring缓存抽象
JSR107 Java Caching定义了5个核心接口,分别是CachingProvider, CacheManager, Cache, Entry和Expiry. CachingProvider ...