Question

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

例如，对于在编辑器中找到的每个h级标记（h1-h3），我想插入一段html（包含目录*的div）以及粘贴＆lt;！ - nextpage- - ＆GT;在内容列表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元素的数量为 this 页面专门动态生成内容，以便为用户动态生成TOC。页面结构。

Answer 1

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

以下代码直接从我开发的WordPress插件中复制，以使用自定义shortcode将button添加到编辑器中。此代码段转到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，我在{{{名单}中使用了此名称1}}功能

add_plugin

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

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

1 个答案: