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

Question

在 js 文件中，我有一个存储在变量中的 html 组件列表。在前端，我有多个带有“组件”class 和特定 ID 的按钮。

然后我尝试执行一个切换功能，以便每个“.component”ID 对应一个特定的 html 块。每次我点击一个按钮时，html 代码应该是 stored/added 在一个变量“代码”中。

最终目标是创建一个函数，当我点击一个按钮时，相应的 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 文档中。例如，如果您正在使用表单，请在提交事件上调用 save()。

来自 TinyMCE.cloud 的更多示例：

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

How can I inject html code into tinyMCE editor?

jquery

tinymce