通过jQuery添加按钮以触发html代码片段到tinyMCE编辑器中 [英] Adding button to trigger html code fragment into tinyMCE editor via jQuery

问题描述

我正在为应用程序中的Tinymce编辑器工具栏添加一个按钮，该按钮将粘贴到html代码中，以便为编辑器中的内容自定义内容表。

I'm working on adding a button to the Tinymce editor toolbar in an app that will paste in the html code for a table of content's customized for the content in the editor.

例如，对于编辑器中找到的每个h级别标签（h1-h3），我想插入一段html（包含目录*的div）以及粘贴<！ - nextpage - >在内容目录html片段之前将注释标记添加到源标记中。

For example, for every h level tag (h1-h3) found in the editor I would like to insert a snippet of html (a div containing the table of contents*) along with pasting a <!--nextpage--> comment tag into the source markup just before the table of contents html fragment.

任何人都可以建议一个关于如何与tinyMCE API交互以添加按钮的示例教程激活本地jQuery函数与编辑器内容交互的编辑器？

Can anyone suggest an example tutorial on how to interact with the tinyMCE API in order to add a button to the editor that fires a local jQuery function to interact with the editor's contents?

我的html片段将是：

My html fragment will be:

<!--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。

But the contents would be dynamically generated specifically for this page by jQuery based on the page URL and the number of h1-h3 elements, so that the TOC is dynamically generated for the user based on the page structure.

推荐答案

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

Just trying to give you an idea about how to add a button in WordPress tinyMCE editor and insert content into editor using that button. At the bottom of this answer I've provided the link of my plugin, you can directly download it and can see the source.

以下代码直接从其中一个我的 WordPress 我开发的插件，使用自定义短代码添加到编辑器中>按钮。此代码段转到 functions.php

Following code is directly copied from one of my WordPress Plugin that I've developed to add a shortcode in to the editor using a custom button. This code snippet goes to 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 函数中使用了这个名字

This is your tinyMCE plugin, create a js file and put the code inside this file, for example you can name it tinyMCE_plugin_file.js, I've used this name in add_plugin function

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

你也可以从WordPress插件目录下载我的插件，可以查看源代码。希望它有所帮助。

Also you can download my plugin from WordPress plugin directory and can check the source code. Hope it helps a bit.

这篇关于通过jQuery添加按钮以触发html代码片段到tinyMCE编辑器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！