问题描述
是否可以改变编辑器中的缩略图的外观,或者以任何方式使其与周围的文本更为区别?
例如,如果帖子的内容是这样的…
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 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。