您可以向WordPress和TinyMCE可视化编辑器添加自定义插件。下面的源代码是一个简单的示例，它可以在所有短代码之前和之后添加字符串。

用法

如果您需要不同的短代码和不同的标记，短代码将通过regex找到。脚本将自定义内容添加到快捷码，如下所示<b>FB-TEST 结束标记和内容前后。您还可以使用标记、css类来创建可见性。重要的是，您必须在save post上删除此内容，并在脚本中激发PostProcess. 这里运行脚本并通过函数删除自定义内容restoreShortcodes.

但是，目前这种方法很简单，可能对每个需求都无效。也许您应该将短代码存储在init上，并使用存储的变量进行还原。

屏幕截图参见屏幕截图示例以了解结果。

源

源需要此目录结构才能使用它：

-- shortcode-replace
 |--php file
 |--assets
   |-- js
     |-- js file

首先是一个小的php文件，它将源代码作为插件包含在wp环境中。将其保留在插件的主目录中shortcode-replace.

<?php # -*- coding: utf-8 -*-

/**
 * Plugin Name:     Shortcode Replace
 * Plugin URI:      
 * Description:     
 * Version:         0.0.1
 * Text Domain:     
 * Domain Path:     /languages
 * License:         MIT
 * License URI:
 */

namespace FbShortcodeReplace;

if ( ! function_exists( \'add_action\' ) ) {
    exit();
}

if ( ! is_admin() ) {
    return;
}

add_action( \'admin_enqueue_scripts\', __NAMESPACE__ . \'\\initialize\' );
function initialize( $page ) {

    if ( \'post.php\' === $page ) {
        add_filter( \'mce_external_plugins\', __NAMESPACE__ . \'\\add_tinymce_plugin\' );
    }
}

function add_tinymce_plugin( $plugins ) {

    if ( ! is_array( $plugins ) ) {
        $plugins = array();
    }

    $suffix = defined( \'SCRIPT_DEBUG\' ) && SCRIPT_DEBUG ? \'.dev\' : \'\';
    $url     = plugins_url( \'/assets/js/fb_shortcode_replace.js\', __FILE__ );

    $plugins = array_merge( $plugins, array( \'fb_shortcode_replace\' => $url ) );
    return $plugins;
}

此php文件将javascript作为插件加载到可视化编辑器中。插件将仅加载在管理页面上，仅加载带有字符串的页面post.php - 看见if ( \'post.php\' === $page ) {.

以下源代码是javascript文件，名为fb_shortcode_replace.js. 将其保留在目录中assets/js/, 此插件的插件目录中。

tinymce.PluginManager.add( \'fb_shortcode_replace\', function( editor ) {

    var shortcode = /\\[.+\\]/g;
    var additional_before = \'<b>FB-TEST\';
    var additional_after = \'FB-TEST</b>\';

    function ifShortcode( content ) {

        return content.search( /\\[.+\\]/ ) !== -1;
    }

    function replaceShortcodes( content ) {

        return content.replace( shortcode, function( match ) {
            return html( match );
        } );
    }

    function restoreShortcodes( content ) {

        content = content.replace( additional_before, \'\' );
        content = content.replace( additional_after, \'\' );
        return content;
    }

    function html( data ) {

        console.log( data );
        return additional_before + data + additional_after;
    }

    editor.on( \'BeforeSetContent\', function( event ) {

        // No shortcodes in content, return.
        if ( ! ifShortcode( event.content ) ) {
            return;
        }

        event.content = replaceShortcodes( event.content );
    } );

    editor.on( \'PostProcess\', function( event ) {

        if ( event.get ) {
            event.content = restoreShortcodes( event.content );
        }
    } );
} );

对您的问题有帮助的评论

https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

附加提示

插件Raph 转换html中的短代码以查看它，并简化以理解结果。也许在这方面也有帮助。