如何解决在 tinymce 编辑器对话框中使用变量插件重置有效变量
我想在 tinymce 的 onSubmit: function (api){} 对话窗口期间在 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>
仍在寻找更好的解决方案。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
