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 相关文章推荐
使用cx_freeze把python打包exe示例
Jan 24 Python
Python调用C/C++动态链接库的方法详解
Jul 22 Python
Python处理PDF及生成多层PDF实例代码
Apr 24 Python
Python基于回溯法子集树模板解决找零问题示例
Sep 11 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
Jul 26 Python
pthon贪吃蛇游戏详细代码
Jan 27 Python
pandas DataFrame 删除重复的行的实现方法
Jan 29 Python
python 将字符串完成特定的向右移动方法
Jun 11 Python
Python代码实现http/https代理服务器的脚本
Aug 12 Python
matplotlib绘制多个子图(subplot)的方法
Dec 03 Python
Python使用jpype模块调用jar包过程解析
Jul 29 Python
如何利用python 读取配置文件
Jan 06 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
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php实现短信发送代码
2015/07/05 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
javascript history对象详解
2017/02/09 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
在Django中创建动态视图的教程
2015/07/15 Python
python实现井字棋游戏
2020/03/30 Python
Python中属性和描述符的正确使用
2016/08/23 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
1000字打架检讨书
2014/11/03 职场文书
新郎新娘致辞
2015/07/31 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android