在编辑器中更改简码文本的外观

是否可以在编辑器中更改短代码的外观，或者以其他方式使其与周围的文本更具区别？

例如，如果帖子的内容是这样的...

有关Lorem Ipsum的参考站点，提供其起源信息，以及一个随机Lipsum生成器。有关Lorem Ipsum的参考站点，提供其起源的信息，以及一个随机Lipsum生成器。[shortcode] asfdasfd [/ shortcode]参考站点关于Lorem Ipsum，提供了其起源的信息，以及一个随机的Lipsum生成器。有关Lorem Ipsum的参考站点，提供了其起源的信息，以及一个随机Lipsum生成器。关于Lorem Ipsum的参考站点，给出了其起源的信息，以及随机的Lipsum生成器。

...如果里面的简码是粗体的，那将是很好的，这样可以很容易地看到它：

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

用法

短代码将通过正则表达式找到，如果您需要不同的短代码和不同的标记，则可以找到该代码。该脚本<b>FB-TEST在结束标记和内容之前和之后的短代码中添加自定义内容。您还可以使用标记，css类来创建可见性。重要的是，您在上的脚本中触发的保存信息中删除了此内容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中的简码以查看它并简化以了解结果。在这种情况下，它也可能会有所帮助。