2009-12-10 3 views
10

ausgewählt Wraps ich derzeit TinyMCE bin mit und möchte eine benutzerdefinierte Schaltfläche hinzufügen, die wie folgt funktioniert:TinyMCE - Wie eine Schaltfläche hinzufügen, den Text mit einem Tag

  1. Benutzer Highlights Text im Text-editior
  2. Benutzer klickt auf die benutzerdefinierte Schaltfläche X
  3. Der Text (Hund zu Fuß) mit einem Tag (Hund zu Fuß) gewickelt ist

Irgendwelche Ideen auf, wenn dies getan werden kann? Ich habe herausgefunden, wie eine benutzerdefinierte Schaltfläche Text injiziert zu machen, aber nicht Text wickelt ... Hier ist der aktuelle Code:

// Add a custom button 
ed.addButton('mybutton', { 
    title : 'My button', 
    'class' : 'MyCoolBtn', 
    image : 'MyCoolBtn.png', 
    onclick : function() { 
     // Add you own code to execute something on click 
     ed.focus(); 
     ed.selection.setContent('<strong>Hello world!</strong>'); 
    } 
}); 

Dank!

Antwort

27
ed.addButton('mybutton', { 
    title: 'My button', 
    class: 'MyCoolBtn', 
    image: 'MyCoolBtn.png', 
    onclick: function() { 
    // Add your own code to execute something on click 
    ed.focus(); 
    ed.selection.setContent('<tag>' + ed.selection.getContent() + '</tag>'); 
    } 
}); 
+0

Eine Frage @Warrior, warum brauchen Sie die 'ed.focus();'? Danke – tif

+2

Laut der TinyMCE API Dokumentation unter http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.focus lautet der Zweck dieses Aufrufs: "setze diesen Editor als activeEditor in die tinymce collection. es wird auch DOM focus in den Editor stellen. " –

5

Eine bessere Möglichkeit, dies zu erreichen ist (1) eine schnelle Überprüfung durchführt die Auswahl um sicherzustellen, dass nicht leer ist, dann (2) die execCommand() Methode.

Die Verwendung von execCommand() bedeutet, dass die Aktion rückgängig gemacht werden kann. @ Warriors Antwort verwendet setContent(), die nicht rückgängig gemacht werden kann.

ed.addButton('mybutton', { 
    title: 'My button', 
    class: 'MyCoolBtn', 
    image: 'MyCoolBtn.png', 
    onclick: function() { 
    ed.focus(); 
    var text = ed.selection.getContent({'format': 'html'}); 
    if(text && text.length > 0) { 
     ed.execCommand('mceInsertContent', false, '<tag>'+text+'</tag>'); 
    } 
    } 
}); 
+1

Außer es sollte 'mceReplaceContent' sein. Irgendwelche Ideen, wie man es danach auswählt? –