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的爬虫程序编写框架Scrapy入门学习教程
Jul 02 Python
Python进阶-函数默认参数(详解)
May 18 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
Nov 29 Python
浅谈Python中重载isinstance继承关系的问题
May 04 Python
Django中提供的6种缓存方式详解
Aug 05 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
Aug 18 Python
在Python3 numpy中mean和average的区别详解
Aug 24 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
Dec 11 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
Feb 11 Python
Python单元测试及unittest框架用法实例解析
Jul 09 Python
python用Configobj模块读取配置文件
Sep 26 Python
使用Python获取字典键对应值的方法
Apr 26 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个人网站架设连环讲(四)
2006/10/09 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
人工神经网络算法知识点总结
2019/06/11 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python线程信号量semaphore使用解析
2019/11/30 Python
幼儿园优秀教师事迹
2014/02/13 职场文书
自行车广告词大全
2014/03/21 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
教师党员个人总结
2015/02/10 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技