如果contentedittable = false，我该如何更改内容的样式？ [英] How can I change the styles of content if contentedittable = false?

问题描述

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

Hey I have created a plugin that opens a new dialog (an extra HTML-page). With this dialog the user have the opportunity to create his own format pattern.

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

What would I like to have? I need a tinymce editor with a readonly textarea (no problem). But the user must be able to select formats like bold, italic, underline, fontsize, fontfamily, ...

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

There is a sample text in the textarea which displays the formatting. And here is the problem. I can set the formats if the textarea is readonly.

任何人有想法吗？

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

I use jquery-ui to create the dialog. Here is the javascript block :

<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：

And here is the dialog 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>

抱歉，我没有声望发布图片很难解释。 ：/
我希望任何人都有我的解决方案。 :)
谢谢Felix

Sorry I have not enought reputation to post pictures and it is hard to explane. :/ I hope anyone have a solution for me. :) Thanks Felix

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

Yeah I have founded a solution: There are two commands "BeforeExecCommand" and "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之前，我必须选择全部。但是这个命令不起作用：

But now I have an other problem. Before I can change the fontstyle I have to select all. But this command doesn`t work:

editor.execCommand('selectAll');

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

如何选择全部更改fontstyle？

How can I select all to change the fontstyle?

编辑2：命令selectAll选错了。此代码是解决方案：

The command "selectAll" selected wrong. This code is the solution:

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

推荐答案

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

When making a style change, turn off readonly, apply the style, and turn it back on. It will take milliseconds.

这篇关于如果contentedittable = false，我该如何更改内容的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！