如何在构建电子邮件模板编辑器时处理tinyMCE内联模式？
如何在构建电子邮件模板编辑器时处理tinyMCE内联模式？
提问于 2022-03-17 23:48:07
我正在创建我自己的电子邮件编辑器，我正在使用tinyMCE。因此，在我的页面上，我有一个带有100个按钮(图像)的侧栏，这些按钮(图像)对应于html块。当我单击一个按钮时，相应的代码将被注入一个具有tinyMCE的大型可编辑文本框中。所以，我有一个很大的块，看上去像你可以看到的这里：(这个是用ckeditor做的，但是我有一些类似的东西)。
理想情况下，我想要的是类似于“内联”演示可见这里的东西。
所以我有几个问题：
我是否可以将所有的块插入到一个样式的div中，而不需要所有的按钮等等，而只使块本身可编辑？
我读到这里说，内联模式不适用于td，因此有必要创建div并将id或类作为目标。
那些建造建筑者的电子邮件是如何进行的？所有电子邮件生成器(stripo，bee，mozaico，designmodo等)都使用内联编辑(ckEditor，专有解决方案或tinyMCE)。那么，它们是否用div包围js中的每个html组件，然后在下载文件时将其删除？难道没有更简单的方法吗？我不能创建数百个tinyMCE实例
如果有人在这方面有经验，我会感谢任何advice...thanks
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-18 08:31:54
您可以使用同一个类拥有多个div。例如，我们有4个div和..email可编辑类。所有..email可编辑元素都有相同的选项。当您想保存所有编辑器时，需要调用tinymce.editors来获取Tinymce实例的数组，并为每个实例调用save()：
// create instances of Tinymce for each .email-editable element.
tinymce.init({
selector: ".email-editable",
inline: true,
plugins: "advlist lists link image",
toolbar: "styleselect | bold italic forecolor | bullist numlist | link image| removeformat",
menubar: false
});
// this is the action for Click event
// this action will save all editors
document.getElementById('saveB').addEventListener('click', function(){
// save all editors
for (var i = 0; i < tinymce.editors.length; i++) {
tinymce.editors[i].save();
}
// show html on console
let html = document.getElementById('email').innerHTML;
console.log(html);
// with Jquery:
// console.log($('#email').html());
});#email-header{
margin-bottom: 10px;
text-align: center;
color: rgb(64,96,128);
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 30px;
}
#email-footer{
margin-top: 10px;
padding: 10px 0;
color: white;
background-color: gray;
text-align: center;
font-family: Arial, sans-serif;
}
.email-editable{
font-family: Arial, sans-serif;
}
#saveB{
margin-top: 30px;
padding: 10px 0;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.0/tinymce.min.js"></script>
<div id="email">
<div id="email-header">Default header (this is not editable)</div>
<div class="email-editable"><p>CUSTOM CONTENT 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p><ul><li>Item 1</li><li>Item 2</li></ul></div>
<div class="email-editable"><p>CUSTOM CONTENT 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p></div>
<div class="email-editable"><p>CUSTOM CONTENT 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p></div>
<div class="email-editable"><p>CUSTOM CONTENT 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p></div>
<div id="email-footer">2022 © My Company (this is not editable)</div>
</div>
<button id="saveB" type="button">Save email</button>
最新答案
使用表元素的新模板。单击Save按钮时，tbody的每个TD元素都将拥有内容(没有DIV)，但会丢失TinyMCE编辑器。
tinymce.init({
selector: ".email-editable",
inline: true,
plugins: "advlist lists link image",
toolbar: "styleselect | bold italic forecolor | bullist numlist | link image| removeformat",
menubar: false
});
document.getElementById('saveB').addEventListener('click', function() {
// obtain all TD elements where you edit the content
let blocks = document.getElementById('email-body').getElementsByTagName('td');
// change all inner HTML for each TD element.
for (var i = 0; i < tinymce.editors.length; i++) {
let content = tinymce.editors[i].getContent();
blocks[i].innerHTML = content; // note that this will remove the TinyMCE editor
}
// show html on console
let html = document.getElementById('email').innerHTML;
console.log(html);
});#email-header {
margin-bottom: 10px;
text-align: center;
color: rgb(64, 96, 128);
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 30px;
}
#email-footer {
margin-top: 10px;
padding: 10px 0;
color: white;
background-color: gray;
text-align: center;
font-family: Arial, sans-serif;
}
.email-editable {
font-family: Arial, sans-serif;
}
#saveB {
margin-top: 30px;
padding: 10px 0;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.0/tinymce.min.js"></script>
<table id="email">
<thead>
<tr>
<td id="email-header">Default header (this is not editable)</td>
</tr>
</thread>
<tfoot>
<tr>
<td id="email-footer">2022 © My Company (this is not editable)</td>
</tr>
</tfoot>
<tbody id="email-body">
<tr>
<td>
<div class="email-editable">
<p>CUSTOM CONTENT 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
eget nunc faucibus semper.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="email-editable">
<p>CUSTOM CONTENT 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
eget nunc faucibus semper.</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="email-editable">
<p>CUSTOM CONTENT 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
eget nunc faucibus semper.</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="email-editable">
<p>CUSTOM CONTENT 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
eget nunc faucibus semper.</p>
</div>
</td>
</tr>
</tbody>
</table>
<button id="saveB" type="button">Save email</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71520331
复制相关文章
相似问题
腾讯云开发者
