Django-TinyMCE 富文本编辑器安装与配置指南

Django-TinyMCE 富文本编辑器安装与配置指南

【免费下载链接】django-tinymce TinyMCE integration for Django 项目地址: https://gitcode.com/gh_mirrors/dj/django-tinymce

前言

Django-TinyMCE 是一个将 TinyMCE 富文本编辑器集成到 Django 项目中的应用程序。TinyMCE 是一个功能强大且灵活的 WYSIWYG（所见即所得）编辑器，广泛应用于内容管理系统和博客平台。本文将详细介绍如何在 Django 项目中安装和配置 django-tinymce。

系统要求

在开始安装前，请确保您的环境满足以下要求：

1. 已安装兼容的 Django 版本
2. Python 3.6 或更高版本
3. 可选：如果需要在编辑器中使用文件浏览器功能，可以安装 django-filebrowser 应用

注意术语区分：

• TinyMCE：指编辑器本身
• django-tinymce：指这个 Django 应用程序

安装步骤

1. 安装 django-tinymce 包

使用 pip 工具从 Python 包索引安装：

pip install django-tinymce

如果您有其他安装需求，也可以手动将 tinymce 模块放置在 Python 路径中。

2. 配置 Django 项目

在项目的 settings.py 文件中，将 'tinymce' 添加到 INSTALLED_APPS 列表中：

INSTALLED_APPS = [
    # 其他应用...
    'tinymce',
]

3. 配置 URL 路由

在项目的 urls.py 文件中，添加 TinyMCE 的 URL 配置：

from django.urls import path, include

urlpatterns = [
    # 其他 URL 模式...
    path('tinymce/', include('tinymce.urls')),
]

验证安装

为了确保安装正确，可以按照以下步骤进行测试：

1. 创建并激活虚拟环境（推荐）：

   python -m venv env
   source env/bin/activate  # Linux/macOS
   # 或 env\Scripts\activate  # Windows
   

2. 安装依赖：

   pip install Django django-tinymce
   

3. 创建测试项目：

   django-admin startproject tinymce_test
   cd tinymce_test
   

4. 初始化数据库：

   python manage.py migrate
   

5. 创建管理员账户：

   python manage.py createsuperuser
   

6. 运行开发服务器：

   python manage.py runserver
   

7. 访问管理界面中的测试页面，如果看到 TinyMCE 编辑器而非普通文本区域，则说明安装成功。

详细配置

django-tinymce 提供了多种配置选项，可以通过修改项目的 settings.py 文件来自定义编辑器行为。

基本配置项

1. TINYMCE_JS_URL
   指定 TinyMCE JavaScript 文件的 URL，默认为：

   settings.STATIC_URL + 'tinymce/tinymce.min.js'
   

   自定义示例：

   TINYMCE_JS_URL = os.path.join(STATIC_URL, "custom/path/tinymce.min.js")
   

2. TINYMCE_DEFAULT_CONFIG
   设置 TinyMCE 的默认配置，完整的配置选项可参考 TinyMCE 官方文档。默认配置如下：

   {
       "theme": "silver",
       "height": 500,
       "menubar": False,
       "plugins": "advlist,autolink,lists,link,image,charmap,preview,anchor,"
       "searchreplace,visualblocks,code,fullscreen,insertdatetime,media,table,"
       "code,help,wordcount",
       "toolbar": "undo redo | blocks | "
       "bold italic backcolor | alignleft aligncenter "
       "alignright alignjustify | bullist numlist outdent indent | "
       "removeformat | help",
   }
   

   重要提示：language 属性仅用于强制 TinyMCE 使用与 Django 当前活动语言不同的语言。

3. TINYMCE_COMPRESSOR
   是否使用 TinyMCE 压缩器（默认为 False）。启用后会将所有 JavaScript 文件压缩为单个流，减少约 75% 的下载大小和请求数量，显著提高初始化速度。

4. TINYMCE_EXTRA_MEDIA
   指定要与编辑器一起加载的额外媒体文件（CSS 和 JS）。

5. TINYMCE_FILEBROWSER
   是否使用 django-filebrowser 作为媒体文件浏览器（默认自动检测是否安装了 filebrowser）。

完整配置示例

TINYMCE_JS_URL = 'http://cdn.example.com/tinymce/tiny_mce_src.js'
TINYMCE_DEFAULT_CONFIG = {
    "height": "320px",
    "width": "960px",
    "menubar": "file edit view insert format tools table help",
    "plugins": "advlist autolink lists link image charmap preview anchor searchreplace visualblocks code "
    "codesample emoticons fullscreen insertdatetime media table code help wordcount save directionality",
    "toolbar": "undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft "
    "aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor "
    "backcolor removeformat | pagebreak | charmap emoticons | "
    "fullscreen  preview save print | image media link anchor codesample | ltr rtl | code",
    "custom_undo_redo_levels": 10,
    "language": "es",  # 强制使用西班牙语
    "browser_spellcheck": True,
}
TINYMCE_COMPRESSOR = True
TINYMCE_EXTRA_MEDIA = {
    'css': {
        'all': [
            'css/custom-editor-styles.css',
        ],
    },
    'js': [
        'js/custom-editor-plugins.js',
    ],
}

结语

通过本文的指导，您应该已经成功在 Django 项目中集成了 TinyMCE 富文本编辑器。django-tinymce 提供了丰富的配置选项，您可以根据项目需求调整编辑器的外观和功能。如需进一步了解 TinyMCE 的高级功能，建议参考官方文档获取更多配置选项和使用技巧。

【免费下载链接】django-tinymce TinyMCE integration for Django 项目地址: https://gitcode.com/gh_mirrors/dj/django-tinymce