Как заставить JQuery версию tinyMCE открывать несколько текстовых областей во всплывающих окнах при нажатии на ячейку таблицы?
Итак, я пытаюсь создать шаблон, который будет использоваться для предоставления информации для нескольких сценариев в одном формате. Для этого у меня есть настроенная таблица, которая будет отображать информацию, и когда вы нажимаете на одну из ячеек (в частности), она помещает внутренний HTML-код в текстовую область, которая появляется в модальном диалоговом окне jQuery., Затем эта текстовая область превращается в экземпляр TinyMCE для редактирования (с использованием Tiny MCE javascript версии 4.3.2). Однако, с моим текущим кодом, это работает только в первый раз. После этого, независимо от того, в какой ячейке щелкают, я получаю всплывающее окно, которое отображается пустым, хотя в нем содержится правильный HTML-код при запуске элемента проверки.
Я видел похожие вещи в предыдущих вопросах, но один из них хотел использовать jQuery только для всплывающей работы, которую я сделал, а другой не использовал версию jQuery, и код решения не работал с этой версией, но кажется, что он просто закрыл экземпляр, когда диалоговое окно было закрыто, чтобы его можно было переделать в следующую текстовую область. Кроме того, я использую пользовательский CSS для внешнего вида, но схема Start из jQuery является наиболее близкой из доступных, если вы хотите, чтобы она выглядела красиво во время устранения неполадок.
Изменить: чтобы уточнить, я не пытаюсь открыть несколько прогонов одновременно, они должны открывать по одному за раз.
Код:
<head>
<script src="assetts/jquery-1.10.2.js"></script>
<script src="assetts/jquery-ui.min.js"></script>
<script src="tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('td').click(function (event) {
var currentId = this.id;
var currentHTML = this.innerHTML;
alert(currentId);
$(function () {
$("<div id=\"editmodal-diag\"></div>").dialog({
title: 'Edit',
modal: true,
buttons: {
Ok: function () {
var t = "#" + currentId;
alert(t);
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text');
},
Cancel: function () {
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text');
}
}
});
})
$('#editmodal-diag').append("<textarea id=\"editmodal-diag-text\">" + currentHTML + "</textarea>");
$('#editmodal-diag-text').empty;
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
});
</script>
</head>
<body>
<table width="75%>
<tr>
<th>Header text</th>
</tr>
<tr>
<td>Information panel 1</td>
<td>Information panel 2</td>
</tr>
</table>
</body>
Заранее спасибо.
1 ответ
После дополнительных копаний я обнаружил TinyMCE 4 - remove() или destroy (), в котором я обнаружил, что элемент управления tinymce необходимо удалить с помощью:
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
полностью удалить текущий редактор перед повторной инициализацией:
tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link'});
Это нужно было сделать только после того, как появилась первая коробка. Я использовал булеву переменную, чтобы проверить это. Полная функция:
var tinyRun = false;
$(window).load(function () {
setTimeout(function () {
$('td').click(function (event) {
var currentId = this.id;
var currentHTML = this.innerHTML;
alert(currentId);
$(function () {
$("<div id=\"editmodal-diag\"><textarea id=\"editmodal-diag-text\"></textarea></div>").dialog({
title: 'Edit',
modal: true,
buttons: {
Ok: function () {
var t = "#" + currentId;
alert(t);
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
},
Cancel: function () {
$(this).dialog("close"); $("#editmodal-diag").remove();
tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();
}
}
});
})
setTimeout(function () {
$('#editmodal-diag-text').text(currentHTML);
if (!tinyRun) {
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
tinyRun = true;
}
else {
tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link' });
}
}, 250);
});
}, 250);
}