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批量修改文件后缀示例代码分享
Dec 24 Python
Python做文本按行去重的实现方法
Oct 19 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
Feb 26 Python
Django项目中model的数据处理以及页面交互方法
May 30 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
May 27 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
Aug 20 Python
python通过链接抓取网站详解
Nov 20 Python
python实现对变位词的判断方法
Apr 05 Python
Python selenium自动化测试模型图解
Apr 15 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
Apr 26 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
Feb 01 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
Apr 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
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP 断点续传实例详解
2017/11/11 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python做简单的字符串匹配详解
2017/03/21 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python实现飞机大战
2018/09/11 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python 代码运行时间获取方式详解
2020/09/18 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
写自荐信要注意什么
2013/12/26 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
高二化学教学反思
2014/01/30 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
月考总结与反思
2015/10/22 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js