嘿，我创建了一个可以打开新对话框（一个额外的 HTML 页面）的插件。
通过此对话框，用户有机会创建自己的格式模式。
我想要什么？
我需要一个带有只读文本区域的tinymce编辑器（没问题）。但用户必须能够选择粗体、斜体、下划线、字体大小、字体系列等格式。
文本区域中有一个显示格式的示例文本。
问题就在这里。
如果文本区域是只读的，我可以设置格式。
有人有主意吗？
我使用 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 页面：
<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>
抱歉，我没有足够的声誉来发布图片，这很难解释。 :/
我希望有人能为我找到解决方案。 :)
谢谢菲利克斯
EDIT:是的，我已经找到了一个解决方案：
有两个命令“BeforeExecCommand”和“ExecCommand”http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.BeforeExecCommand http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.BeforeExecCommand
http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.ExecCommand 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');
}
});
