码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-31 08:09:41      阅读:457      评论:0      收藏:0      [点我收藏+]

标签:style   http   os   使用   ar   for   文件   art   问题   

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层:CK可直接使用fields.RichTextFormField或者form.TextField(widget=*widget*)

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 · GitHub

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

aljosa/django-tinymce · GitHub

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

jpartogi/django-wmd-editor · GitHub

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

trentm/django-markdown-deux · GitHub

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


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

标签:style   http   os   使用   ar   for   文件   art   问题   

原文地址:http://my.oschina.net/kinegratii/blog/308408

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!