Question

使用jQuery TinyMCE，我试图注册一个自定义＆＃34;插件＆＃34; （它实际上只是工具栏中的一个菜单）

我试图让这个注册，但我在http://www.tinymce.com/tryit/menu_button.php找到的代码似乎不适用于TinyMCE的jquery版本。理想情况下，我也希望将自定义插件代码放在单独的js文件中。

TinyMce初始化脚本

// Start TinyMce Editor
    $('#Template_Html').tinymce({
        // Location of TinyMCE script
        script_url: '@Url.Content("~/Scripts/tinymce/tiny_mce.js")',

        // General options
        theme: "advanced",
        plugins: "marcusinserts,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

        // Theme options
        theme_advanced_buttons1: "fullscreen,preview,code,|,cleanup,removeformat,|,undo,redo,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent,blockquote,|,bullist,numlist,|,sub,sup,|,template,viewhtmlversion,taginserts",
        theme_advanced_buttons2: "bold,italic,underline,strikethrough,|,formatselect,|,link,unlink,anchor,image,|,forecolor,backcolor,|,tablecontrols,|,charmap,iespell,advhr",
        theme_advanced_buttons3: "",
        //theme_advanced_buttons3: "tablecontrols,|,hr,visualaid,|,sub,sup,|,charmap,iespell,advhr",
        //theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: false,

        // Example content CSS (should be your site CSS)
        //content_css:'/Portal/Content/admin.css',

        // Drop lists for link/image/media/template dialogs
        template_external_list_url: "lists/template_list.js",
        external_link_list_url: "lists/link_list.js",
        external_image_list_url: "lists/image_list.js",
        media_external_list_url: "lists/media_list.js",

        // Preview options
        plugin_preview_width: "725",
        plugin_preview_height: "600",

        // Replace values for the template plugin
        template_replace_values: {
            username: "Some User",
            staffid: "991234"
        },

        // View HTML Version insert button
        setup: function (ed) {
            ed.addButton('viewhtmlversion', {
                title: 'Insert View HTML version link',
                image: '@Url.Content("~/Scripts/tinymce/themes/advanced/img/custom-icon-view-html.gif")',
                onclick: function() {
                    ed.focus();
                    ed.selection.setContent('<a href="{VR_HOSTED_LINK}">Click to view this email in a browser</a>');
                }
            });
        }
    });
    // End TinyMce Editor

我尝试创建和设置的插件：

tinymce.create('tinymce.plugins.MarcusInserts', {
createControl: function (n, cm) {
    switch (n) {
        case 'taginserts':
            var c = cm.createMenuButton('taginserts', {
                title: 'Tag Inserts',
                image: '/Scripts/tinymce/themes/advanced/img/custom-icon-view-html.gif',
                icons: false
            });

            c.onRenderMenu.add(function (c, m) {
                m.add({ title: 'View in Browser', onclick: function () {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1');
                } 
                });

                m.add({ title: 'Forward Link', onclick: function () {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2');
                } 
                });

                m.add({ title: 'Social Media', onclick: function () {
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2');
                }
                });
            });

            // Return the new menu button instance
            return c;
    }

    return null;
}
});

// Register plugin with a short name
tinymce.PluginManager.add('marcus-inserts', tinymce.plugins.MarcusInserts);

Answer 1

你的问题并没有说明你是否真的试图从插件文件夹中加载这个插件 - 所以这个声明可能实际上并不适用于你的问题，但我会添加完整性：

因为TinyMCE的Jquery版本更改了启动事件的顺序（例如：在调用$('textarea').tinymce(...)之前无法引用tinymce对象，所以无法添加插件与他们网站上的简单插件示例相同。您必须创建一个独立的插件。

我假设您已按照How to create an TinyMCE plugin here.

上的说明进行操作

您遇到的问题是您正在加载插件：plugins: "marcusinserts,...但是在插件的底部，您正在使用参考注册插件

tinymce.PluginManager.add('marcus-inserts', tinymce.plugins.MarcusInserts);

尝试将其更改为：

tinymce.PluginManager.add('marcusinserts', tinymce.plugins.MarcusInserts);（请注意删除 - 在马库斯和插入词之间。

使用jQuery创建并注册TinyMCE插件

1 个答案: