tinymce - tinyMCE 中的 Wordpress 简码预览

Question

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

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

谢谢！

Answer 1

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

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

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