In a js file, I have a list of html components that I store in variables. On the front end, I have multiple buttons with "component" class and specific IDs.
Then I try to do a switch function so each ".component" ID correspond to a specific html block. Each time I click on a button, the html code should be stored/added in a variable "code".
And the final goal is to create a function so when I click on a button, the corresponding html is injected in tinyCME editor.
Is this possible ?
Here is a simplified version of my code.
function build_email(all_components) {
var brand_centered='\n'
'<tr>\n'
' <td align="center" style="font-size:0; padding: 10px 0; background-color:#EDEEF6;" valign="top">\n'
' <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">\n'
' <tr>\n'
' <td style="padding:10px 0;text-align: center"><img alt="" border="0" width="60" height="50" src="myimage.png" style="width:60px;height:50px"></td>\n'
' </tr>\n'
' </table>\n'
' </td>\n'
'</tr>\n'
etc...
var total_components = component_list.length;
for (var i = 0; i <= total_components - 1; i ) {
switch (component_list[i]) {
case "add-brand-centered" :
code = brand_centered;
break;
case "add-brand-left" :
code = brand_left;
break;
etc...
}
}
$('.component').each(function(){
tinymce.activeEditor.setContent(code);
})
CodePudding user response:
Try setContent() and getContent() functions.
For instance, I use one button and a textarea.
<button type="button" id="add">Add components</button>
<textarea></textarea>
And then this JS/Jquery code:
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function(e) {
tinymce.activeEditor.setContent("<b>Hello world</b>");
});
}
});
var header = '<div >Header</div>';
var body = '<div >body</div>';
var footer = '<div >footer</div>';
var myComponents = [header,footer,footer];
document.getElementById('add').addEventListener('click', function(){
let oldContent = tinymce.activeEditor.getContent();
for(let i = 0; i < myComponents.length; i ){
oldContent = myComponents[i];
}
tinymce.activeEditor.setContent(oldContent);
});
Edited part
Ok, we always have the same footer and the same header. We can have an array to track all added custom parts.
var myComponents = [];
And we have 3 new buttons (add-1, add-2, add-3):
var custom1 = "<p>Hello</p>";
var custom2 = "<span>Hello world</span>";
var custom3 = "<b>Strong</b>";
document.getElementById('add-1').addEventListener('click', function(){
myComponents.push(custom1);
updateEdition();
});
document.getElementById('add-2').addEventListener('click', function(){
myComponents.push(custom2);
updateEdition();
});
document.getElementById('add-3').addEventListener('click', function(){
myComponents.push(custom3);
updateEdition();
});
We have created a new function for updating the edition:
function updateEdition(){
let edition = header;
for(let i = 0; i < myComponents.length; i ){
edition = myComponents[i];
}
edition = footer;
tinymce.activeEditor.setContent(edition);
}
When you finish the edition, call tinymce.activeEditor.save() to save your text in your html document. For example, call save() on Submit event if you are using a form.
More examples from TinyMCE.cloud: