Django 之富文本編輯器-tinymce

時間 2019-11-19

原文原文鏈接

這裏的富文本編輯器以 tinymce 爲例。javascript

環境：ubuntu 16.04 + django 1.10 + python 2.7html

ubuntu安裝tinymce：java

python 2.7python

$ sudo pip install django-tinymce

python 3django

$ sudo pip3 install django-tinymce

1. settings.py

INSTALLED_APPS 中添加：ubuntu

 1 INSTALLED_APPS = [
 2     'django.contrib.admin',
 3     'django.contrib.auth',
 4     'django.contrib.contenttypes',
 5     'django.contrib.sessions',
 6     'django.contrib.messages',
 7     'django.contrib.staticfiles',
 8     'book.apps.BookConfig',    # 個人app
 9     'tinymce'    # 添加此行
10 ]

2. urls.py

在最外層的 urls.py 中添加下面代碼，必定不要添加到各自應用 apps 下的 urls.py（若是有的話）中：session

1 from django.conf.urls import url, include
2 from django.contrib import admin
3 
4 urlpatterns = [
5     url(r'^admin/', admin.site.urls),
6     url(r'^tinymce/', include('tinymce.urls')), # 添加此行 7 ]

3. models.py

這裏爲了舉例，只寫了一個字段。app

1 # coding:utf-8
2 from django.db import models
3 
4 from tinymce.models import HTMLField
5 
6 class Content(models.Model):
7     content = HTMLField()

改完 models.py 後，記得作遷移編輯器

$ python manage.py makemigrations
$ python manage.py migrate

4. 應用

在 admin 中應用

1) 在 settings.py 文件最後添加：post

1 TINYMCE_DEFAULT_CONFIG = {
2     'theme': 'advanced',
3     'width': 600,
4     'height': 400
5 }

注：這裏的 width 和 height 只能控制在 admin 中的大小，不能控制在視圖中的大小。

2）admin.py 中添加新定義的 models

1 # coding:utf-8
2 from django.contrib import admin
3 
4 from models import Content
5 
6 admin.sit.register(Content)

3）建立超級管理員，啓動服務：

$ python manage.py createsuperuser     # 按提示輸入
$ python manage.py runserver

4）訪問 http://127.0.0.1/admin，點擊 Contents ，再點擊 add 就能夠看到下面界面：

在自定義模板中應用

1） views.py

 1 # coding:utf-8
 2 from django.shortcuts import render
 3 
 4 from models import Content
 5 
 6 def add(request):
 7     # 富文本編輯器練習
 8     return render(request, 'add.html')
 9 
10 def do_add(request):
11     hcontent = request.POST.get('hcontent')
12     content = Content()
13     content.content = hcontent
14     content.save()
15     return render(request, 'show.html', {'html':hcontent})

2）urls.py

若是有本身的app，寫在本身的app下的urls.py中。若是沒有，能夠寫到最外層的urls.py中。

個人寫在最外層的urls.py中。

 1 # coding:utf-8
 2 from django.conf.urls import url
 3 
 4 import views
 5 
 6 urlpatterns = [
 7     url(r'^tinymce/', include('tinymce.urls')),
 8     url(r'^add/$', views.add),
 9     url(r'do_add/$', views.do_add)
10     ]

3）html

總共要添加兩個html，add.html 和 show.html

兩個 html 存放到 settings.py 中 TEMPLATES 的 DIRS 目錄下。

add.html

 1 {% load static from staticfiles %}  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  3 "http://www.w3.org/TR/html4/loose.dtd">  4 <html>  5 <head>  6 <title>富文本編輯器練習</title>  7 <script type="text/javascript" src="{% static 'tiny_mce/tiny_mce.js' %}"></script>  8 <!-- 也能夠寫成 <script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script> -->  9 <script type="text/javascript"> 10  tinyMCE.init({ 11 'mode': 'textareas', // 將全部的textare變爲編輯器 12 'theme': 'advanced', 13 'width': 400, 14 'height': 100 15  }); 16 </script> 17 </head> 18 <body> 19 <form method="post" action="/do_add"> 20  {% csrf_token %} 21  內容： 22 <textarea name="hcontent">請填入內容</textarea> 23 <input type="submit" value="提交" /> 24 </form> 25 </body> 26 </html>

注：關於第7行，不須要static目錄下有 tiny_mce.js 文件，django會本身去安裝目錄下尋找。

關於static的配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]

show.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4     <head>
 5         <title>富文本編輯器練習</title>
 6     </head>
 7     <body>
 8         {{ html|safe }} <!-- 這裏注意和 {{ html }} 的區別 -->
 9     </body>
10 </html>