Jag bloggar numera på http://blog.dileno.com ».

Prenumerera på RSS

Skapa en modifierad knapp i TinyMCE

TinyMCE är en texteditor som är enkel att integrera in i webbapplikationer. Det finns mycket goda möjligheter till att anpassa editorn efter eget tycke. I detta inlägg visar jag dig hur du skapar en knapp för att infoga specifik kod för markerad text i TinyMCE.

Jag ville ha möjligheten att markera text i ett formulärfält, trycka på en knapp i TinyMCE-fältet och förändra den markerade texten. I mitt fall ville jag kunna lägga in den markerade texten i <code>.

Använd avancerat tema och setup-alternativet

TinyMCE är väldokumenterat och jag hittade kod för att skapa en modiferad knapp. Det som behövs för att kunna skapa en egen knapp i TinyMCE är att i tinyMCE.init använda sig av avancerat tema och setup-alternativet, så här:

<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "advanced",
theme_advanced_buttons1: "codebtn,|,bold,italic,underline,strikethrough,|,bullist,numlist,undo,redo,link,unlink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",

setup: function(ed) {
ed.addButton("codebtn", {
title: "Code sample",
image: "js/tiny_mce/themes/advanced/img/code.png",
onclick: function() {
ed.selection.setContent("<code>" + ed.selection.getContent() + "</code>");
}
});
}
});
</script>

Det jag gör i koden ovan är att:

  • skapa en knapp som heter codebtn
  • ge knappen ett antal egenskaper, såsom en titel, en ikon och en onclick-händelse
  • lägga till knappen i fältet theme_advanced_buttons1, så att knappen syns i TinyMCE-fältet

Metoder i TinyMCE och mitt resultat

I onclick-händelsen så fick jag leta i dokumentationen och hittade en sida med alla metoder i TinyMCE. Jag använde mig av metoden getContent för att lägga in markerad text i en <code>-tagg.

Resultatet av min modifierade knapp:

Exempel på en modifierad knapp i TinyMCE

Mer om TinyMCE

Du kan ladda ner och läsa mer om TinyMCE på hemsidan: http://tinymce.moxiecode.com/.

Till sidhuvudet

Clicky Web Analytics