javascript - 如果contentedittable = false，如何更改内容的样式？

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

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

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

有人有主意吗？

我使用jquery-ui创建对话框。
这是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>

这是对话框html-page：

<body>
<div id="container">
        <div>
            <form id="MenuTop">
                <span class="selectMenuIndicator">Formatvorlage:</span>
                <select id="selFormatvorlagen">
                    <option value="Black">Black</option>
                    <option value="my own formatpattern">my own formatpattern</option>
                </select>
                <input class="MenuButton" id="btnNeu" type= "Button" value="Neu">
                <input class="MenuButton" id="btnUmbenennen" type= "Button" value="Umbenennen">
                <input class="MenuButton" id="btnLöschen" type="Button" value="Löschen">
            </form>
            <form id="MenuBottom">
                <span class="selectMenuIndicator">Tastenkombination ( Alt + ):</span>
                <select name="selTastenkombination" id="selTastenkombination">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="0">0</option>
                </select>
            </form>
        </div>
</div>

<textarea id="txtFormatvorlage" rows="5" style="box-sizing: border-box; width: 100%; height: 100%">sample text</textarea>

<!--Eingabe des Formatvorlagennamens-->
<div id="NewFormatDialog" title="Neue Formatvorlage anlegen">
    <form>
        <fieldset>
            <label for="NameFormatpattern">Bitte geben Sie den Namen der neuen Formatvorlage ein.</label>
            <input type="text" name="NameFormatpattern" id="NameFormatpattern" class="inputTextDialog">
        </fieldset>
    </form>
</div>

<!--Eingabe des Formatvorlagennamens-->
<div id="ChangeFormatNameDialog" title="Formatvorlage umbenennen">
    <form>
        <fieldset>
            <label for="ChangeFormatName">Bitte geben Sie den neuen Namen für die Formatvorlage ein.</label>
            <input type="text" name="ChangeFormatName" id="ChangeFormatName" class="inputTextDialog">
        </fieldset>
    </form>
</div>

<!--Eingabe des Formatvorlagennamens-->
<div id="DeleteFormatDialog" title="KORAKTOR">
    <label>Wollen sie die Formatvorlage wirklich löschen?</label>
</div>

抱歉，我没有足够的声誉来发布图片，因此很难改版。 ：/
我希望有人能为我解决。 :)
谢谢菲利克斯

编辑：是的，我已经建立了一个解决方案：
有两个命令“ 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');
});

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

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

最佳答案

更改样式时，请关闭只读，应用样式，然后重新打开。这将需要毫秒。