I want to add a button to tinymce editor by html button click. I declare configuration object of tinymce in variable-setting. At first instance, I use this variable in tinymce init function as tinymce.init(setting);. Then, during reinitialise, I add button function to that object by setting.setup=function (editor){insert_content;add_button;}; and reuse for second instance. I could remove, create and render new instance. But the button not inserted in toolbar. During reinitialise, I had remove the previous tinymce instance.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
<script src="tinymce-dist-5.7.0/tinymce.min.js"></script>
<script src="../../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../../../../plugin/tinymce-variable-master/src/plugin.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
setting={
selector: "#a",
plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons variable',
toolbar: 'mysecondbutton customInsertButton pagebreak undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl',
content_css: "content.css",
},
height:600,
};
tinymce.init(setting);
$('#reinit').click(function(){
editor =tinymce.get('a');
con =editor.getContent();
tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'a');
insert_content =editor.insertContent(con);
add_button =editor.ui.registry.addButton('customInsertButton',
{
text: 'My Button',
onAction: function (_)
{
editor.insertContent(' <strong>It\'s my button!</strong> ');
}
});
setting.setup=function (editor){insert_content;add_button;};
var ed = new tinymce.Editor('a', setting , tinymce.EditorManager);
ed.render();
})
})
</script>
<textarea id="a" name="mytextarea" rows="30">
</textarea>
<button id="reinit">reinitialize</button>
This setting.setup work when we insert whole function in without calling by variable
setting.setup=function (editor)
{
editor.ui.registry.addButton('customInsertButton',
{
text: 'My Button',
onAction: function (_)
{
editor.insertContent(' <strong>It\'s my button!</strong> ');
}
});
};
Another way, add element(function) to empty object(new). Then, use Object.assign to combine object(new) and existing object(setting)
var setup = {
setup: function (editor)
{
editor.ui.registry.addButton('customInsertButton',
{
text: 'My Button',
onAction: function (_)
{
editor.insertContent(' <strong>It\'s my button!</strong> ');
}
});
editor.setContent(con);
}
};
//combine both object as new object
var obj = Object.assign({}, setting, setup);