Django 2 1 7 使用富文本編輯器 tinymce

時間 2019-11-22

原文原文鏈接

富文本編輯器

藉助富文本編輯器，網站的編輯人員可以像使用offfice同樣編寫出漂亮的、所見即所得的頁面。此處以tinymce爲例，其它富文本編輯器的使用也是相似的。html

在虛擬環境中安裝包。java

pip3 install django-tinymce
複製代碼

安裝完成後，能夠使用在Admin管理中，也能夠自定義表單使用。python

安裝tinymce應用

1）在項目/settings.py中爲INSTALLED_APPS添加編輯器應用。mysql

INSTALLED_APPS = (
    'tinymce', # 富文本編輯器
    ....
)
複製代碼

2）在項目/settings.py中添加編輯器配置。sql

# 富文本編輯器配置
TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'width': 600,
    'height': 400,
}
複製代碼

3）在項目/urls.py中配置編輯器url。數據庫

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('tinymce/', include('tinymce.urls')), # 導入tinymce應用的urls.py
    ....
]
複製代碼

到這裏已經配置好了tinymce庫的註冊使用了，下面在Admin後臺使用。django

在Admin中使用富文本編輯器

1）在assetinfo/models.py中，定義模型的屬性爲HTMLField()類型。瀏覽器

from django.db import models
from tinymce.models import HTMLField

class GoodsInfo(models.Model):
    goods_name = models.CharField(verbose_name="商品名稱",max_length=50, default=None, db_column='goods_name')  # 商品名稱
    gcontent=HTMLField(verbose_name="商品詳情") # 設置富文本字段

    class Meta:
        verbose_name = '商品信息'
        verbose_name_plural = verbose_name
複製代碼

2）執行遷移數據。bash

python3 manage.py makemigrations
python3 manage.py migrate
複製代碼

3）在mysql中查看生成的表結構

mysql> desc assetinfo_goodsinfo;
+------------+-------------+------+-----+---------+----------------+
| Field      | Type        | Null | Key | Default | Extra          |
+------------+-------------+------+-----+---------+----------------+
| id         | int(11)     | NO   | PRI | NULL    | auto_increment |
| gcontent   | longtext    | NO   |     | NULL    |                |
| goods_name | varchar(50) | NO   |     | NULL    |                |
+------------+-------------+------+-----+---------+----------------+
3 rows in set (0.00 sec)

mysql> 
複製代碼

能夠看到生成的字段類型就是長文本類型。

4）在assetinfo/admin.py中註冊模型類GoodsInfo

from django.contrib import admin
from .models import *

@admin.register(GoodsInfo)
class GoodsInfoAdmin(admin.ModelAdmin):
    list_display = ['id','gcontent','goods_name']
複製代碼

5）運行服務器，進入admin後臺管理，點擊GoodsInfo的添加，效果以下圖

訪問：http://127.0.0.1:8000/admin/

保存以後，以下：

6）返回mysql查看一下保存的數據

mysql> select * from assetinfo_goodsinfo;
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
| id | gcontent                                                                                                                                                                       | goods_name |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
|  1 | <h1><strong>商品詳情：</strong></h1>
<ol>
<li><strong><strong><strong>詳情內容1</strong></strong></strong><hr /></li>
<li><em>詳情內容2</em><hr /></li>
</ol>              | 商品1      |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
1 row in set (0.00 sec)

mysql> 
複製代碼

自定義使用富文本編輯器

1）在assetinfo/views.py中定義類視圖Editor，用於顯示編輯器。

from django.views.generic import View

class Editor(View):
    
    def get(self, request):
        return render(request, 'assetinfo/editor.html')
複製代碼

2）在assetinfo/urls.py中配置url。

from .views import *

urlpatterns = [
    # ex:/assetinfo/editor
    path('editor', Editor.as_view() , name='editor'),
]
複製代碼

4）打開python3環境的目錄，找到tinymce的目錄。

打開目錄以下：

5）拷貝tiny_mce_src.js文件、langs文件夾以及themes文件夾拷貝到項目目錄下的static/js/目錄下。

6）在項目/settings.py中配置靜態文件查找路徑。

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

7）在templates/assetinfo/目錄下建立editor.html模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義使用tinymce</title>
    <script type="text/javascript" src='/static/js/tiny_mce_src.js'></script>
    <script type="text/javascript">
        tinyMCE.init({
            'mode':'textareas',
            'theme':'advanced',
            'width':400,
            'height':100
        });
    </script>
</head>
<body>
    <form method="post" action="#">
        <textarea name='gcontent'>測試富文本編輯器</textarea>
    </form>
</body>
</html>
複製代碼

8）運行服務器，在瀏覽器中輸入以下網址：

http://127.0.0.1:8000/assetinfo/editor

顯示富文本編輯的內容

經過富文本編輯器產生的字符串是包含html的。在數據庫中查詢以下：

mysql> select * from assetinfo_goodsinfo;
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
| id | gcontent                                                                                                                                                                       | goods_name |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
|  1 | <h1><strong>商品詳情：</strong></h1>
<ol>
<li><strong><strong><strong>詳情內容1</strong></strong></strong><hr /></li>
<li><em>詳情內容2</em><hr /></li>
</ol>              | 商品1      |
+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+
1 row in set (0.00 sec)

mysql> 
複製代碼

在模板中顯示字符串時，默認會進行html轉義，若是想正常顯示須要關閉轉義。

問：在模板中怎麼關閉轉義

能夠參考Django 2.1.7 模板 - HTML轉義

方式一：過濾器safe
方式二：標籤autoescape off

1）在assetinfo/views.py中定義類視圖Show，用於顯示富文本編輯器的內容。

from assetinfo.models import GoodsInfo

class Show(View):

    def get(self, request):
        goods = GoodsInfo.objects.get(pk=1)
        context = {'g': goods}
        return render(request,'assetinfo/show.html', context)
複製代碼

2）在assetinfo/urls.py中配置url。

urlpatterns = [
    # ex:/assetinfo/show
    path('show', Show.as_view() , name='show'),
]
複製代碼

3）在templates/assetinfo/目錄下建立show.html模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展現富文本編輯器內容</title>
</head>
<body>
    顯示查詢的id號：
    id:{{g.id}} <br>
    
    <hr>
    
    使用autoescape關閉轉義：<br>
    {%autoescape off%}
    {{g.gcontent}}
    {%endautoescape%}
    
    <hr>
    
    使用safe過濾器，關閉轉義：<br>
    {{g.gcontent|safe}}
</body>
</html>
複製代碼

4）運行服務器，在瀏覽器中輸入以下網址： http://127.0.0.1:8000/assetinfo/show