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制作CSDN免积分下载器
Mar 10 Python
Python Socket实现简单TCP Server/client功能示例
Aug 05 Python
matplotlib绘图实例演示标记路径
Jan 23 Python
解决Tensorflow安装成功,但在导入时报错的问题
Jun 13 Python
浅谈python的深浅拷贝以及fromkeys的用法
Mar 08 Python
Django项目使用CircleCI的方法示例
Jul 14 Python
Python循环实现n的全排列功能
Sep 16 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
Mar 10 Python
python为什么要安装到c盘
Jul 20 Python
python实现代码审查自动回复消息
Feb 01 Python
python之np.argmax()及对axis=0或者1的理解
Jun 02 Python
Python turtle编写简单的球类小游戏
Mar 31 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
php分页函数
2006/07/08 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
js实现微信聊天界面
2020/08/09 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
教师旷工检讨书
2014/01/18 职场文书
疾病防治方案
2014/05/31 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js