Xem trước mã ngắn Wordpress trong tinyMCE

Question

Tôi đã viết một shortcode và hoạt động của nó như mong muốn. Bây giờ phần khó khăn:

Tôi muốn hiển thị cho người dùng bản xem trước đã có trong trình chỉnh sửa tinyMCE. Việc tải CSS trong trình chỉnh sửa không phải là vấn đề đối với tôi, nhưng tôi rất muốn biết liệu có thể xử lý shortcode trong TinyMCE hay không.

Cảm ơn!

Answer 1

Hãy nói chuyện mã: tôi sẽ đặt một mã để thêm một biểu tượng trực quan cho từ nội dung nổi bật (s) shortcode, và sau đó bạn có thể thực hiện bất kỳ shortcode khác mà bạn muốn với cùng một 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(); 

chúng tôi js mã cho nút nhấn tùy chọn thực hiện một chấm js tập tin đặt mã followin trong đó và đặt nó trong thư mục plugin 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(); 
    }); 
}); 

tôi hy vọng điều này giúp đỡ, cho tôi bạn phản hồi nếu bạn muốn bất kỳ lời giải thích thêm, cảm ơn .