tinyMCE

Question

में वर्डप्रेस शोर्ट पूर्वावलोकन, मैंने एक शोर्ट लिखा है और इसकी कार्यप्रणाली इसे चाहिए। अब कठिन हिस्सा:

मैं उपयोगकर्ता को पहले से ही tinyMCE संपादक में एक पूर्वावलोकन दिखाना चाहता हूं। संपादक में सीएसएस लोड करना मेरे लिए कोई समस्या नहीं है, लेकिन मुझे यह जानना अच्छा लगेगा कि 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 फ़ाइल उस में followin कोड डाल बनाने के लिए और 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(); 
    }); 
}); 

मैं इस मदद आशा में रख, मैं आपको प्रतिक्रिया देने से आप किसी भी चाहते हैं अधिक स्पष्टीकरण, धन्यवाद ।