文件菜单中的 TinyMCE 保存按钮答案

【问题标题】：TinyMCE Save button in the File menu文件菜单中的 TinyMCE 保存按钮
【发布时间】：2014-06-07 13:59:53
【问题描述】：

我正在使用 TinyMCE，如果这很重要，我正在使用内联编辑器。这是我的代码...

<script type="text/javascript">
tinymce.init({
    selector: "div.prut8Eje",
    inline: true,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor save",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    menu : { // this is the complete default configuration
        file   : {title : 'File'  , items : 'save newdocument | print'},
        edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
        insert : {title : 'Insert', items : 'link media | template hr'},
        view   : {title : 'View'  , items : 'visualaid'},
        format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table  : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
        tools  : {title : 'Tools' , items : 'spellchecker code'}
    },
    toolbar: "save | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

嗯，保存按钮在工具栏中工作正常，但没有显示在文件菜单中。我尝试发布图片，但我需要 10 点声望。

编辑：您可以在以下位置查看图片 http://gyazo.com/3d08cd176cd7b3cb4c6d6d395884e466 http://gyazo.com/daed4520adb902cb87336d943d6a30f7

提前致谢，

本

【问题讨论】：

标签： javascript jquery html tinymce wysiwyg

【解决方案1】：

这是一个老问题，但我找到了一种非常简单的方法来将保存按钮添加到文件菜单。使用 tinymce 中的设置事件，您可以添加一个菜单项：

tinymce.init({
    .....
    setup: function(editor) {
           editor.addMenuItem('save', {
                icon: 'save',
                text: 'Save',
                cmd: 'mceSave',
                context: 'file',
                disabled: true,
                onPostRender: function () {
                    var self = this;
                    editor.on('nodeChange', function() {
                        self.disabled(editor.getParam("save_enablewhendirty", true) && !editor.isDirty());
                    });
                }
            });|
    }
});

这利用了所有常规的保存功能，而 onPostRender 函数只是启用或禁用按钮（使用我在 save plugin.js 文件中找到的代码）

【讨论】：

【解决方案2】：

根据他们自己的文档，“保存”插件仅适用于工具栏而不适用于菜单：http://www.tinymce.com/wiki.php/Controls

看起来您必须手动创建自己的菜单项；像这样的东西可以工作：

tinymce.PluginManager.add('menusave', function(editor, url) {
    editor.addMenuItem('menusave', {
        text: 'Save',
        context: 'file',
        onclick: function() {
            $('.mce-i-save').closest('button').trigger('click');
        }
    });
});

不过，要做到这一点，您还必须在工具栏中有保存按钮，但可能有比触发工具栏中的按钮单击更好的方法。

然后不要忘记将“menusave”（或您选择的任何名称）添加到插件列表中，并将其添加到您希望它在菜单中的任何位置：

file   : {title : 'File'  , items : 'menusave newdocument | print'},

顺便说一句，想出上面的代码，我玩了这个“TinyMCE Fiddle”：http://fiddle.tinymce.com/ngdaab/0

【讨论】：