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抓取百度首页的方法
May 19 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
Feb 18 Python
Python django实现简单的邮件系统发送邮件功能
Jul 14 Python
python对DICOM图像的读取方法详解
Jul 17 Python
Python操作csv文件实例详解
Jul 31 Python
Python程序员面试题 你必须提前准备!
Jan 16 Python
python3+mysql查询数据并通过邮件群发excel附件
Feb 24 Python
详解Python下载图片并保存本地的两种方式
May 15 Python
python分数表示方式和写法
Jun 26 Python
pytorch标签转onehot形式实例
Jan 02 Python
基于python实现坦克大战游戏
Oct 27 Python
详解Open Folder as PyCharm Project怎么添加的方法
Dec 29 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
农民C键的运用技巧
2020/03/04 星际争霸
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
python实用代码片段收集贴
2015/06/03 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python实时监控cpu小工具
2018/06/21 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
django云端留言板实例详解
2019/07/22 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python加速程序运行的方法
2020/07/29 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
俄语专业毕业生推荐信
2013/10/28 职场文书
中医专业应届生求职信
2013/11/17 职场文书
社区中秋节活动方案
2014/01/29 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
青年文明号创建承诺
2014/03/31 职场文书
无偿献血倡议书
2014/04/14 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python