记一次django引入tinymce富文本模块

坏境：

• ubuntu18.04
• django 2.2

1.安装django-tinymce

pip install django-tinymce

2.添加 tinymce 到settings.py中的 INSTALLED_APPS 中

NSTALLED_APPS = (
    ...
    'tinymce',
)

3. 静态文件目录配置

3.1 复制tinymce

找到我们安装的tinymce, 将整个文件复制到我们项目的根目录中，相当于一个app.
复制后目录层级如下：

3.2 settings.py配置

STATIC_URL = '/static/'
# 当执行python manage.py collectstatic时, 收集的静态文件放在该目录下.
STATIC_ROOT = os.path.join(BASE_DIR, 'all_static')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, 'tinymce/static/')]

4.使用实例

4.1 站点中配置

# -- coding: utf-8 --
from django.db import models
from django.contrib import admin
from tinymce.models import HTMLField


class BlogsPost(models.Model):
    title = models.CharField(max_length=150)
    body = HTMLField()

4.2 前端页面使用

4.2.1 配置tinymce样式

• 方法一
  打开tinymce文件，找到settings.py，打开，找到DEFAULT_CONFIG选项配置。

• 方法二
  修改工程的settings.py文件。最下面添加

TINYMCE_DEFAULT_CONFIG = {
    'theme':'advanced',
    'width':600,
    'height':400,
}

当然，你还可以摄自其他样式。

html中

<script src="{% static 'tiny_mce/tiny_mce.js' %}"></script>
 <script>
      tinyMCE.init({
          'mode':'textareas',
          'theme':'advanced',
          'width':800,
          'height':600,
      })
  </script>

这样，我们就把textareas元素改编成了具有富文本编辑功能的元素。