tinyMCE 中的 Wordpress 短代码预览 [英] Wordpress shortcode preview in tinyMCE

问题描述

我写了一个短代码，它的功能应该是这样.现在是困难的部分:

我想向用户展示一个已经在 tinyMCE 编辑器中的预览.在编辑器中加载 CSS 对我来说不是问题，但我很想知道是否可以在 TinyMCE 中处理短代码.

谢谢！

解决方案

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

 class spot_shortcodes {函数 spot_shortcodes(){add_action('init', array(&$this, 'init'));}函数初始化(){//在文本小部件中启用短代码add_filter('widget_text', 'do_shortcode');//修复大型帖子，http://core.trac.wordpress.org/ticket/8553@ini_set('pcre.backtrack_limit', 500000);//按钮控制的初始化过程add_filter('tiny_mce_version', 'my_refresh_mce');//仅在 Rich Editor 模式下添加if ( get_user_option('rich_editing') == 'true') {add_filter('mce_buttons_3', array(&$this, 'register_highlight_button'));}}//将你的按钮插件 js 代码添加到 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 );函数 add_youtube_button() {//如果当前用户没有权限，不要费心去做这些事情if (!current_user_can('edit_posts') && !current_user_can('edit_pages'))返回;//仅在 Rich Editor 模式下添加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'));}}//将您的按钮注册到 tinyMCE 仪表板的功能功能 register_highlight_button($buttons) {array_push($buttons, "|", 'highlight_button');返回 $buttons;}函数 add_youtube_tinymce_plugin($plugin_array) {//您的图标图像(highlight.png) 将显示在 tinyMCE 仪表板中$plugin_array['highlight'] = SPOT_TINYMCE_URL .'/icons-lib-custom.js';返回 $plugin_array;}}//课程结束//最后从你的按钮创建一个对象$spot_shortcodes = new spot_shortcodes();

我们的高亮按钮选项的js代码制作一个dot js文件，将以下代码放入tinyMCE插件目录下

//不要忘记更改路径tinymce.create('tinymce.plugins.highlight', {//根据控件的 id 创建控件实例.//我们按钮的 id 是 "highlight_button"创建控制:功能(ID，controlManageradel){if (id == 'highlight_button') {//创建按钮var button = controlManageradel.createButton('highlight', {title : '添加高亮文本',//按钮的标题image :spotShortcodes.plugin_folder +"/tinymce/images/highlight.png",//按钮图片的路径点击:函数(){//触发thickhighlightvar width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ?720:宽度；W = W - 80;H = H - 84；tb_show( '插入文本框简码', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=highlight-form' );}});返回按钮；}返回空；}});//注册插件.不要错过这一步！！！tinymce.PluginManager.add('highlight', tinymce.plugins.highlight);//当 DOM 准备好时执行jQuery(函数(){//创建一个每次点击按钮时显示的表单//你应该使用 AJAX 而不是像这样的直接 html 代码来实现这一点var form = jQuery('<div id="highlight-form"><table id="highlight-table" class="form-table" style="text-align: left">\\\\<th><label class="title" for="highlight-bg">高亮颜色</label></th>\<td><select name="bg" id="highlight-bg">\<option value="#f02d33">红色</option>\<option value="#b6bbbd">灰色</option>\<option value="#3e3c3c">Darkgrey</option>\<option value="#99cc33">浅绿色</option>\<option value="#6c8c2d">深绿色</option>\<option value="#0f5ac6">蓝色</option>\<option value="#3cbcf7">青色</option>\<option value="#9219f8">紫色</option>\<option value="#fcc016">黄色</option>\<option value="#f65e0e">橙色</option>\</选择><br/>\<div class="info"><small>选择框类型.</small></div></td>\</tr>\\<th><label class="title" for="highlight-contet">内容</label></th>\<td><textarea rows="7"\ cols="45"name="content" id="highlight-content">hightlight text</textarea>\<br/>\<div><small>此文本显示在框中.&​​lt;/small></div></td>\</tr>\</表>\<p class="提交">\<input type="button" id="highlight-submit" class="button-primary" value="Insert shortcode" name="submit" style=" margin: 10px 150px 50px; float:left;"/>\</p>\

');var table = form.find('table');form.appendTo('body').hide();//处理提交按钮的点击事件form.find('#highlight-submit').click(function(){//定义选项及其默认值//再次强调，这不是最优雅的方式//但是，这还是完成了工作变量选项 = {'bg' : '#f02d33','content': '高亮文本',};var 简码 = '[突出显示 ';for(选项中的变量索引){var value = table.find('#highlight-' + index).val();//仅当属性与默认值不同时才将属性附加到简码if ( value !== options[index] & index !== 'content')简码 += ' ' + 索引 + '="' + 值 + '"';}简码 += ']'+ 值 + '[/highlight]'//将短代码插入到活动编辑器中tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);//关闭Thickhighlighttb_remove();});});

希望对您有所帮助，如果您需要更多解释，请给我反馈，谢谢.

I've written a shortcode and its functioning like it should. Now the hard part:

I would like to show the user a preview already in the tinyMCE editor. Loading CSS in the editor is not a problem for me, but i would love to know if it is possible to already process the shortcode within TinyMCE.

Thanks!

解决方案

Let the code talk: I'll put a code to add a visual icon for highlight content word(s) shortcode, and you can then implement any other shortcode you want with the same logic,

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

Our js code for the highlight button option make an dot js file put the followin code in it and put it in the tinyMCE plugin directory

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

I hope this help, give me you feedback if you want any more explanation, thanks.

这篇关于tinyMCE 中的 Wordpress 短代码预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！