一.简介

django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便。遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件。常见的富文本编辑器有ckeditor,ueditor,kindeditor,tinmce...

      KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
二. django-admin中添加富文本编辑器的几种方式
  • 使用第三方库,如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的更多相关文章

  1. 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 ...

  2. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  3. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  4. python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  5. 给Django后台富文本编辑器添加上传文件的功能

    使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...

  6. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  7. Django之富文本编辑器

    1.在虚拟环境中安装包. pip install django-tinymce==2.6.0 2.在配置文件中INSTALLED_APPS注册 3.配置富文本编辑器的宽高 4.配置编辑器url.

  8. JAVAEE——宜立方商城04:图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成

    1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...

  9. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

随机推荐

  1. 【题解】Atcoder ARC#96 F-Sweet Alchemy

    首先,我们发现每一个节点所选择的次数不好直接算,因为要求一个节点被选择的次数大于等于父亲被选择的次数,且又要小于等于父亲被选择的次数 \(+D\).既然如此,考虑一棵差分的树,规定每一个节点被选择的次 ...

  2. 【AGC005F】简单的问题 Many Easy Problems

    Description 链接 Solution 对于每个\(k\),统计任选\(k\)个点作为关键点的"最小生成树"的大小之和 正向想法是枚举或者计算大小为\(x\).叶子数目为\ ...

  3. 洛谷 P1076 寻宝 解题报告

    P1076 寻宝 题目描述 传说很遥远的藏宝楼顶层藏着诱人的宝藏.小明历尽千辛万苦终于找到传说中的这个藏宝楼,藏宝楼的门口竖着一个木板,上面写有几个大字:寻宝说明书.说明书的内容如下: 藏宝楼共有\( ...

  4. tf 常用函数 28原则

    一个tensorflow图由以下几部分组成: 占位符变量(Placeholder)用来改变图的输入. 模型变量(Model)将会被优化,使得模型表现得更好. 模型本质上就是一些数学函数,它根据Plac ...

  5. 强大log

    http://lovelease.iteye.com/blog/1886907 import java.io.BufferedReader; import java.io.File; import j ...

  6. Luogu 1084 NOIP2012 疫情控制 (二分,贪心,倍增)

    Luogu 1084 NOIP2012 疫情控制 (二分,贪心,倍增) Description H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树, 1 号城市是首都, 也是 ...

  7. 【学习笔记 边分树】【uoj400】【CTSC2018】暴力写挂

    题目 描述 ​ 有两棵树\(T\)和\(T'\),节点个数都为\(n\),根节点都为\(1\)号节点; ​ 求两两点之间 $$ \begin{align} depth(x) + depth(y) - ...

  8. [NOI2009]二叉查找树

    题目大意: 给定一棵严格的treap,父亲节点的优先级必然小于儿子节点的.权值按照二叉树的定义,左儿子小于父亲小于右儿子. 深度从1开始定义,每个点除优先级.数值之外,还有一个访问频度. 访问频度所产 ...

  9. php 开启 opcache 之后 require、include 还会每次都重新加载文件吗?

    当前目录有以下两个文件 index.php <?php var_dump(require 'A.php'); A.php <?php return 123; 接着运行: php -S 0. ...

  10. 5G时代的到来,会给生活带来什么改变?

    本文首发于:风云社区. 据百度百科介绍,5G网络是第五代移动通信网络,其峰值理论传输速度可达每秒数十Gb,比4G网络的传输速度快数百倍.举例来说,整部超高画质电影可在1秒之内下载完成.   5G网络已 ...