Skip to content

Knoppen toevoegen aan TinyMCE Tekstbewerker

In dit artikel leggen we uit hoe je in WordPress knoppen op maat aan de visuele tekstbewerker of de TinyMCE Text Editor kan toevoegen. Soms werk je met een bepaalde plugin die gebruik maakt van shortcodes, maar die geen knoppen voor je genereert in de TinyMCE menubalk. Shortcodes die je wel vaak gebruikt. Zou het niet mooi zijn als je deze op eenvoudige wijze zelf zou kunnen toevoegen?

Mocht je alleen extra knoppen voor het stijlen van tekst nodig hebben, scroll dan naar beneden naar de voetnoot. Dit is alleen voor shortcode knoppen!

Creatie miniplugin

Om dit voor elkaar te krijgen zul je een miniplugin moeten creëren. Dit is echter al gedaan door Ilovecolors. Werkelijk een geweldige coder! De plugin gecreëerd door deze Argentijnse developer kan hier worden gedownload. Kwestie van naar beneden scrollen, en op de knop klikken om de plugin down te loaden. Dan hebben we de basis voor het maken van extra knoppen voor het menu. De plugin bestaat uit twee bestanden:

  • ilc_syntax_buttons.php
  • ilcsyntax.js

en een aantal png voor de visuele weergave van de knoppen.

Plugin in het kort

Deze twee bestanden  voegen samen shortags toe voor de syntaxhighligher na activatie van deze plugin. Het eerste bestand registreert de nieuwe knoppen in de visuele editor en weergeeft ze als de gebruiker recht heeft op gebruik van de editor. Het JavaScript is een script gebaseerd op de Moxicode TinyMCE voorbeeldplugin die werking van de knoppen in de TinyMCE Editor zelf regelt.

Toevoegen shortcodes naar keuze

Nu wil je andere shortcodes dan die er nu worden geladen. Je wilt bijvoorbeeld shortcodes voor de XVE XHTML Video Embed plugin waarmee je gemakkelijk externe video’s kan plaatsen op je eigen website. We zullen twee knoppen toevoegen om hiermee YouTube en Vime shortcode toe toe voegen. Dan zal je in het javascript (dnt-tinymce.js in onze aangepaste plugin) deze code moeten plaatsen:

ed.addCommand('mcedntYT', function(){
 dnt_sel_content = tinyMCE.activeEditor.selection.getContent();
 tinyMCE.activeEditor.selection.setContent('youtube' + dnt_sel_content + '/youtube');
 });

 ed.addButton('dntYT', {
 title: 'dnttinymce.yt',
 image: url + '/youtube.png',
 cmd: 'mcedntYT'
 });
 ed.addShortcut('alt+ctrl+t', ed.getLang('dnttinymce.yt'), 'mcedntYT');

 ed.addCommand('mcedntVM', function(){ //command for Vimeo Button
 dnt_sel_content = tinyMCE.activeEditor.selection.getContent();
 tinyMCE.activeEditor.selection.setContent('vimeo' + dnt_sel_content + '/vimeo'); //tell what to add
 });

 ed.addButton('dntVM', {
 title: 'dnttinymce.vm',
 image: url + '/vimeo.png', // load png for Vimeo
 cmd: 'mcedntVM'
 });
 ed.addShortcut('alt+ctrl+t', ed.getLang('dnttinymce.vm'), 'mcedntVM'); // add shortcode

De [] om youtube en vimeo in de snippet zijn verwijderd omdat ze om de een of andere manier geparst werden.

En in het hoofd phpbestand – dnt-tinymce.php op regel 23 in dit geval:

function mce_buttons($buttons) {
 array_push($buttons, "separator", "dntPHP", "dntCSS", "dntHTML", "dntYT", "dntVM", "dntJS" );
 return $buttons;
 }

waarmee je de nieuwe knoppen laadt in de WordPress TinyMCE menubalk.

Als laatste moet je in het huidige en.js taalbestand – nog geen ,nl aangemaakt – de volgende regels toevoegen:

yt : "Wrap with [youtube]",
 vm : "Wrap with [youtube]",

om zo de hovertekst aan de knoppen toe te voegen.

Creatie nieuwe pngs

Het enige wat je nu nog mist is de knoppen zelf. Ik heb er een voor Vimeo video tags en een voor YouTube tags aangemaakt.Hier een screenshot:

Maar dat kun je zelf ook zo doen. Gewoon een kwestie van een bestaande uit de plugin van de Argentijn laden in PhotoShop en een nieuwe layer eroverheen zetten. PS Hieronder straks de gehele plugin down te loaden als bestand.

Eindresultaat

Het eindresultaat is dat je nu ook een Youtube -en Vimeoshorttag in je TinyMCE menu zul zien – zoals in het screenshot hierboven – waarmee je de tags makkelijk kan toevoegen en met behulp van de XVE plugin videos kan embedded. Natuurlijk zijn er nog meer videoformaten. Wat houd je tegen! Maak er gerust meer aan!

Bestanden

Hier de nieuwe plugin. Downloaden, unzippen, uploaden naar wp-content/plugins en installeren. Er zitten hier ook een aantal knoppen van Ilovecolors. Wil je deze niet gebruiken, dan zul je die moeten uitcommenten in de code of mijn hulp hiervoor inschakelen.

Voetnoot

Mocht je graag andere knoppen aan de tinymce menubalk willen toevoegen, maar knoppen om je tekst te stylen, dan raden we je aan de TinyMCE Advanced plugin te installeren. Daarnmee kunnen gemakkelijk nieuwe knoppen voor dit soort zaken worden toegevoegd en zelfs via een .css op maat worden gecreëerd.

Bronnen

http://www.ilovecolors.com.ar/tinymce-plugin-wordpress/
De website van de geweldige auteur waarop deze plugin is gebaseerd.

http://codex.wordpress.org/TinyMCE_Custom_Buttons
WordPress uitleg over het koppelen van een TinyMCE plugin aan de WordPress de Dashboard c.q, TinyMCE Editor

http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x
Uitleg door de makers van de TinyMCE zelf

Gepubliceerd door Doede op zaterdag 9 oktober 2010
Nog geen reacties

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*