Django：在管理界面中使用 TinyMCE 4

Posted 2023-02-24

【中文标题】Django：在管理界面中使用 TinyMCE 4

【英文标题】：Django: Use TinyMCE 4 in admin interface

【发布时间】：2017-10-10 09:41:46

【问题描述】：

在尝试了各种方法让 TinyMCE 作为我在 Django 管理中的 html 内容的编辑器之后，我终于让它与本教程一起使用 - https://github.com/ITCase-django/django-tinymce-4。

但是，使用这种方法，我必须拥有 Django 1.9 和“Grappelli”管理皮肤，我宁愿避免使用。我试图删除它，但它也删除了 TinyMCE。

我也尝试使用来自django-tinymce 包的HTMLField()，但这种方式得到的编辑器非常粗糙，只有少数选项（粗体、斜体、列表等等）。

是否有任何“最佳实践”来使用成熟的 TinyMCE 4 管理 Django（最新版本）？

编辑：在尝试了各种选项（例如使用 HTMLField() 的高级主题）之后，我又回到了从 Grappelli 主题开始的地方。我想我可以忍受这个主题一段时间。

【参考方案1】：

第三方库是快速解决方案，但如果您只想要 JS 解决方案并且不需要安装任何其他库。您可以使用自定义 JS 文件在 django admin 中完成。

class FooForm(forms.ModelForm):

   def __init__(self,*args,**kwargs):
      super(FooForm, self).__init__(*args, **kwargs)
      self.fields['yourtinymcefield'].widget.attrs['class'] = 'tiny-class'
   class Meta:
      model = FooModel
      fields = ('fields') # your fields here

然后在你的 admin.py 中

class FooAdmin(admin.ModelAdmin):
    form = FooForm
    # regular stuff
    class Media:
        js = (
            'https://cloud.tinymce.com/stable/tinymce.min.js' # tinymce js file
            'js/myscript.js',       # project static folder
        )

admin.site.register(Foo, FooAdmin)

然后在myscript.js中初始化

<script>

tinyMCE.init(
        //mode : "textareas",
        mode : "specific_textareas",
        editor_selector : "tiny-class",
        theme : "simple"
    );
</script>

【讨论】：

谢谢，这可行，并且确实将 TinyMCE 4 添加到我的管理界面 :-) 但是自定义 TinyMCE 并让它与图像一起播放是另一回事。我现在更加感谢 Grappelli 为我提供了工作编辑器。唉，赏金是你的。

是的，通过这种方式，您可以在管理面板中初始化任何与 JS 相关的东西。 :)

【参考方案2】：

如果您查看文档，您可以看到实现编辑器的几种方法：http://django-tinymce.readthedocs.io/en/latest/usage.html#using-the-widget。

由于您要使用模型字段类型，因此您需要查看设置以扩展编辑器上的可用选项。

编辑器的默认设置是简单。根据你关于这相当粗略的说法，我会转向全功能编辑器。

为此，您将更改项目 settings.py 中的配置：http://django-tinymce.readthedocs.io/en/latest/installation.html#configuration

未经测试，如果添加：

TINYMCE_DEFAULT_CONFIG = 
'theme': "advanced",

这将打开更多按钮供您使用。

【讨论】：

谢谢，不知道我是怎么错过的。这确实有效并添加了更多按钮，但生成的 TinyMCE 与当前的 TinyMCE 4 仍有很大差距。

我的猜测是，如果您添加更多插件，将有助于为您提供当前 TinyMCE4 的感觉。您只需在配置字段中添加您想要构建更强大的编辑器的插件。

老实说，在尝试了更多东西之后，我认为构建全新的页面来添加/编辑 HTML 内容并直接通过 .js 文件集成 TinyMCE 会更容易，也不会那么令人沮丧。

【参考方案3】：

我最近不得不在管理页面中更改一些东西，发现that 很有用，也许你可以加载 TinyMCE 并用它初始化你想要的表单。 （我会把它放在评论中，但我不能对我的代表发表评论）

【讨论】：

谢谢，我想避免修改管理页面，但如果没有更好的选择，我会试试这个。