Javascript 如果contentedittable=false，如何更改内容样式？

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

我想要什么？ 我需要一个带有只读文本区的tinymce编辑器（没问题）。但是用户必须能够选择粗体、斜体、下划线、fontsize、fontfamily等格式

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

有人有主意吗

我使用jQueryUI创建对话框。 下面是javascript块：

<script>
    //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
                    $("<option value='" + content + "'>" + content + "</option>").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");
        });
    });
</script>
<script type="text/javascript">
    //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();

</script>

但现在我有另一个问题。在更改字体样式之前，我必须选择“全部”。但是这个命令不起作用：

editor.execCommand('selectAll');

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

如何选择“全部”以更改字体样式

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

---

更改样式时，请禁用“只读”，应用样式，然后将其重新启用。这将需要毫秒。

谢谢，但是我如何从粗体按钮捕捉事件，以关闭只读？啊，我发现了一些问题：如果它有效，我将向您报告：），好的，我已经测试了解决方案，但它不起作用。第一篇文章中的事件仅适用于鼠标单击事件。在第二个链接中，按键事件也不起作用。我需要一个按钮点击事件。有什么事吗？我评论中的解决方案与tinymce版本4不兼容：（还有其他解决方案吗？thx

editor.execCommand('selectAll');

editor.on('BeforeExecCommand', function () {
    editor.getBody().setAttribute('contenteditable', 'true');
    editor.execCommand('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');
      }
 });