文档章节

在Django项目中使用富文本编辑器

Kinegratii
 Kinegratii
发布于 2014/08/31 00:14
字数 714
阅读 5055
收藏 10

1 开发要点

现在网上有很多的富文本编辑器,包括Markdown、tinymce、UEditor、KindEditor、ckeditor等等。在项目中使用这些编辑器主要有以下几个问题:

编辑页面

  • 在HTML页面渲染编辑器;

  • 定制编辑器的功能,比如有哪些文本样式、图片上传、代码插入;

  • 定制编辑器的样式,指的是编辑器整体的样式,比如高度、宽度、显示位置等等;

  • 预览内容;

  • 获取内容;

显示页面

  • 显示内容;

2 Django APP

下表列出一些常用的APP,它们都可以在GitHub上找的到,链接见下文。

APP django-ckeditor django-tinymce django-markdown-denx django-wmd-editor
编辑器 ckeditor tinymce markdown markdown
models.Field fields.RichTextField HTMLField N
models.MarkDownField
forms.Field fields.RichTextFormField N N N
widget widgets.CKEditorWiget

wigets.TinyMEC

widgets.AdminTinyMEC

N

widgets.MarkDownInput

wigets.AdminMarkDownInput

tempatetags N tinymce_tags markdown_denx_tags N
static/media Y Y Y Y
settings __init__ settings conf.settings __init__
备注 图片处理 文件处理

(Y表示有这项功能,N表示没有这项功能)

上述表格列出了每个模块各个APP所提供的功能:

  • 后两个APP一个是编辑器,一个是显示内容的,需要结合使用

  • tinymce提供了最多的功能。

  • forms.Field可以由models.Field + widget实现。

3 基本入门

虽然使用的编辑器不同,但入门还是有通用步骤的。

3.1 安装APP

使用pip命令安装:pip install your-app-name

3.2 配置项目

在INSTALL_APPS加入app

运行python manage.py collectstaticfiles或者直接把静态文件复制到项目的static目录下

3.3 渲染编辑器

Model层

在需要编辑器的models.TextField字段直接替换为对应的*models.Field*

Form层

有提供forms.Field的可以直接使用,如CK可直接使用fields.RichTextFormField;

content = forms.RichTextFormField(label='内容')

否则使用指定widget的方式。

content = forms.TextField(label='内容', widget=wigets.TinyMEC)

template层

加载css/js文件,直接使用script或则link标签(前提是要知道都加载了哪些文件),或者使用下面变量赋值的方法,它展开之后就是一串的script和link标签

<head>
  {{ form.media }}
</head>

3.4 显示内容

通过模板过滤器来显示,即

Tinymce

{% load tinymce_tags %}

{{ content| tinymce_preview }}

markdown

{% load markdown_deux_tags %}
{{ content|markdown }}

4 高级自定义

4.1 自定义编辑器样式功能

在widget构造函数传入的attrs参数,attrs是一个表示HTML元素属性-值的字典。参考Django文档。

class DemoForm(forms.Form):
    content = forms.CharField(widget=widgets.TinyMCE(attrs={'width':'500px', 'height':'200px'}))

4.2 其他设置

这部分因各个APP而不同,主要在项目settings模块设置,不过它们都有默认值,具体可参考官方文档。

5 参考资料

本文根据以下开源项目整理

shaunsephton/django-ckeditor &middot; GitHub

https://github.com/shaunsephton/django-ckeditor

aljosa/django-tinymce &middot; GitHub

https://github.com/aljosa/django-tinymce

jpartogi/django-wmd-editor &middot; GitHub

https://github.com/jpartogi/django-wmd-editor

trentm/django-markdown-deux &middot; GitHub

https://github.com/trentm/django-markdown-deux


© 著作权归作者所有

共有 人打赏支持
Kinegratii

Kinegratii

粉丝 26
博文 11
码字总数 11517
作品 2
福州
后端工程师
私信 提问
django template html 转义研究

微信公众平台项目研发中遇到html文本标签被转义的问题,上一遍中《django-ckeditor 使用》原以为是django adminsite中文本框的问题,于是引入了富文本编辑器ckeditor。不过今天继续测试时,仍...

chunfengR
2014/12/25
0
5
我的网站搭建 (第六天) Ckeditor编辑器

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,...

代码打碟手
08/27
0
0
django-ckeditor 使用

昨天在完成微信项目,想通过微信公众号发布通知。然而把通知粘贴到adminsite中后发现所有html标签都被转译了,一堆文字落在一起甚是难看。于是不得不好好使用富文本编辑器。 一、源 pip inst...

chunfengR
2014/12/23
0
0
Django轻松使用富文本编辑器-KindEditor

Django轻松使用富文本编辑器-KindEditor 由于需要在django admin中使用到富文本编辑器,由于我比较喜欢KindEditor,于是写了个自定义widget 1、首先从KindEditor主页下载,并解压至你的stati...

KavenSu
2014/06/04
0
1
DjangoX v0.4.0 发布, Django 强大灵活后台系统

DjangoX v0.4.0 发布了,DjangoX 是一个强大灵活的 Django 数据管理和配置后台系统,依托于实际项目和生产环境互联网产品的总结积累,继承和扩展 Xadmin,DjangoX 努力做 Django 框架的优秀实...

Jone.x
2017/08/24
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 哥们之间报恩的想法被上帝实现了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 小小编辑:推荐歌曲《消愁》 《消愁》- 毛不易 手机党少年们想听歌,请使劲儿戳(这里) @过遥 :周一的早上就应该用来补觉,太困了 周末不想...

小小编辑
59分钟前
195
7
MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
今天
3
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
7
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
22
1
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部