Come aggiungere un pulsante shortcode all'editor TinyMCE?
-
-
Aggiungi una schermata del risultato che desideri ottenere.Non è chiaro cosa vuoi.Add a screen shot of the result you want to get. It is not clear what you want.
- 0
- 2012-11-13
- fuxia
-
Penso chetu voglia creare unplugin che aggiunga unpulsante TinyMCE all'editor cheinserisce uno shortcode di WordPress,giusto?I think you want to create a plugin that adds a TinyMCE button to the editor that inserts a WordPress shortcode, right?
- 0
- 2012-11-13
- developdaly
-
2 risposta
- voti
-
- 2012-11-13
Per aggiungereilnostropulsante all'editor TinyMCE dobbiamofare diverse cose:
- Aggiungiilnostropulsante allabarra degli strumenti
- Registra unplug-in TinyMCE
- Crea quelplug-in TinyMCE che dice a TinyMCE cosafare quando sifa clic sulnostropulsante.
Passaggi 1e 2
In questipassaggi registriamoilnostroplug-in TinyMCE che risiedein unfilejavascriptin
'path/to/shortcode.js'
(vediwpse72394_register_tinymce_plugin()
di seguito )// init process for registering our button add_action('init', 'wpse72394_shortcode_button_init'); function wpse72394_shortcode_button_init() { //Abort early if the user will never see TinyMCE if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true') return; //Add a callback to regiser our tinymce plugin add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); // Add a callback to add our button to the TinyMCE toolbar add_filter('mce_buttons', 'wpse72394_add_tinymce_button'); } //This callback registers our plug-in function wpse72394_register_tinymce_plugin($plugin_array) { $plugin_array['wpse72394_button'] = 'path/to/shortcode.js'; return $plugin_array; } //This callback adds our button to the toolbar function wpse72394_add_tinymce_button($buttons) { //Add the button ID to the $button array $buttons[] = "wpse72394_button"; return $buttons; }
Passaggio 3
Ora dobbiamo creareilnostroplug-in TinyMCE. Questo andràin unfile
'path/to/shortcode.js'
(come specificatonei primipassaggi).jQuery(document).ready(function($) { tinymce.create('tinymce.plugins.wpse72394_plugin', { init : function(ed, url) { // Register command for when button is clicked ed.addCommand('wpse72394_insert_shortcode', function() { selected = tinyMCE.activeEditor.selection.getContent(); if( selected ){ //If text is selected when button is clicked //Wrap shortcode around it. content = '[shortcode]'+selected+'[/shortcode]'; }else{ content = '[shortcode]'; } tinymce.execCommand('mceInsertContent', false, content); }); // Register buttons - trigger above command when clicked ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' }); }, }); // Register our TinyMCE plugin // first parameter is the button ID1 // second parameter must match the first parameter of the tinymce.create() function above tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin); });
To add our button to the TinyMCE editor we need to do several things:
- Add our button to the toolbar
- Register a TinyMCE plugin
- Create that TinyMCE plug-in which tells TinyMCE what to do when our button is clicked.
Steps #1 and #2
In these steps we register our TinyMCE plug-in which will live inside a javascript file at
'path/to/shortcode.js'
(seewpse72394_register_tinymce_plugin()
below)// init process for registering our button add_action('init', 'wpse72394_shortcode_button_init'); function wpse72394_shortcode_button_init() { //Abort early if the user will never see TinyMCE if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true') return; //Add a callback to regiser our tinymce plugin add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); // Add a callback to add our button to the TinyMCE toolbar add_filter('mce_buttons', 'wpse72394_add_tinymce_button'); } //This callback registers our plug-in function wpse72394_register_tinymce_plugin($plugin_array) { $plugin_array['wpse72394_button'] = 'path/to/shortcode.js'; return $plugin_array; } //This callback adds our button to the toolbar function wpse72394_add_tinymce_button($buttons) { //Add the button ID to the $button array $buttons[] = "wpse72394_button"; return $buttons; }
Step #3
Now we need to create our TinyMCE plug-in. This will go in a file
'path/to/shortcode.js'
(as specified in the early steps).jQuery(document).ready(function($) { tinymce.create('tinymce.plugins.wpse72394_plugin', { init : function(ed, url) { // Register command for when button is clicked ed.addCommand('wpse72394_insert_shortcode', function() { selected = tinyMCE.activeEditor.selection.getContent(); if( selected ){ //If text is selected when button is clicked //Wrap shortcode around it. content = '[shortcode]'+selected+'[/shortcode]'; }else{ content = '[shortcode]'; } tinymce.execCommand('mceInsertContent', false, content); }); // Register buttons - trigger above command when clicked ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' }); }, }); // Register our TinyMCE plugin // first parameter is the button ID1 // second parameter must match the first parameter of the tinymce.create() function above tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin); });
-
Nelpassaggio 1,cambiare l'hook `init` con l'hook` admin_init`potrebbe anche salvare qualche leggeraelaborazioneextra sulfront-end.In step 1, changing the `init` hook to the `admin_init` hook could also save some slight extra processing on the front-end.
- 2
- 2016-11-16
- Tim Malone
-
Dipende,puoi avere TinyMCE anche sulfront-end.Ma sì,se questo è solo lato amministratore,sarebbepreferibile "admin_init".It depends, you can have TinyMCE on the front-end too. But yes, if this is admin-side only, `admin_init` would be preferable.
- 0
- 2016-11-17
- Stephen Harris
-
Quindi `shortcode.js` deveessereposizionato qui` wp-includes/js/tinymce/js/shortcode.js`e ancheilpulsantenon haiconaSo `shortcode.js` needs to be placed here `wp-includes/js/tinymce/js/shortcode.js` and also button has no icon
- 0
- 2020-08-08
- Jadeye
-
- 2012-11-13
C'ètroppopermettere l'intera risposta qui,quindi controlla questaguida: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/
Devi creare unfile Javascript che agisca dalpulsante che registritramite WordPress cheinserisceilpulsante TinyMCEnell'editor.
There's too much to put the whole answer here so checkout this guide: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/
You have to create a Javascript file that takes action from the button you register through WordPress that inserts the TinyMCE button into the editor.
-
Utilizza query_posts quindiforsenon èilmiglioresempio a cui collegarsi.Uses query_posts so maybe not the best example to link to.
- 4
- 2014-07-11
- Brad Dalton
Come creare un'icona dipluginnelpost di wordpress?Il codice che voglioinserirenel codice delplugine apparirànellabarra deipost [wp-admin/post.php].
Come questaimmagine:
Risultato: sefaccio clic sull'icona,viene automaticamente scritto
[plugin]
nel contenuto delpostin questomodo: