問題描述

是否可以改變編輯器中的縮圖的外觀，或者以任何方式使其與周圍的文字更為區別？

例如，如果帖子的內容是這樣的…

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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。