在 tinymce 编辑器对话框中使用变量插件重置有效变量
Reset valid variable with variable plugin in tinymce editor dialog
我想在 tinymce onSubmit: function (api){} 对话框 window 期间在 tinymce 中设置新的有效变量，因为我需要将用户输入的值设置为有效变量。但是，有效变量保持不变。但是在不使用对话框的情况下，在渲染编辑器确实更改了有效变量后重置有效变量。如何通过对话 tinymce 实现它？
<!DOCTYPE html>
<html>
<head>
<script src="plugin/jQuery/jquery-3.4.1.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/tinymce.min.js"></script>
<script src="plugin/tinymce-variable-master/src/plugin.js"></script>
<script src="plugin/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugin/bootstrap/dist/css/bootstrap.min.css">
<script>
tmce_object={
selector: '#template',
plugins : ["print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table hr nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons variable template"],
toolbar : 'dialog numlist bullist|undo redo|bold italic underline strikethrough|fullscreen preview save print|ltr rtl|forecolor backcolor removeformat|fontselect fontsizeselect formatselect|alignleft aligncenter alignright alignjustify|outdent indent|charmap emoticons|insertfile image media template link anchor codesample',
content_style:".variable{cursor:default;background-color:#65b9dd;color:#FFF;padding:2px;border-radius:3px;display:inline-block;}body{max-width: 800px;}",
variable_prefix: "{{",
variable_suffix: "}}",
setup: function (editor){
var $ = tinymce.dom.DomQuery;
var nonEditableClass = editor.getParam('noneditable_noneditable_class', 'mceNonEditable');
editor.on('BeforeExecCommand', function (e){
//The commands we want to permit formatting noneditable items for
var textFormatCommands = [
'mceToggleFormat',
'mceApplyTextcolor',
'mceRemoveTextcolor'
];
if (textFormatCommands.indexOf(e.command) !== -1)
{
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', null);
}
});
editor.on('ExecCommand', function (e){
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', false);
});
},
init_instance_callback: function (editor){
editor.formatter.get('forecolor')[0].exact = true;
editor.formatter.get('hilitecolor')[0].exact = true;
},
variable_valid:['var1'],
width:800,
height:600,
};
$(document).ready(function(){
dlg="editor.ui.registry.addButton('dialog',{"+
"text:'dialog',"+
"onAction:function(){"+
//define dialog
"var dialogConfig = {"+
"title: 'Reset valid variable',"+
"body: {"+
"type: 'panel',"+
"items: ["+
"]"+
"},"+
"buttons: ["+
"{"+
"type: 'cancel',"+
"name: 'closeButton',"+
"text: 'Cancel'"+
"},"+
"{"+
"type: 'submit',"+
"name: 'submitButton',"+
"text: 'submit',"+
"primary: true"+
"}"+
"],"+
"onSubmit: function (api) {"+
"var data = api.getData();"+
"tinymce.get('template').settings.variable_valid=['A','B'];"+//set valid variable onSubmit of tinymce dialog
"api.close();"+
"}"+
"};"+
//open dialog
"editor.windowManager.open(dialogConfig);"+
"}"+
"})";
})
function inittmce(){
tmceobj_stp =tmce_object.setup;
stp_tostr =String(tmceobj_stp);
stp_tostr_edt =stp_tostr.replace(/.$/,dlg+"}");
stp_edt =eval('('+stp_tostr_edt+')');
const tmce_obj =Object.assign({}, tmce_object);
tmce_obj.setup =stp_edt;
var ed =new tinymce.Editor('template', tmce_obj , tinymce.EditorManager);//initiate tinymce with updated object
ed.render();
//setvalivar();//set valid variable after render without dialog tinymce
}
function setvalivar(){
tinymce.get('template').settings.variable_valid=['var1','var2'];
}
</script>
</head>
<body>
<div class="modal" id="modal-template" role="dialog" aria-labelledby="myModalLabel" style="display:block;">
<button id="btn-add" title="New button" onclick="inittmce()">reset</button>
<textarea id="template">
</textarea>
</div>
</body>
提前致谢
我在tinymce对象前声明了 var_valid=['var1'];，然后将变量var_valid传给了tinymce对象中的variable_valid键。在 onSubmit: function (api) {} 中，我通过 var_valid.length = 0; 清除 var_valid 数组中的元素，并通过 var_valid.push('input'); 将新值添加到 var_valid。这样，编辑器确实在用户提交对话框后更改了variable_valid。现在，当用户键入新变量（{{input}}）时，它显示在蓝色块中，当用户键入旧的已删除变量（{{var1}}）时，它不再显示在蓝色块中。但是，具有的旧变量在用户提交对话框之前被插入到编辑器中，对话框保持在蓝色块中。我在重置并关闭对话框后添加 tinymce.triggerSave()。这会刷新更改并将编辑器上存在的旧已删除变量转换为显示为 {{var1}}.
<!DOCTYPE html>
<html>
<head>
<script src="plugin/jQuery/jquery-3.4.1.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/tinymce.min.js"></script>
<script src="plugin/tinymce-variable-master/src/plugin.js"></script>
<script src="plugin/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugin/bootstrap/dist/css/bootstrap.min.css">
<script>
var_valid=['var1'];
tmce_object={
selector: '#template',
plugins : ["print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table hr nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons variable template"],
toolbar : 'dialog numlist bullist|undo redo|bold italic underline strikethrough|fullscreen preview save print|ltr rtl|forecolor backcolor removeformat|fontselect fontsizeselect formatselect|alignleft aligncenter alignright alignjustify|outdent indent|charmap emoticons|insertfile image media template link anchor codesample',
content_style:".variable{cursor:default;background-color:#65b9dd;color:#FFF;padding:2px;border-radius:3px;display:inline-block;}body{max-width: 800px;}",
variable_prefix: "{{",
variable_suffix: "}}",
setup: function (editor){
var $ = tinymce.dom.DomQuery;
var nonEditableClass = editor.getParam('noneditable_noneditable_class', 'mceNonEditable');
editor.on('BeforeExecCommand', function (e){
//The commands we want to permit formatting noneditable items for
var textFormatCommands = [
'mceToggleFormat',
'mceApplyTextcolor',
'mceRemoveTextcolor'
];
if (textFormatCommands.indexOf(e.command) !== -1)
{
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', null);
}
});
editor.on('ExecCommand', function (e){
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', false);
});
},
init_instance_callback: function (editor){
editor.formatter.get('forecolor')[0].exact = true;
editor.formatter.get('hilitecolor')[0].exact = true;
},
variable_valid:var_valid,
width:800,
height:600,
};
$(document).ready(function(){
dlg="editor.ui.registry.addButton('dialog',{"+
"text:'dialog',"+
"onAction:function(){"+
//define dialog
"var dialogConfig = {"+
"title: 'Reset valid variable',"+
"body: {"+
"type: 'panel',"+
"items: ["+
"]"+
"},"+
"buttons: ["+
"{"+
"type: 'cancel',"+
"name: 'closeButton',"+
"text: 'Cancel'"+
"},"+
"{"+
"type: 'submit',"+
"name: 'submitButton',"+
"text: 'submit',"+
"primary: true"+
"}"+
"],"+
"onSubmit: function (api) {"+
"var data = api.getData();"+
"var_valid.length = 0;"+
"var_valid.push('input');"+
//"tinymce.get('template').settings.variable_valid=['A','B'];"+//set valid variable onSubmit of tinymce dialog
"api.close();"+
"tinymce.triggerSave()"+
"}"+
"};"+
//open dialog
"editor.windowManager.open(dialogConfig);"+
"}"+
"})";
})
function inittmce(){
tmceobj_stp =tmce_object.setup;
stp_tostr =String(tmceobj_stp);
stp_tostr_edt =stp_tostr.replace(/.$/,dlg+"}");
stp_edt =eval('('+stp_tostr_edt+')');
const tmce_obj =Object.assign({}, tmce_object);
tmce_obj.setup =stp_edt;
var ed =new tinymce.Editor('template', tmce_obj , tinymce.EditorManager);//initiate tinymce with updated object
ed.render();
//setvalivar();//set valid variable after render without dialog tinymce
}
function setvalivar(){
tinymce.get('template').settings.variable_valid=['var1','var2'];
}
</script>
</head>
<body>
<div class="modal" id="modal-template" role="dialog" aria-labelledby="myModalLabel" style="display:block;">
<button id="btn-add" title="New button" onclick="inittmce()">reset</button>
<textarea id="template">
</textarea>
</div>
</body>
仍在寻找更好的解决方案。
我想在 tinymce onSubmit: function (api){} 对话框 window 期间在 tinymce 中设置新的有效变量，因为我需要将用户输入的值设置为有效变量。但是，有效变量保持不变。但是在不使用对话框的情况下，在渲染编辑器确实更改了有效变量后重置有效变量。如何通过对话 tinymce 实现它？
<!DOCTYPE html>
<html>
<head>
<script src="plugin/jQuery/jquery-3.4.1.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/tinymce.min.js"></script>
<script src="plugin/tinymce-variable-master/src/plugin.js"></script>
<script src="plugin/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugin/bootstrap/dist/css/bootstrap.min.css">
<script>
tmce_object={
selector: '#template',
plugins : ["print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table hr nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons variable template"],
toolbar : 'dialog numlist bullist|undo redo|bold italic underline strikethrough|fullscreen preview save print|ltr rtl|forecolor backcolor removeformat|fontselect fontsizeselect formatselect|alignleft aligncenter alignright alignjustify|outdent indent|charmap emoticons|insertfile image media template link anchor codesample',
content_style:".variable{cursor:default;background-color:#65b9dd;color:#FFF;padding:2px;border-radius:3px;display:inline-block;}body{max-width: 800px;}",
variable_prefix: "{{",
variable_suffix: "}}",
setup: function (editor){
var $ = tinymce.dom.DomQuery;
var nonEditableClass = editor.getParam('noneditable_noneditable_class', 'mceNonEditable');
editor.on('BeforeExecCommand', function (e){
//The commands we want to permit formatting noneditable items for
var textFormatCommands = [
'mceToggleFormat',
'mceApplyTextcolor',
'mceRemoveTextcolor'
];
if (textFormatCommands.indexOf(e.command) !== -1)
{
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', null);
}
});
editor.on('ExecCommand', function (e){
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', false);
});
},
init_instance_callback: function (editor){
editor.formatter.get('forecolor')[0].exact = true;
editor.formatter.get('hilitecolor')[0].exact = true;
},
variable_valid:['var1'],
width:800,
height:600,
};
$(document).ready(function(){
dlg="editor.ui.registry.addButton('dialog',{"+
"text:'dialog',"+
"onAction:function(){"+
//define dialog
"var dialogConfig = {"+
"title: 'Reset valid variable',"+
"body: {"+
"type: 'panel',"+
"items: ["+
"]"+
"},"+
"buttons: ["+
"{"+
"type: 'cancel',"+
"name: 'closeButton',"+
"text: 'Cancel'"+
"},"+
"{"+
"type: 'submit',"+
"name: 'submitButton',"+
"text: 'submit',"+
"primary: true"+
"}"+
"],"+
"onSubmit: function (api) {"+
"var data = api.getData();"+
"tinymce.get('template').settings.variable_valid=['A','B'];"+//set valid variable onSubmit of tinymce dialog
"api.close();"+
"}"+
"};"+
//open dialog
"editor.windowManager.open(dialogConfig);"+
"}"+
"})";
})
function inittmce(){
tmceobj_stp =tmce_object.setup;
stp_tostr =String(tmceobj_stp);
stp_tostr_edt =stp_tostr.replace(/.$/,dlg+"}");
stp_edt =eval('('+stp_tostr_edt+')');
const tmce_obj =Object.assign({}, tmce_object);
tmce_obj.setup =stp_edt;
var ed =new tinymce.Editor('template', tmce_obj , tinymce.EditorManager);//initiate tinymce with updated object
ed.render();
//setvalivar();//set valid variable after render without dialog tinymce
}
function setvalivar(){
tinymce.get('template').settings.variable_valid=['var1','var2'];
}
</script>
</head>
<body>
<div class="modal" id="modal-template" role="dialog" aria-labelledby="myModalLabel" style="display:block;">
<button id="btn-add" title="New button" onclick="inittmce()">reset</button>
<textarea id="template">
</textarea>
</div>
</body>
提前致谢
我在tinymce对象前声明了 var_valid=['var1'];，然后将变量var_valid传给了tinymce对象中的variable_valid键。在 onSubmit: function (api) {} 中，我通过 var_valid.length = 0; 清除 var_valid 数组中的元素，并通过 var_valid.push('input'); 将新值添加到 var_valid。这样，编辑器确实在用户提交对话框后更改了variable_valid。现在，当用户键入新变量（{{input}}）时，它显示在蓝色块中，当用户键入旧的已删除变量（{{var1}}）时，它不再显示在蓝色块中。但是，具有的旧变量在用户提交对话框之前被插入到编辑器中，对话框保持在蓝色块中。我在重置并关闭对话框后添加 tinymce.triggerSave()。这会刷新更改并将编辑器上存在的旧已删除变量转换为显示为 {{var1}}.
<!DOCTYPE html>
<html>
<head>
<script src="plugin/jQuery/jquery-3.4.1.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
<script src="plugin/tinymce-dist-5.7.0/tinymce.min.js"></script>
<script src="plugin/tinymce-variable-master/src/plugin.js"></script>
<script src="plugin/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugin/bootstrap/dist/css/bootstrap.min.css">
<script>
var_valid=['var1'];
tmce_object={
selector: '#template',
plugins : ["print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table hr nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons variable template"],
toolbar : 'dialog numlist bullist|undo redo|bold italic underline strikethrough|fullscreen preview save print|ltr rtl|forecolor backcolor removeformat|fontselect fontsizeselect formatselect|alignleft aligncenter alignright alignjustify|outdent indent|charmap emoticons|insertfile image media template link anchor codesample',
content_style:".variable{cursor:default;background-color:#65b9dd;color:#FFF;padding:2px;border-radius:3px;display:inline-block;}body{max-width: 800px;}",
variable_prefix: "{{",
variable_suffix: "}}",
setup: function (editor){
var $ = tinymce.dom.DomQuery;
var nonEditableClass = editor.getParam('noneditable_noneditable_class', 'mceNonEditable');
editor.on('BeforeExecCommand', function (e){
//The commands we want to permit formatting noneditable items for
var textFormatCommands = [
'mceToggleFormat',
'mceApplyTextcolor',
'mceRemoveTextcolor'
];
if (textFormatCommands.indexOf(e.command) !== -1)
{
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', null);
}
});
editor.on('ExecCommand', function (e){
$(editor.getBody()).find('.' + nonEditableClass).attr('contenteditable', false);
});
},
init_instance_callback: function (editor){
editor.formatter.get('forecolor')[0].exact = true;
editor.formatter.get('hilitecolor')[0].exact = true;
},
variable_valid:var_valid,
width:800,
height:600,
};
$(document).ready(function(){
dlg="editor.ui.registry.addButton('dialog',{"+
"text:'dialog',"+
"onAction:function(){"+
//define dialog
"var dialogConfig = {"+
"title: 'Reset valid variable',"+
"body: {"+
"type: 'panel',"+
"items: ["+
"]"+
"},"+
"buttons: ["+
"{"+
"type: 'cancel',"+
"name: 'closeButton',"+
"text: 'Cancel'"+
"},"+
"{"+
"type: 'submit',"+
"name: 'submitButton',"+
"text: 'submit',"+
"primary: true"+
"}"+
"],"+
"onSubmit: function (api) {"+
"var data = api.getData();"+
"var_valid.length = 0;"+
"var_valid.push('input');"+
//"tinymce.get('template').settings.variable_valid=['A','B'];"+//set valid variable onSubmit of tinymce dialog
"api.close();"+
"tinymce.triggerSave()"+
"}"+
"};"+
//open dialog
"editor.windowManager.open(dialogConfig);"+
"}"+
"})";
})
function inittmce(){
tmceobj_stp =tmce_object.setup;
stp_tostr =String(tmceobj_stp);
stp_tostr_edt =stp_tostr.replace(/.$/,dlg+"}");
stp_edt =eval('('+stp_tostr_edt+')');
const tmce_obj =Object.assign({}, tmce_object);
tmce_obj.setup =stp_edt;
var ed =new tinymce.Editor('template', tmce_obj , tinymce.EditorManager);//initiate tinymce with updated object
ed.render();
//setvalivar();//set valid variable after render without dialog tinymce
}
function setvalivar(){
tinymce.get('template').settings.variable_valid=['var1','var2'];
}
</script>
</head>
<body>
<div class="modal" id="modal-template" role="dialog" aria-labelledby="myModalLabel" style="display:block;">
<button id="btn-add" title="New button" onclick="inittmce()">reset</button>
<textarea id="template">
</textarea>
</div>
</body>
仍在寻找更好的解决方案。