Django内容增加富文本功能的实例


Posted in Python onOctober 17, 2017

缺少富文本,形式过于单一,不便于浏览与阅读。

一种可行的方法记录如下:

1-下载第三方富文本KindEditor,连接http://kindeditor.net/down.php或者baidu。

2-解压到Django项目下的static/js下,如图所示:

Django内容增加富文本功能的实例

默认没有config.js,需要自行建立config.js,其中内容可参照KindEditor官网或以下代码:

KindEditor.ready(function(K) {
    K.create('textarea',{
     width:700,
     height:200,
    });
  });

#注意textarea的参照,width,height分别对文本框宽度、高度设置

Django内容增加富文本功能的实例

3-在你的admin.py中,需要增加富文本的类别代码形式如下:

class ArticleAdmin(admin.ModelAdmin):
  class Media:
   js={
    '/static/js/kindeditor/lang/zh-CN.js',
    '/static/js/kindeditor/kindeditor-all-min.js',
    '/static/js/kindeditor/config.js',
   }
 
 
admin.site.register(Article, ArticleAdmin)

4-至此,刷新后就可以看到内容区增加了富文本编辑功能了,如果没有需要对照上述步骤仔细检查下,不熟练的情况下copy代码不要修改

5-最后我这边遇到了一个小坑,增加了格式的页面在浏览时显示了html语法,需要关闭html转义,

方法是在模板中修改:

将{{ article.content }}修改为

{{ article.content|safe }},另一种方法是:

{% autoescape off %}

{{ article.content }}
{% endautoescape %}

Django内容增加富文本功能的实例

修改后:

Django内容增加富文本功能的实例

6-文件上传还需要设置路径及相关配置,这个下一个记录当中说明。

以上这篇Django内容增加富文本功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python程序设计入门(5)类的使用简介
Jun 16 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
Apr 08 Python
解读Python中degrees()方法的使用
May 18 Python
分享Python开发中要注意的十个小贴士
Aug 30 Python
python fabric实现远程部署
Jan 05 Python
带你了解python装饰器
Jun 15 Python
Python实现基于POS算法的区块链
Aug 07 Python
PHP统计代码行数的小代码
Sep 19 Python
使用Tkinter制作信息提示框
Feb 18 Python
PyInstaller运行原理及常用操作详解
Jun 13 Python
python 求两个向量的顺时针夹角操作
Mar 04 Python
学会用Python实现滑雪小游戏,再也不用去北海道啦
May 20 Python
Python通过future处理并发问题
Oct 17 #Python
python3设计模式之简单工厂模式
Oct 17 #Python
基于Python和Scikit-Learn的机器学习探索
Oct 16 #Python
python版简单工厂模式
Oct 16 #Python
Python实现扩展内置类型的方法分析
Oct 16 #Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
Oct 16 #Python
python利用paramiko连接远程服务器执行命令的方法
Oct 16 #Python
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Tornado高并发处理方法实例代码
2018/01/15 Python
python中的随机函数小结
2018/01/27 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python logging日志模块原理及操作解析
2019/10/12 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
keras中的backend.clip用法
2020/05/22 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
毕业生求职推荐信
2013/11/04 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
十佳党员事迹材料
2014/08/28 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python