Rozwiązanie Bernharda nie działa dla mnie w TinyMCE 4.1.7, ale kod poniżej nie. Zawarłem trochę kontekstu, aby, mam nadzieję, uczynić to możliwie jak najbardziej zrozumiałym.
To jest z budowniczego strony. Użytkownik otwiera edytor, klikając prawym przyciskiem myszy DIV, który chce edytować i wybierając "tekst" z menu kontekstowego. Spowoduje to uruchomienie tinymce.init, który umieści wbudowany panel edycji w DIV. Kontrola pojawia się tutaj po dodaniu edytora.
Pierwszy editor.on kładzie się w oddzwonieniu, aby złapać koniec tworzenia edytora i w tym momencie uruchamia fokus w celu wyświetlenia edytora. Drugi editor.on przejmuje zmianę na rozpiętość wewnątrz li i dokonuje aktualizacji do li. Trzeci editor.on zatrzymuje zamknięcie edytora.
/************************************************************************************/
/* TinyMCE Events */
/************************************************************************************/
tinymce.on('AddEditor', function(e) {
// Once editor has been added show it by firing 'focusin' instead of waiting for a click
e.editor.on('NodeChange',function(e) {
e.target.fire('focusin'); // show the editor
});
// Update parent <li> to match a font-size or font-family change in text
e.editor.on('ExecCommand',function(e) {
var cmd = e.command;
if (cmd === "FontSize" || cmd === "FontName") {
var val = e.value;
var node = e.target.selection.getNode(); // editor in this event object is at target
var nodeParent = node.parentNode;
if (node.nodeName === "SPAN" && nodeParent.nodeName === "LI") {
// We're changing the style of a <span> that's inside an <li>.
// Change the <li> to match the new font-size or font-family.
// (B, U, and forecolor buttons don't come here so we can't update li here for those)
nodeParent$ = $(nodeParent);
nodeParent$.removeAttr('data-mce-style');
if(cmd === "FontSize") {
nodeParent$.css('font-size',val);
}
if(cmd === "FontName") {
nodeParent$.css('font-family',val);
}
}
}
});
// When editor is removed (by clicking in a blank area of the inline panel)
// restore draggability to the DIV (had to kill before tinymce.init because draggability
// and contenteditable don't work together).
e.editor.on('RemoveEditor',function(e) {
g.currentElement$.attr('editor_state', "off")
.draggable('enable') // make DIV draggable again
.removeClass('textCursor'); // give DIV back its pointer cursor
});
});
Tak. Myślę, że to, czego szukam, to gdzie i jak to zrobić. – lambmj
Jeśli jednak tworzysz coś, czego użytkownik końcowy nie miałby dostępu do części HTML, to nie możesz wykonać tej metody. – Dez