问题描述

是否可以改变编辑器中的缩略图的外观,或者以任何方式使其与周围的文本更为区别?

例如,如果帖子的内容是这样的…

Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.[shortcode]asfdasfd[/shortcode]Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.

… 如果内部的短码是大胆的,那么这样很容易被看到,这样会很好:

最佳解决方案

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

Usage

短码将通过正则表达式找到,如果您需要它,可以使用不同的短码和不同的标记。该脚本将自定义内容添加到短代码中,此处为<b>FB-TEST 前后的标签和内容。您还可以使用标记,css 类来创建可见性。重要的是,您在保存帖子中删除此内容,在 PostProcess 的脚本中触发。这里运行脚本并通过函数 restoreShortcodes 删除自定义内容。

但是,目前来说这是简单的,也许对每个需求都无效。也许你应该使用这个存储的变量来存储初始化和还原的短代码。

Screenshot

以截图为例,了解结果。

Source

源需要这个目录结构来使用它:

-- 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 ) {

以下源代码是名为 fb_shortcode_replace.js 的 javascript 文件。将它放在 assets/js/目录下,这个插件的 plugin 目录下。

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

Helpful

额外提示

插件 Raph 转换 html 中的缩略图以查看它并简化以了解结果。也许这在这方面也是有帮助的。

参考文献

注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。