在Django項目中使用富文本編輯器

時間 2019-11-13

標籤 django 項目使用文本編輯器欄目 Python 简体版

原文原文鏈接

1 開發要點

如今網上有不少的富文本編輯器，包括Markdown、tinymce、UEditor、KindEditor、ckeditor等等。在項目中使用這些編輯器主要有如下幾個問題：
css

編輯頁面html

在HTML頁面渲染編輯器；python
定製編輯器的功能，好比有哪些文本樣式、圖片上傳、代碼插入；git
定製編輯器的樣式，指的是編輯器總體的樣式，好比高度、寬度、顯示位置等等；github
預覽內容；django
獲取內容；markdown

顯示頁面app

顯示內容；編輯器

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。