使用jQuery创建并注册TinyMCE插件 [英] Create and register TinyMCE plugin with jQuery

问题描述

使用jQuery TinyMCE，我正在尝试注册一个自定义的插件（它实际上只是工具栏中的菜单）

Using the jQuery TinyMCE, I'm trying to register a custom "plugin" (it's really just a menu within the toolbar)

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

I'm trying to get this registered, but the code I found on http://www.tinymce.com/tryit/menu_button.php doesn't seem to work with the jquery version of TinyMCE. Ideally, I'd like to have my custom plugin code in a separate js file also.

TinyMce init脚本

TinyMce init script

// 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

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

The plugin I'm trying to create and setup:

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);

推荐答案

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

Your question doesn't state whether or not you're actually trying to load this plugin from the plugin folder - so this statement might not actually apply to your problem but I'll add for completeness:

因为TinyMCE的Jquery版本改变了启动事物的顺序（例如：在调用 $（'textarea'）之前你不能引用tinymce对象.tinymce（...），你不能以与他们网站上的简单插件示例相同的方式添加插件。你必须创建一个独立的插件。

Because the Jquery version of TinyMCE changes the order in which things are initiated (eg: you can't reference the tinymce object before you've called $('textarea').tinymce(...), you can't add the plugin in the same way as the simple plugin example on their site. You have to create a standalone plugin.

我将假设您已按照如何创建TinyMCE插件在这里。

I'm going to presume that you've followed the instructions on How to create an TinyMCE plugin here.

您遇到的问题是您正在加载插件：插件： marcusinserts，... 但是在插件的底部y你正在使用引用注册插件

The issue you've got is that you're loading the plugin: plugins: "marcusinserts,... but at the bottom of your plugin you're registering the plugin with the reference

tinymce.PluginManager.add（'marcus-inserts'，tinymce.plugins.MarcusInserts）;

尝试将其更改为：

tinymce.PluginManager .add（'marcusinserts'，tinymce.plugins.MarcusInserts）; （注意删除 - 在marcus和insert之间的单词。

tinymce.PluginManager.add('marcusinserts', tinymce.plugins.MarcusInserts); (note the removal of the - between the words marcus and inserts.

这篇关于使用jQuery创建并注册TinyMCE插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！