TinyMCE - Wie eine Schaltfläche hinzufügen, den Text mit einem Tag

Question

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

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!

Answer 1

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>'); 
    } 
}); 

Answer 2

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>'); 
    } 
    } 
});