jquery - 通过 jQuery 添加按钮来触发 html 代码片段到tinyMCE编辑器中

Question

我正在努力向应用程序中的 Tinymce 编辑器工具栏添加一个按钮，该按钮将粘贴针对编辑器中的内容定制的内容表的 html 代码。

例如，对于编辑器中找到的每个 h 级别标签 (h1-h3)，我想插入一段 html(包含目录*的 div)并粘贴 <!--nextpage--> 将注释标记插入源标记中，就在目录 html 片段之前。

任何人都可以建议一个有关如何与tinyMCE API 交互的示例教程，以便向编辑器添加一个按钮来触发本地 jQuery 函数以与编辑器的内容交互吗？

我的 html 片段将是:

<!--nextpage-->
<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/article-slug/">Introduction</a></li>
        <li><a href="http://mysite.com/article-slug/2">First h1-h3 heading</a></li>
        <li><a href="http://mysite.com/article-slug/3">Next h1-h3 heading</a></li>
    </ul>
</div>

但是jQuery会根据页面URL和h1-h3元素的数量专门为这个页面动态生成内容，从而根据页面动态为用户生成TOC页面结构。

Answer 1

只是想让您了解如何在 WordPress tinyMCE 编辑器中添加按钮并使用该按钮将内容插入编辑器。在这个答案的底部我提供了我的插件的链接，你可以直接下载它并可以看到源代码。

以下代码直接从我开发的一个 WordPress 插件中复制，该插件是为了使用自定义按钮将短代码添加到编辑器中.此代码片段转到functions.php

add_action( 'init', 'my_js_fiddle_init');
function my_js_fiddle_init() {
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
        return;
    }
    if ( get_user_option('rich_editing') == 'true' ) {
        // call the add_plugin function to register the plugin(js) for tinyMCE
        add_filter( 'mce_external_plugins', 'add_plugin' );
        // call the function register_button to add a new button in the editor
        add_filter( 'mce_buttons', 'register_button' );
    }
}

function register_button($buttons) {
    array_push( $buttons, "|", "wpjsfiddle" );
    return $buttons;
}

function add_plugin($plugin_array) {
    //$plugin_array['wpjsfiddle'] = plugins_url('js/wp_js_fiddle.js', __FILE__ );
    $plugin_array['wpjsfiddle'] ="tinyMCE_plugin_file";
    return $plugin_array;
}

这是您的tinyMCE插件，创建一个js文件并将代码放入该文件中，例如您可以将其命名为tinyMCE_plugin_file.js，我在 add_plugin 函数中使用了这个名称

(function() {
    tinymce.create('tinymce.plugins.wpjsfiddle', {
        init : function(ed, url) {
            ed.addButton('wpjsfiddle', {
                title : 'Insert Js Fiddle',
                image : url+'/images/jsfiddle-icon.png',
                onclick : function() {
                var contentToInsert='this line will be inserted'; // change this
                ed.execCommand('mceInsertContent', false, contentToInsert);
            }
          });
      },
      createControl : function(n, cm) {
        return null;
      },
      getInfo : function() {
        return {
            longname : "Wp Js Fiddle",
            author : 'Sheikh Heera',
            authorurl : 'http://heera.it',
            version : "1.0"
         };
      }
    });
    tinymce.PluginManager.add('wpjsfiddle', tinymce.plugins.wpjsfiddle);
})();

您也可以download my plugin从 WordPress 插件目录可以查看源代码。希望对您有一点帮助。