tinyMCE中的Wordpress短代码预览

我已经写了一个短代码，它的功能应该是这样的。现在最难的部分是：

我想向用户显示tinyMCE编辑器中已经存在的预览。在编辑器中加载CSS对我来说不是问题，但我想知道是否有可能在TinyMCE中处理这个短代码

谢谢

让代码说话： 我将添加一个代码，为突出显示内容单词短代码添加一个可视图标，然后您可以使用相同的逻辑实现任何其他短代码

     class spot_shortcodes {

      function spot_shortcodes() 
{   

    add_action('init', array(&$this, 'init'));
}
function init(){

    // Enable shortcodes in text widgets
    add_filter( 'widget_text', 'do_shortcode' );

    // Fix for large posts, http://core.trac.wordpress.org/ticket/8553
    @ini_set( 'pcre.backtrack_limit', 500000 );
    // init process for button control
    add_filter( 'tiny_mce_version', 'my_refresh_mce');

   // Add only in Rich Editor mode
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_buttons_3', array(&$this, 'register_highlight_button'));
   }    
}

    // Add your button plugin js code to tinyMCE
    // codex: wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_register_script( 'effects-highlight', SPOT_SHORTCODES_URL . '/js/jquery.effects.highlight.js', false ,SPOT_SHORTCODES_URL, true );

   function add_youtube_button() {

   // Don't bother doing this stuff if the current user lacks permissions
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;

   // Add only in Rich Editor mode
   if ( get_user_option('rich_editing') == 'true') {
     add_filter("mce_external_plugins", array(&$this, "add_youtube_tinymce_plugin"));
     add_filter('mce_buttons', array(&$this, 'register_highlight_button'));
   }
}

    // function to register you button to tinyMCE dashboard
    function register_highlight_button($buttons) {
   array_push($buttons, "|", 'highlight_button');
   return $buttons;
}

    function add_youtube_tinymce_plugin($plugin_array) {

    // your icon image(highlight.png) which will be displayed in the tinyMCE dashboard
    $plugin_array['highlight'] = SPOT_TINYMCE_URL . '/icons-lib-custom.js';

   return $plugin_array;
}

} // class end
// Finally make an object from your button
$spot_shortcodes = new spot_shortcodes();

突出显示按钮选项的js代码 制作一个点js文件，将以下代码放入其中，并将其放入tinyMCE插件目录

// dont forget to change the paths
tinymce.create('tinymce.plugins.highlight', {
    // creates control instances based on the control's id.
    // our button's id is "highlight_button"
    createControl : function(id, controlManageradel) {
        if (id == 'highlight_button') {
            // creates the button
            var button = controlManageradel.createButton('highlight', {
                title : 'Add a Hightlight Text', // title of the button
                image :spotShortcodes.plugin_folder +"/tinymce/images/highlight.png",  // path to the button's image
                onclick : function() {
                    // triggers the thickhighlight
                    var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                    W = W - 80;
                    H = H - 84;
                    tb_show( 'Insert text box shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=highlight-form' );
                }
            });
            return button;
        }
        return null;
    }
});

// registers the plugin. DON'T MISS THIS STEP!!!
tinymce.PluginManager.add('highlight', tinymce.plugins.highlight);
// executes this when the DOM is ready
jQuery(function(){
    // creates a form to be displayed everytime the button is clicked
    // you should achieve this using AJAX instead of direct html code like this
    var form = jQuery('<div id="highlight-form"><table id="highlight-table" class="form-table" style="text-align: left">\
         \
            \
        <tr>\
        <th><label class="title" for="highlight-bg">Highlight color</label></th>\
            <td><select name="bg" id="highlight-bg">\
                <option value="#f02d33">Red</option>\
                <option value="#b6bbbd">Grey</option>\
                <option value="#3e3c3c">Darkgrey</option>\
                <option value="#99cc33">Lightgreen</option>\
                <option value="#6c8c2d">Darkgreen</option>\
                <option value="#0f5ac6">Blue</option>\
                <option value="#3cbcf7">Cyan</option>\
                <option value="#9219f8">Purple</option>\
                <option value="#fcc016">Yellow</option>\
                <option value="#f65e0e">Orange</option>\
            </select><br />\
        <div class="info"><small>Select box type.</small></div></td>\
        </tr>\
        <tr>\
        <th><label class="title" for="highlight-contet">Conent</label></th>\
            <td><textarea rows="7"\ cols="45"name="content" id="highlight-content">hightlight text</textarea>\
                 <br />\
            <div><small>this text displayed in box.</small></div></td>\
        </tr>\
        </table>\
    <p class="submit">\
        <input type="button" id="highlight-submit" class="button-primary" value="Insert shortcode" name="submit" style=" margin: 10px 150px 50px; float:left;"/>\
    </p>\
    </div>');

    var table = form.find('table');
    form.appendTo('body').hide();

    // handles the click event of the submit button
    form.find('#highlight-submit').click(function(){
        // defines the options and their default values
        // again, this is not the most elegant way to do this
        // but well, this gets the job done nonetheless
        var options = { 
            'bg'     : '#f02d33',
            'content'  : 'hightlight text',
            };

        var shortcode = '[highlight ';

        for( var index in options) {
            var value = table.find('#highlight-' + index).val();

            // attaches the attribute to the shortcode only if it's different from the default value
            if ( value !== options[index] & index !== 'content')
                shortcode += ' ' + index + '="' + value + '"';
        }

        shortcode += ']'+ value + '[/highlight]'  

        // inserts the shortcode into the active editor
        tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

        // closes Thickhighlight
        tb_remove();
    });
});

//别忘了更改路径
create（'tinymce.plugins.highlight'{
//基于控件的id创建控件实例。
//我们的按钮id是“突出显示按钮”
createControl:函数（id，ControlManagerRadel）{
如果（id=='突出显示按钮'）{
//创建按钮
var button=controlManageradel.createButton（'突出显示'{
标题：“添加高亮文本”，//按钮标题
image:spotShortcodes.plugin_folder+“/tinymce/images/highlight.png”，//按钮图像的路径
onclick:function（）{
//触发高光
var width=jQuery（window）.width（），H=jQuery（window）.height（），W=（720<宽度）？720:宽度；
W=W-80；
H=H-84；
tb#u show（'Insert text box shortcode'，'tb#u inline？width='+W+'&height='+H+'&inlineId=highlight form'）；
}
});
返回按钮；
}
返回null；
}
});
//注册插件。不要错过这一步！！！
add（'highlight'，tinymce.PluginManager.highlight）；
//当DOM就绪时执行此操作
jQuery（函数（）{
//创建每次单击按钮时显示的表单
//您应该使用AJAX而不是像这样的直接html代码来实现这一点
var form=jQuery（'\
\
\
\
突出显示颜色\
\
红色的\
灰色的\
黑格瑞\
浅绿色\
暗绿色\
蓝色的\
青色\
紫色的\
黄色的\
橙色的\

\
选择框类型\
\
\
康奈特\
高亮文本\

\
此文本显示在文本框中\
\
\
\
\
\
');
var table=form.find（'table'）；
form.appendTo（'body'）.hide（）；
//处理“提交”按钮的单击事件
表单。查找（“#突出显示提交”）。单击（函数（）{
//定义选项及其默认值
//同样，这不是最优雅的方法
//但是，尽管如此，这项工作还是完成了
变量选项={
“bg”：“f02d33”，
“内容”：“高亮文本”，
};
var shortcode='[highlight'；
for（期权中的var指数）{
var value=table.find（'#highlight-'+index）.val（）；
//仅当属性与默认值不同时，才将属性附加到快捷码
如果（值！==选项[索引]&索引！==内容）
短代码+=''+索引+'=''+值+'''；
}
短代码+=']'+值+'[/highlight]'
//将短代码插入活动编辑器
tinyMCE.activeEditor.execCommand（'mceInsertContent'，0，短代码）；
//关闭高光
tb_remove（）；
});
});

---

我希望这能帮到你，如果你想要更多的解释，请给我反馈，谢谢。

如果你在这里找不到答案，你应该看看WordPress是如何传递[caption]标签的-当你插入带有标题的图像时，你会看到图像及其下方的标题，但实际上这只是一个短代码。谢谢！明天我什么也得不到的时候再调查。我希望后端可能会有一个过滤器或钩子来运行短代码：）我快速浏览了一下，似乎你可以添加一个定制的TinyMCE插件。例如，请参见tinyMCE插件的代码。基本上，tinyMCE似乎有两个钩子，允许您在内容显示和保存（更新后）之前解析内容。这些钩子是这样添加的：

ed.onBeforeSetContent.add（function（ed，o）{}

和

ed.onPostProcess.add（function（ed，o）{}

。希望有帮助：）您的wp\u register\u script（）行抛出了一个错误。我相信它在函数之外？关于wp\u register\u script（）的内容你在说吗？只有一个实例，它不介意它是内部的还是外部的，你能写下显示的错误吗，让我猜猜：1.你给这个常量SPOT\u-SHORTCODES\u-URL你的自定义值吗？2.你能用这个替换函数并测试这个：define（'SPOT\u-SHORTCODES\u-URL'，'your/Custom/Path'）；define（'SPOT_SHORTCODES_VER'，'0.1'）；wp_register_script（'effects highlight'，SPOT_SHORTCODES_URL./js/jquery.effects.highlight.js'，false，SPOT_SHORTCODES_VER，true）；谢谢，如果我能为您提供更多帮助，请让我知道，我会为此感到高兴。我不是TiniMCE方面的专家，但我看不到这段代码中的任何地方如何预览突出效果，这是主要问题。TinyMCE有自己的结构，您可以添加任何插件，我们在上述代码步骤中所做的是遵循/扩展这个预定义结构你需要在编辑器的界面上添加一个包含突出显示效果功能的按钮。同样，要将突出显示效果按钮添加到TinyMCE编辑器界面，需要执行上述所有步骤。你也可以参考官方网站。我的代码中的额外内容仅是与wordpress的集成。希望他