WordPress 3.9 + tinymce 4 Tuning: ajout de styles, boutons, polices, menus déroulants et fenêtres contextuelles
Fonction _ exists (‘wpex MCE text Size’) {fonction wpex MCE text size ($inittarray) {$inittarray [‘fontsize formats’] = \
Si (! Function _ exists (‘wpex MCE Google fonts Array’) {Function wpex MCE Google fonts array ($inittarray) {$inittarray [‘font formats’] = ‘side = side; Andale mono = andale Mono, temps; Arial = Arial, Helvetica, sans doublure; Arial Black = Arial Black, avant; Historique du livre = historique du livre, Palatino; Bande dessinée Sans MS = bande dessinée Sans MS, sans serif; Courier New = courier New, courier; Géorgie = Géorgie, baratino; Helvetica = Helvetica; Impact = Impact, Chicago; Symbole = symbole; Tahoma = Tahoma, Arial, Helvetica, sans serif; Terminal = terminal, Monk; Nouvelle ère romaine = nouvelle ère fictive; Stoper ms = stoper MS, Geneva; Verdana = Verdana, Genève; Webdings = Webdings; Wingdings = wingdings, Zapf dingbats’; Renvoie $inittarray;}}} Ajouter un filtre (‘Tiny _ MCE before init’, ‘wpex MCE Google fonts Array’); Remarquez comment j’ai ajouté \
Le code suivant!
Si (! Function _ exists (‘wpex MCE Google fonts styles’) {Function wpex MCE Google fonts styles () {$font URL =), ajoutez un script Google pour l’éditeur http:\/\/fonts.googleapis.com\/css?family=Lato:300 , 400700’; Ajouter un style d’éditeur U (Str _ replace (‘,’% 2C ‘, $font URL);}} Ajouter _ action (‘init’, ‘wpex MCE Google font style’); Activez le menu déroulant format (style) et ajoutez un nouveau style. Vous vous souvenez du menu déroulant style dans WP 3.8? C’était génial! Vous pouvez l’utiliser pour ajouter des classes intéressantes à utiliser dans l’éditeur Post (je l’utilise sur wpexplorer, en fait pour les boutons, les gammes de couleurs, les boîtes, etc.). Dans WP 3.9, vous pouvez encore ajouter un style, mais il a été renommé format dans le nouveau tinymce 4.0, de sorte qu’il fonctionne légèrement différemment. Voici un exemple de la façon d’activer le menu déroulant format et d’ajouter de nouveaux éléments.
Si (! Function _ exists (‘wpex styles dropdown’) {Function wpex styles dropdown ($Settings) {\/ \/ create a new style Array $New styles = array (array (‘title’ = > wpex ‘),’ items’), ‘a
JS’; Retourner $plugin _ Array;} \/ \/ Dans la fonction d’édition my _ Register MCE button ($button) {Array push ($button, ‘My MCE button’); return $button;} Code JS – ajoutez un bouton au MCE ce code JS va au fichier JS enregistré dans le fragment de code de la fonction \
(Function () {tinymce.pluginmanager.add (‘My _ MCE button’, Function (Editor, URL) {editor.addbutton (‘My MCE button’, {Text: ‘new button’, icon: false, onclick: function () {editor.insertcontent (‘wpexplorer.com is awesome!);};}) (); Ajouter une icône personnalisée au nouveau bouton MCE ci – dessus je vous ai montré comment ajouter un nouveau bouton qui apparaîtra dans l’éditeur comme \
Fonctions my _ shortcodes MCE CSS () {WP enqueue style (‘simple shortcodes – TC’, plugins URL (‘\/ CSS \/ My MCE style.css’, \ \ file u));} Ajouter _ action (‘admin enqueue scripts’,’ My shortcodes MCE CSS’); Personnaliser CSS il s’agit d’un CSS qui ajoute une feuille de style précédemment chargée. I. my MCE icon {background image: url (\
(fonction () {tinymce.plugin
Manager Add (‘My _ MCE button’, Function (Editor, URL) {editor.addbutton (‘My MCE button’, {icon: ‘My MCE icon’, onclick: function () {editor.insertcontent (‘wpexplorer.com is awesome!);}}}};}) (); Ajouter un bouton de sous – menu Comme je l’ai déjà dit, c’est une mauvaise idée (et c’est vrai) d’ajouter beaucoup de nouvelles icônes à la barre tinymce, alors vérifiez le code ci – dessous pour voir comment modifier Javascript pour afficher un sous – menu de boutons personnalisés. Si vous voulez voir son application pratique, consultez ma vidéo de code raccourci simple. (Function () {tinymce.pluginmanager.add (‘My _ MCE button’, Function (Editor, URL) {editor.addbutton (‘My MCE button’, {Text: ‘Sample dropdown’, icon: false, type: ‘menubutton’, menu: ‘text:’ item1 ‘, onclick: function () {editor.insertcontent (‘ wpexpexplorer explorer ‘), Function (Editor, URL) {editor.addbutton (‘ My MCE button ‘, {Text:’ Sample dropdown ‘, icon: false, type:’ menumenubutton ‘, menu:’ text: ‘item1’, onclick: function ()) {editor.insertcontent (.Com awesome! ‘);}, {Text: ‘Child ITEM 2’, onclick: function () {editor.insertcontent (‘wpexplorer.com is awesome!’);}}}, {Text: ‘ITEM 2’, menu: [Text: ‘subitem 1’, onclick: function () {editor.insertcontent (‘wpexplorer.com is awesome!’);}}, {texte: sous – clé 2, cliquez sur: fonction () {editor.insertcontent (‘wpexplorer.com is awesome!’);}}];}) (); Dans l’exemple ci – dessus, ajoutez une fenêtre contextuelle lorsque vous cliquez sur un bouton et vous remarquerez peut – être que chaque bouton insère simplement le texte \
Textbox ‘, name:’ textboxname ‘, Label:’ textbox ‘, Value:’ 30 ‘}, {type:’ textbox ‘, name:’ multiname ‘, Label:’ multiline text box ‘, Value:’ you can say of Things in here ‘, multiline: True, minwidth: 300, minheight: 100} {type: {type: ‘listbox’, name: ‘listboxname’, Label: ‘listbox’, Value: [{Text: ‘option 1’, Value: ‘1}, {Text:’ option 1 ‘, Value:’ 1}, {Text: ‘option 2’, Value: ‘2}, {Text:’ option 3 ‘, Value:’ 3}}}}}}, onsubmit: Functions (e) {editor.insert content (‘[Random _ Short Code textboxbox =’ \ \ u textboxboxboxbox = ‘+ e.data.textboxname + + \