46. Django 2.1.7 使用富文本编辑器 tinymce

富文本编辑器

借助富文本编辑器，网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例，其它富文本编辑器的使用也是类似的。

在虚拟环境中安装包。

pip3 install django-tinymce

安装完成后，可以使用在Admin管理中，也可以自定义表单使用。

安装tinymce应用

1）在项目/settings.py中为INSTALLED_APPS添加编辑器应用。

INSTALLED_APPS = ( 'tinymce', # 富文本编辑器 ....)

2）在项目/settings.py中添加编辑器配置。

# 富文本编辑器配置TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced', 'width': 600, 'height': 400,}

3）在项目/urls.py中配置编辑器url。

from django.contrib import adminfrom django.urls import include, pathurlpatterns = [ path('tinymce/', include('tinymce.urls')), # 导入tinymce应用的urls.py ....]

到这里已经配置好了tinymce库的注册使用了，下面在Admin后台使用。

在Admin中使用富文本编辑器

1）在assetinfo/models.py中，定义模型的属性为HTMLField()类型。

from django.db import modelsfrom tinymce.models import HTMLFieldclass 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）执行迁移数据。

python3 manage.py makemigrationspython3 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 adminfrom .models import *@admin.register(GoodsInfo)class GoodsInfoAdmin(admin.ModelAdmin): list_display = ['id','gcontent','goods_name']

访问：select * from assetinfo_goodsinfo;+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+| id | gcontent | goods_name |+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+| 1 |

商品详情：

1. 详情内容1

   ---

2. 详情内容2

   ---

| 商品1 |+----+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+------------+1 row in set (0.00 sec)mysql>

自定义使用富文本编辑器

1）在assetinfo/views.py中定义类视图Editor，用于显示编辑器。

from django.views.generic import Viewclass 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'),]

3）在项目目录下创建静态文件目录如下图：

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模板。