克隆的 JQuery UI 对话框中包含 AJAX 内容的 TinyMCE
TinyMCE with AJAX content in cloned JQuery UI Dialog
第一次打开克隆的 UI 对话框时,对话框内的 TinyMCE 加载内容:
setup: function(editor) {
editor.on('init', function() {
var data = 'This is a test';
editor.setContent(data);
});
}
关闭并重新打开对话框,TinyMCE 不再加载该内容。
知道发生了什么以及如何解决吗?
我已按照 TinyMCE 提供的说明与 JQuery UI 对话框集成,位于 https://www.tiny.cloud/docs/integrations/jquery/
<button type="button" id='show_dialog'>ShowDialog</button>
<div class="dialog_learning_event dialog_le">
<textarea name="editor_notes_le" id="editor_notes_le" rows="10" cols="80"></textarea>
<div id='notes_le_message'> </div>
</div>
和
// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
$('#show_dialog').click(function(){
var dialogs_le = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').dialog({
title: 'test',
width: '650',
modal: true,
dialogClass: 'dialogClass',
open: function(event, ui) {
var le_title = $(this).dialog("option", "title");
tinymce.init({
selector: 'textarea',
menubar: false,
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
content_style: "body {font-size: 11pt; font-family: Arial; }",
toolbar_mode: 'wrap',
setup: function(editor) {
editor.on('init', function() {
var data = 'This is a test';
editor.setContent(data);
});
}
});
}
});
})
参见fiddle:
注意:只需关闭有关未注册域的 TinyMCE 警告通知...
您遇到的问题是由于您重复使用相同的 textarea
DOM id
.
克隆对话框时,需要为文本区域分配新的ID。
示例:
var dialogId = 0;
$('#show_dialog').click(function() {
dialogId++;
var modal = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').attr("id", "dialog_" + dialogId);
modal.find("textarea").attr("id", "textarea_" + dialogId);
modal.dialog({
title: 'test',
width: '650',
modal: true,
dialogClass: 'dialogClass',
open: function(event, ui) {
var le_title = $(this).dialog("option", "title");
tinymce.init({
selector: '#textarea_' + dialogId, // use the new DOM id
menubar: false,
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
content_style: "body {font-size: 11pt; font-family: Arial; }",
toolbar_mode: 'wrap',
setup: function(editor) {
editor.on('init', function() {
var data = 'This is a test: ' + dialogId;
editor.setContent(data);
});
}
});
}
});
})
第一次打开克隆的 UI 对话框时,对话框内的 TinyMCE 加载内容:
setup: function(editor) {
editor.on('init', function() {
var data = 'This is a test';
editor.setContent(data);
});
}
关闭并重新打开对话框,TinyMCE 不再加载该内容。
知道发生了什么以及如何解决吗?
我已按照 TinyMCE 提供的说明与 JQuery UI 对话框集成,位于 https://www.tiny.cloud/docs/integrations/jquery/
<button type="button" id='show_dialog'>ShowDialog</button>
<div class="dialog_learning_event dialog_le">
<textarea name="editor_notes_le" id="editor_notes_le" rows="10" cols="80"></textarea>
<div id='notes_le_message'> </div>
</div>
和
// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
$('#show_dialog').click(function(){
var dialogs_le = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').dialog({
title: 'test',
width: '650',
modal: true,
dialogClass: 'dialogClass',
open: function(event, ui) {
var le_title = $(this).dialog("option", "title");
tinymce.init({
selector: 'textarea',
menubar: false,
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
content_style: "body {font-size: 11pt; font-family: Arial; }",
toolbar_mode: 'wrap',
setup: function(editor) {
editor.on('init', function() {
var data = 'This is a test';
editor.setContent(data);
});
}
});
}
});
})
参见fiddle:
注意:只需关闭有关未注册域的 TinyMCE 警告通知...
您遇到的问题是由于您重复使用相同的 textarea
DOM id
.
克隆对话框时,需要为文本区域分配新的ID。
示例:
var dialogId = 0;
$('#show_dialog').click(function() {
dialogId++;
var modal = $(".dialog_learning_event").clone().appendTo('body').removeClass('dialog_learning_event').attr("id", "dialog_" + dialogId);
modal.find("textarea").attr("id", "textarea_" + dialogId);
modal.dialog({
title: 'test',
width: '650',
modal: true,
dialogClass: 'dialogClass',
open: function(event, ui) {
var le_title = $(this).dialog("option", "title");
tinymce.init({
selector: '#textarea_' + dialogId, // use the new DOM id
menubar: false,
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak save',
toolbar: "undo redo | styleselect| forecolor | bullist numlist | indent outdent | link unlink",
content_style: "body {font-size: 11pt; font-family: Arial; }",
toolbar_mode: 'wrap',
setup: function(editor) {
editor.on('init', function() {
var data = 'This is a test: ' + dialogId;
editor.setContent(data);
});
}
});
}
});
})