在TinyMCE编辑器中添加按钮以插入文本

时间:2014-04-15 作者:Pepozzo

我正在寻找一种方法,当单击insert into the visual editor some text时,将自定义按钮添加到TinyMCE编辑器中。

例如:单击“插入编辑器”时名为“Hi”的按钮"Hello I\'m <B>Mark</b>!"

有可能吗?如何做到这一点?

3 个回复
SO网友:mukto90

Add this to your plugin file or in functions.php file in the theme directory

add_action( \'admin_enqueue_scripts\', \'wpse_141344_admin_enqueue_scripts\' );
add_action( \'admin_head\', \'wpse_141344_add_mce_button\' );

function wpse_141344_admin_enqueue_scripts() {
    wp_enqueue_script( \'wpse_141344-tinymce-scipt\', \'url/to/your/custom-tinymce.js\' );
}

function wpse_141344_add_mce_button() {
    if ( ! current_user_can( \'edit_posts\' ) && ! current_user_can( \'edit_pages\' ) ) {
        return;
    }
    add_filter( \'mce_external_plugins\', \'wpse_141344_add_tinymce_plugin\' );
    add_filter( \'mce_buttons\', \'wpse_141344_register_mce_button\' );
}

function wpse_141344_add_tinymce_plugin( $plugin_array ) {
    $plugin_array[\'wpse_141344_tinymce_button\'] = \'url/to/your/custom-tinymce.js\';
    return $plugin_array;
}

function wpse_141344_register_mce_button( $buttons ) {
    array_push( $buttons, \'wpse_141344_tinymce_button\' );
    return $buttons;
}

And this is your custom-tinymce.js file

(function() {
    tinymce.PluginManager.add(\'wpse_141344_tinymce_button\', function( editor, url ) {
        editor.addButton( \'wpse_141344_tinymce_button\', {
            // image : \'url/to/an/icon\', // optional
            text : \'Hi\',
            title : \'Hi\',
            onclick: function() {
                editor.insertContent(\'Hello I\\\'m <B>Mark</b>!\');
            }

        });
    });
})();
SO网友:a4jp.com

如果确实要从头开始创建按钮,请尝试使用以下代码:

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    toolbar: "mybutton",
    setup: function(editor) {
        editor.addButton(\'mybutton\', {
            type: \'menubutton\',
            text: \'My button\',
            icon: false,
            menu: [
                {text: \'Hi\', onclick: function() {editor.insertContent(\'Hello I am <B>Mark</b>\');}},
                {text: \'Insert text item 2\', onclick: function() {editor.insertContent(\'It is a beautiful day\');}}
            ]
        });
    }
});
</script>

<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>
这个snippet plugin (electricg/tinymce代码片段插件)如果您只想快速添加带有下拉菜单的自定义按钮,而不需要编写太多代码,那么它可能会很有用。

如果您感兴趣,还可以查看插件内部以创建高级系统。

SO网友:Bindiya Patoliya

尝试以下操作:

将此代码添加到functions.php 文件

add_action( \'init\', \'droid_buttons\' );
function droid_buttons() {
    add_filter( "mce_external_plugins", "droid_add_buttons" );
    add_filter( \'mce_buttons\', \'droid_register_buttons\' );
}

function droid_add_buttons( $plugin_array ) {
    $plugin_array[\'droid\'] = get_template_directory_uri() . \'/text-button.js\';
    echo get_template_directory_uri();
    return $plugin_array;
}

function droid_register_buttons( $buttons ) {
    array_push( $buttons, \'droid_title\'); // droid_title
    return $buttons;
}
创建.js 文件,并在以下代码中替换js文件的路径/位置:

    (function() {
    tinymce.create(\'tinymce.plugins.Droid\', {
    init : function(ed, url) {
    ed.addButton(\'droid_title\', {
    title : \'Droid Title\',
    cmd : \'droid_title\',
    image : \'\'
    });

    ed.addCommand(\'droid_title\', function() {
    var selected_text = ed.selection.getContent();
    var return_text = "";
    return_text = \'<span class="droid_title">Hello I\\\'m <B>Mark</b>!</span>\'; 
    ed.execCommand(\'mceInsertContent\', 0, return_text);
    });

    },

    });

    // Register plugin
    tinymce.PluginManager.add( \'droid\', tinymce.plugins.Droid );
})();

结束