I want to set new valid variable in tinymce during onSubmit: function (api){} dialog window in tinymce because I need to set the value entered by user as valid variable. But, the valid variable remain unchanged. But without using dialog, reset valid variable after render the editor did change the valid variable. How to make it happen via dialog 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>
Thanks in advance
I declared var_valid=['var1']; before the tinymce object and pass in the variable var_valid to variable_valid key in tinymce object. In onSubmit: function (api) {}, I clear the element in var_valid array by var_valid.length = 0; and add in new value to var_valid by var_valid.push('input');. In this way, editor did change variable_valid after user submit the dialog box. Now, when user type new variable ({{input}}),it show in span blue block and when user type the old removed variable({{var1}}) no more show in blue block .But, the old variable that has been inserted into the editor before user submit the dialog box remain in blue block. I add tinymce.triggerSave() after reset and close dialog. This refresh the changes and convert old removed variable that exist on editor to display as {{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>
Still looking for better solution.