tinyMCE的Wordpress短代碼預覽

Question

我已經寫了一個短代碼，它的功能就像它應該。現在最困難的部分：

我想在tinyMCE編輯器中向用戶顯示預覽。在編輯器中加載CSS對我來說不是問題，但我很想知道是否可以在TinyMCE中處理短代碼。

謝謝！

Answer 1

讓代碼說話： 我把代碼添加的亮點內容字（S）簡碼的可視化圖標，然後你就可以實現你想用同樣的邏輯其他任何短碼，

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

我希望這種幫助，給我你的反饋，如果你想要的任何更多解釋，謝謝。