【问题标题】:Django: Use TinyMCE 4 in admin interfaceDjango:在管理界面中使用 TinyMCE 4
【发布时间】: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 主题开始的地方。我想我可以忍受这个主题一段时间。

【问题讨论】:

    标签: python django tinymce tinymce-4 django-tinymce


    【解决方案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 并用它初始化你想要的表单。 (我会把它放在评论中,但我不能对我的代表发表评论)

    【讨论】:

    • 谢谢,我想避免修改管理页面,但如果没有更好的选择,我会试试这个。
    猜你喜欢
    • 2011-11-12
    • 1970-01-01
    • 1970-01-01
    • 2016-05-08
    • 2015-06-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多