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正则表达式 findall函数问题详解
Mar 22 Python
Python聊天室程序(基础版)
Apr 01 Python
利用Python求阴影部分的面积实例代码
Dec 05 Python
python3转换code128条形码的方法
Apr 17 Python
Python内置random模块生成随机数的方法
May 31 Python
python aiohttp的使用详解
Jun 20 Python
django的model操作汇整详解
Jul 26 Python
Python根据服务获取端口号的方法
Sep 25 Python
Python中断多重循环的思路总结
Oct 04 Python
Python之Class&Object用法详解
Dec 25 Python
解决pycharm安装第三方库失败的问题
May 09 Python
pyqt5实现井字棋的示例代码
Dec 07 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
关于时间计算的结总
2006/12/06 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
js 数组操作代码集锦
2009/04/28 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
校班主任推荐信范文
2013/12/03 职场文书
眼镜促销方案
2014/03/15 职场文书
班干部演讲稿
2014/04/24 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server