django-tinymce无法显示富文本编辑器，无法加载tiny_mce.js_tinymce 加载时 failed to load plugin url: [object obj-CSDN博客

本文链接：https://blog.csdn.net/fj_changing/article/details/117476783

问题

django-tinymce版本3.3.0，前端页面无法加载出富文本编辑器，浏览器控制台提示tiny_mce.js加载失败

网上的django-tinymce教程(他们的版本小于3)

pip install django-tinymce
在settings.py中INSTALLED_APPS中添加'tinymce'，前提是已添加应用，如'myApp'
在settings.py中添加

TINYMCE_DEFAULT_CONFIG={ # 富文本编辑器的配置，前端页面里没配置时使用这里的配置
    'theme':'advanced',
    'width':800,
    'height':515
}

在models.py中添加类

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

# Create your models here.


class MTE(models.Model): # 富文本编辑器Multi-function Text Editor的缩写
    content=HTMLField() # Django中没有专门用于富文本的字段类型，所以从tinymce.models中导入

    class Meta:
        db_table='FuWenBen'

python manage.py makemigrations
python manage.py migrate
写好路由和视图函数
新建模版文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本编辑器</title>
    <script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script><!--从本地扩展库中安装的django-tinymce中加载，引入TinyMCE脚本-->
    <script type="text/javascript"><!--上一行也是js代码，这里另写一个script标签是因为，上一行的script标签里引入了js文件，一旦有引入其他文件，则同一个标签内后面的代码不会执行，所以其他代码要另写一个script标签-->
        tinyMCE.init({
            'mode':'textareas',
            'theme':'advanced',
            'width':800,
            'height':515,
        })
    </script>
</head>
<body>
    <form action="/fuwenben/" method="post">
        {% csrf_token %}
        <p>标题：<input type="text" name="title" placeholder="请输入标题" maxlength="50" required></p>
        <textarea name="article"></textarea>
        <br />
        <input type="submit" value="发表">
    </form>
</body>
</html>

运行后富文本编辑器未加载出来，浏览器控制台提示tiny_mce.js加载失败，教程说src那里，那样写会从本地扩展库里加载文件，可实际我这没有加载。难道是settings.py中没设置静态文件夹？

STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')] # 设置静态文件的存放位置

加上这句也不行，而且它的路径也不是本地扩展库的路径。那我就不知道该怎么从本地扩展库里加载这个js了，官方文档里也没提(也可能提了但我没看懂)，但是可以从项目的静态文件夹加载。

解决方法

由于settings.py中默认就有STATIC_URL = '/static/'，所以我先不配置STATICFILES_DIRS试试

在项目的工程目录内新建static文件夹，它与manage.py在同一个文件夹内
进入django-tinymce的安装目录，我用了虚拟环境，我的在Lib\site-packages\tinymce
将Lib\site-packages\tinymce\static\tinymce文件夹复制到刚才新建的static文件夹内，复制完后是这样

将settings.py和模版文件中theme和mode处的advanced改为silver，不改的话浏览器控制台会提示找不到advanced主题对应的js文件，所有的主题文件在上图中的themes文件夹内，可以自行选择
修改模版文件中src的地址，改为

src="/static/tinymce/tinymce.min.js"

这个文件对应上图中的tinymce.min.js。因为flask里用的时候也是引用这个文件名，所以想到了它。flask用的时候我是从TinyMCE中文文档的网站上下载了社区版，解压后放入项目的静态文件夹内。中文文档中的一些配置参数，如语言，也适用于django-tinymce，有需要请自行查看。

然后我又试了在settings.py中加上STATICFILES_DIRS的配置，也能显示富文本编辑器，说明对它来说加不加都行。