Django 之富文本编辑器-tinymce

这里的富文本编辑器以 tinymce 为例。

环境：ubuntu 16.04 + django 1.10 + python 2.7

ubuntu安装tinymce：

python 2.7

$ sudo pip install django-tinymce

python 3

$ sudo pip3 install django-tinymce

1. settings.py

INSTALLED_APPS 中添加：

 INSTALLED_APPS = [

     'django.contrib.admin',

     'django.contrib.auth',

     'django.contrib.contenttypes',

     'django.contrib.sessions',

     'django.contrib.messages',

     'django.contrib.staticfiles',

     'book.apps.BookConfig',    # 我的app

     'tinymce'    # 添加此行

 ]

2. urls.py

在最外层的 urls.py 中添加下面代码，一定不要添加到各自应用 apps 下的 urls.py（如果有的话）中：

 from django.conf.urls import url, include

 from django.contrib import admin

 urlpatterns = [

     url(r'^admin/', admin.site.urls),

     url(r'^tinymce/', include('tinymce.urls')),    # 添加此行

 ]

3. models.py

这里为了举例，只写了一个字段。

 # coding:utf-8

 from django.db import models

 from tinymce.models import HTMLField

 class Content(models.Model):

     content = HTMLField()

改完 models.py 后，记得做迁移

$ python manage.py makemigrations

$ python manage.py migrate

4. 应用

在 admin 中应用

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

 TINYMCE_DEFAULT_CONFIG = {

     'theme': 'advanced',

     'width': 600,

     'height': 400

 }

注：这里的 width 和 height 只能控制在 admin 中的大小，不能控制在视图中的大小。

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

 # coding:utf-8

 from django.contrib import admin

 from models import Content

 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

 # coding:utf-8

 from django.shortcuts import render

 from models import Content

 def add(request):

     # 富文本编辑器练习

     return render(request, 'add.html')

 def do_add(request):

     hcontent = request.POST.get('hcontent')

     content = Content()

     content.content = hcontent

     content.save()

     return render(request, 'show.html', {'html':hcontent})

2）urls.py

如果有自己的app，写在自己的app下的urls.py中。如果没有，可以写到最外层的urls.py中。

我的写在最外层的urls.py中。

 # coding:utf-8

 from django.conf.urls import url

 import views

 urlpatterns = [

     url(r'^tinymce/', include('tinymce.urls')),

     url(r'^add/$', views.add),

     url(r'do_add/$', views.do_add)

     ]

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

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd">

 <html>

     <head>

         <title>富文本编辑器练习</title>

     </head>

     <body>

         {{ html|safe }} <!-- 这里注意和 {{ html }} 的区别 -->

     </body>

 </html>

4）启动服务并浏览：

访问：http://127.0.0.1/add，就可以看到下面的界面

点击提交后，看到如下页面：