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之从if开始语句的征程
Sep 14 Python
Python实现读取文件最后n行的方法
Feb 23 Python
Python验证文件是否可读写代码分享
Dec 11 Python
Python中Numpy包的安装与使用方法简明教程
Jul 03 Python
python实现汉诺塔算法
Mar 01 Python
python读取几个G的csv文件方法
Jan 07 Python
在python 不同时区之间的差值与转换方法
Jan 14 Python
给你一面国旗 教你用python画中国国旗
Sep 24 Python
Python ADF 单位根检验 如何查看结果的实现
Jun 03 Python
Python实现EM算法实例代码
Oct 04 Python
Python OpenCV 图像平移的实现示例
Jun 04 Python
python+opencv实现目标跟踪过程
Jun 21 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
Terran兵种介绍
2020/03/14 星际争霸
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
js微信分享实现代码
2020/10/11 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
token 机制和实现方式
2020/12/15 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python列表生成器迭代器实例解析
2019/12/19 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
计算机应届毕业生自荐信范文
2014/02/23 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
服务之星事迹材料
2014/05/03 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
留学推荐信范文
2014/05/10 职场文书
ktv好的活动方案
2014/08/17 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android