如何将html代码注入tinyMCE编辑器

Question

在一个js文件中，我有一个存储在变量中的html组件列表。在前端，我有多个带有"；部件"；类和特定ID。

然后我试着做一个开关功能，这样每个"；。部件"；ID对应于特定的html块。每次我点击一个按钮，html代码都应该存储/添加在一个变量"中；代码"；。

最后的目标是创建一个函数，这样当我点击一个按钮时，相应的html就会被注入tinyCME编辑器中。

这可能吗？

这是我的代码的简化版本。

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);
})

Answer 1

尝试setContent((和getContent((函数。

例如，我使用一个按钮和一个文本区域。

<button type="button" id="add">Add components</button>
<textarea></textarea>

然后这个JS/Jquery代码：

tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function(e) {
tinymce.activeEditor.setContent("<b>Hello world</b>");
});
}
});

var header = '<div class="display-1">Header</div>';
var body = '<div class="container">body</div>';
var footer = '<div class="footer">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);
});

---

编辑部分

好的，我们总是有相同的页脚和相同的页眉。我们可以有一个数组来跟踪所有添加的自定义部件。

var myComponents = [];

我们有3个新按钮(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();
});

我们创建了一个更新版本的新功能：

function updateEdition(){
let edition = header;
for(let i = 0; i < myComponents.length; i++){
edition += myComponents[i];
}
edition += footer;
tinymce.activeEditor.setContent(edition);
}

完成编辑后，调用tinymce.activeEditor.save((将文本保存在html文档中。例如，如果您使用的是表单.，请在Submit事件上调用save((

TinyMC.cloud:的更多示例

• https://www.tiny.cloud/docs/demo/inline/
• https://www.tiny.cloud/blog/email-marketing-software/