如果contentedittable = false，我该如何更改内容的样式？

嘿，我创建了一个打开一个新对话框（一个额外的HTML页面）的插件。 使用此对话框，用户可以创建自己的格式模式。

我想要什么？ 我需要一个带有readonly textarea的tinymce编辑器（没问题）。 但用户必须能够选择粗体，斜体，下划线，字体大小，fontfamily等格式…

textarea中有一个示例文本，显示格式。 这就是问题所在。 如果textarea是只读的，我可以设置格式。

有人有想法吗？

我使用jquery-ui来创建对话框。 这是javascript块：

 //Wandelt die Auswahlbutton(Formatvorlage & Tastenkombination) in Selectmenüs um $(function () { $('#selFormatvorlagen').selectmenu(); $('#selTastenkombination').selectmenu(); }); //Button Neu $(function () { $("#NewFormatDialog").dialog({ autoOpen: false, height: 150, width: 400, resizable: false, modal: true, buttons: { "OK": function () { var content = $('#NameFormatpattern').val(); //Einfügen eines neuen Elements $("" + content + "").appendTo("#selFormatvorlagen"); $("#selFormatvorlagen").selectmenu("refresh"); $('#NameFormatpattern').val(''); $(this).dialog('close'); }, "Abbrechen": function () { $('#NameFormatpattern').val(''); $(this).dialog('close'); } }, close: function () { $('#NameFormatpattern').val(''); $(this).dialog('close'); } }); //Button Umbenennen $("#ChangeFormatNameDialog").dialog({ autoOpen: false, height: 150, width: 400, resizable: false, modal: true, buttons: { "OK": function () { var content = $("#ChangeFormatName").val(); var selectedName = $("#selFormatvorlagen option:selected").text(); $('select option:contains("' + selectedName + '")').text(content); $("#selFormatvorlagen").selectmenu("refresh"); $('#ChangeFormatName').val(''); $(this).dialog('close'); }, "Abbrechen": function () { $('#ChangeFormatName').val(''); $(this).dialog('close'); } }, close: function () { $('#ChangeFormatName').val(''); $(this).dialog('close'); } }); //Button Löschen $("#DeleteFormatDialog").dialog({ autoOpen: false, height: 150, width: 400, resizable: false, modal: true, closeText: "Close", buttons: { "Ja": function () { $('#selFormatvorlagen').find('option:selected').remove(); $("#selFormatvorlagen").selectmenu("refresh"); $(this).dialog('close'); }, "Nein": function () { $(this).dialog('close'); }, }, close: function () { $(this).dialog('close'); } }); //Öffnen der Dialoge bzw. Zuweisung der Buttons $("#btnNeu").button().on("click", function () { $("#NewFormatDialog").dialog("open"); }); $("#btnUmbenennen").button().on("click", function () { $("#ChangeFormatNameDialog").dialog("open"); }); $("#btnLöschen").button().on("click", function () { $("#DeleteFormatDialog").dialog("open"); }); });   //Initialisierung des Editors function init() { tinymce.init({ language: "de", selector: 'textarea#txtFormatvorlage', fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt", font_formats: getFontFamily(), plugins: "textcolor paste code", menubar: false, toolbar: "removeformat | fontselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright | forecolor", contextmenu: false, setup: function (editor) { //Textarea wird bei der Initialisierung auf readonly gesetzt editor.on('Init', function (ed) { editor.execCommand('SelectAll'); editor.getBody().setAttribute('contenteditable', 'false'); }); } }); } //Der Editor wird neu initialisiert function reinitialize() { try { remove("txtFormatvorlage"); init(); } catch (err) { init(); } } //Erste Initialisierung init();  

这是对话框html-page：

  
 
 
 Formatvorlage:  Black my own formatpattern     
 
 Tastenkombination ( Alt + ):  1 2 3 4 5 6 7 8 9 0  
 
 
 sample text  
 
 
 Bitte geben Sie den Namen der neuen Formatvorlage ein.  
 
 
  
 
 
 Bitte geben Sie den neuen Namen für die Formatvorlage ein.  
 
 
  
 Wollen sie die Formatvorlage wirklich löschen?  

对不起，我没有声名称发布图片，很难解释。 ：/我希望任何人都有我的解决方案。 :)谢谢菲利克斯

编辑：是的，我已经建立了一个解决方案：有两个命令“BeforeExecCommand”和“ExecCommand” http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.BeforeExecCommand http：//www.tinymce .COM / wiki.php / API4：event.tinymce.Editor.ExecCommand

这是代码：

 editor.on('Init', function (ed) { editor.getBody().setAttribute('contenteditable', 'false'); }); editor.on('BeforeExecCommand', function () { editor.getBody().setAttribute('contenteditable', 'true'); }); editor.on('ExecCommand', function () { editor.getBody().setAttribute('contenteditable', 'false'); }); 

但现在我还有另外一个问题。 在我改变fontstyle之前，我必须选择全部。 但是这个命令不起作用：

 editor.execCommand('selectAll'); editor.on('BeforeExecCommand', function () { editor.getBody().setAttribute('contenteditable', 'true'); editor.execCommand('selectAll'); }); 

如何选择全部更改fontstyle？

Edit2：命令“selectAll”选错了。 这段代码是解决方案：

 editor.on('BeforeExecCommand', function (e) { if (e.command != 'selectAll') { //Select the rigth node node = editor.dom.select('p')[0]; while (node.children.length > 0) { node = node.children[0]; } editor.selection.select(node); editor.getBody().setAttribute('contenteditable', 'true'); } }); editor.on('ExecCommand', function (e) { if (e.command != 'selectAll') { editor.selection.collapse(); editor.getBody().setAttribute('contenteditable', 'false'); } }); 

Answer 1

进行样式更改时，请关闭readonly，应用样式并重新打开。 这将需要几毫秒。