|
|
相关文章推荐
|
刚毅的围巾 · Django学习（五）优雅地分页展示网页-阿 ...· 2 月前 · |
|
|
耍酷的咖啡豆 · 光标定位怎么操作-掘金· 1 年前 · |
|
|
豪情万千的牛肉面 · 无法访问com.sun.beans.intr ...· 1 年前 · |
|
|
微笑的伏特加 · android webview ...· 1 年前 · |
|
|
奔跑的青椒 · MySQL分组查询——group by - 知乎· 1 年前 · |
我在电子邮件模板上使用tinymce。下面是我通过模板插件添加的模板示例。(见下文)
问题是，tinymce删除了第一级td的背景色，我不理解why..If，我在下一个表标签上添加了背景色，它可以工作。由于我不想更改所有模板，在td上允许背景色和其他css属性的最佳方法是什么？我在tr或td上尝试了class="mceTmpl“，它没有改变任何东西。
<tr>
<div class="content">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<td align="center" style="font-size:0;background-color: #23004C;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;font-size:0;line-height:0;">
<td align="left" valign="top" dir="rtl">这就是我得到的。它正在删除整个tr > td >表
<tr>
<div class="content mce-content-body" id="mce_3" contenteditable="true" spellcheck="false">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; font-size: 0; line-height: 0;" data-mce-style="width: 100%; font-size: 0; line-height: 0;" class="mce-item-table">
<tbody>
<td align="left" valign="top" dir="rtl">
2 个回答
高票数
最新
Stack Overflow用户
修改于2022-06-23 16:26
得票数
0
它正在删除整个tr > td >表
请注意，TinyMCE删除任何无效的HTML。请参阅文档中的
extended_valid_elements
和
valid_elements
属性。
但是
--如果您编写了有效的HTML5标记，则不需要它们。例如：
.editable-row {
background-color: #7ae;
width: 100%;
table {
width: 100%;
#print {
margin-top: 2rem;
}<body style="background-color: gray;">
<table id="email">
<thead>
<th>Static head</th>
</thead>
<tfoot>
<td>Static footer</td>
</tfoot>
<tbody>
<tr class="editable-row">
<table>
<div class="content">Template #1</div>
</table>
<td><br/></td>
<tr class="editable-row">
<table>
<div class="content">Template #2</div>
</table>
</tbody>
</table>
<button type="button" id="print">Print in console</button>
<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>
<script>
tinymce.init({
selector: '.content',
inline: true,
$('#print').click(function() {
let email = $('#email').html();
console.log(email);
</script>
</body>
toolbar1 ：“插入文件撤消重做样式
我搜索了
toolbar1
和
toolbar2
，但是TinyMCE没有提供这些属性。也许我错了:-P。
更新
我错了。以下是参考资料： 工具栏N
无论如何，如果您需要同一个页面上的多个编辑器，并且每个编辑器都使用特定的配置，那么对每个编辑器使用
tinymce.init(config)
。
- 是否有方法添加占位符或其他指示他可以在该空间上循环的东西？
您可以：
-
添加预定义的内容。例：
<div class="content">Insert here...</div> -
为悬停效果添加css样式。例：
.content:hover { background-color: red; }
如何在不破坏布局的情况下创建一个空间，您可以在其中添加任意次数的模板？
您可以添加更多的空间：
- 使用BR标签。
- 使用CSS边距和/或CSS填充。
这都取决于您的HTML标记。
更新23/06/2022
抱歉反应太晚了。我测试了您的代码，并将所有的
tinymce.init(...)
放在
$(document).ready(function(){ /* here */ });
中。它修正了横幅编辑器而不改变HTML。
我将使用jQuery3.5.1和Tinymce 5.10.5提供一个新的示例编辑器(来自 https://www.tiny.cloud/blog/cloud-hosted-email-editor/ 的代码)。主要思想是在TD元素的内部为编辑器使用块元素(div或textarea)。
body {
padding: 0;
margin: 0;
box-sizing: border-box;
.container {
background-color: #f9f9fb;
margin: 0 auto;
max-width: 1000px;
.email {
max-width: 840px;
margin: auto;
.toolbar {
background-color: #fff;
height: 42px;
padding-top: 48px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
.tinymce:focus {
border-radius: 0.5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
outline: 0;
.mceNonEditable {
background-color: #e7ecff;
padding: 1px 0;
color: #4059b3;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9375em;
}<div class="container">
<div class="toolbar"></div>
<div class="email">
<table style="background-color: #f9f9fb; width: 100%; padding: 32px 0" border="0">
<td align="center">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #dfe3ec; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
<td style="padding: 16px 64px 0;">
<div class="tinymce editor02" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p>Hey {{first.name}}</p>
<h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
<p>Are you:</p>
<p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
<p><strong>Building email marketing software</strong> (i.e. the next Mailchimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
<p>Then use the only WYSIWYG editor that is trusted by 1.5M developers!</p>
<p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>
<td style="padding: 0 64px 16px;">
<table border="0" style="width: 100%;">
<td style="width: 48%; vertical-align: top;">
<div class="tinymce editor01" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
<h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
<p>Play with this demo to see how our email WYSIWYG editor works!</p>
<td style="width: 4%"></td>
<td style="width: 48%; vertical-align: top;">
<div class="tinymce editor02" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
<p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
<h2 style="font-size: 18px;">Try Premium plugins!</h2>
<p>Sign up for a 14 day trial and try out all our premium plugins!</p>
</table>
<td style="background-color: #eff0f6; padding: 24px 64px;">
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
<p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
</table>
</table>
<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.10.5/tinymce.min.js"></script>
<script>
$(document).ready(function() {
var tokens = [{
text: "name.first",
value: "{{name.first}}"
text: "name.last",
value: "{{name.last}}"
text: "name.full",
value: "{{name.full}}"
text: "email.home",
value: "{{email.home}}"
text: "email.work",
value: "{{email.work}}"
var commonConfig = {
inline: true,
menubar: false,
link_target_list: false,
object_resizing: false,
formats: {
h1: {
block: 'h1',
styles: {
fontSize: '24px',
color: '#335dff'
h2: {
block: 'h2',
styles: {
fontSize: '18px'
calltoaction: {
selector: 'a',
styles: {
backgroundColor: '#335dff',
padding: '12px 16px',
color: '#ffffff',
borderRadius: '4px',
textDecoration: 'none',
display: 'inline-block'
style_formats: [{
title: 'Paragraph',
format: 'p'
title: 'Heading 1',
format: 'h1'
title: 'Heading 2',
format: 'h2'
title: 'Button styles'
title: 'Call-to-action',
format: 'calltoaction'
placeholder: "Write here...",
toolbar_mode: "wrap",
noneditable_regexp: /\{\{[^\}]+\}\}/g,
setup: (editor) => {
editor.ui.registry.addIcon('token', '<svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>"><path d="m0 0h24v24h-24z" fill="none"/><path d="m21 12-4.37 6.16c-.37.52-.98.84-1.63.84h-3v-2h3l3.55-5-3.55-5h-10v3h-2v-3c0-1.1.9-2 2-2h10c.65 0 1.26.31 1.63.84zm-11 3h-3v-3h-2v3h-3v2h3v3h2v-3h3z"/></svg>');
editor.ui.registry.addMenuButton("tokens", {
icon: "token",
tooltip: "Insert token",
fetch: (callback) => {
var items = tokens.map((token) => {
return {
type: "menuitem",
text: token.text,
onAction: () => {
editor.insertContent(token.value);
callback(items);
tinymce.init($.extend({
selector: '.editor01',
plugins: 'link lists image emoticons code noneditable',
toolbar: 'styles | bold italic forecolor backcolor link image emoticons tokens | align bullist numlist | code removeformat',
}, commonConfig));
tinymce.init($.extend({
selector: '.editor02',
plugins: 'link lists image emoticons code noneditable template',
toolbar: 'styles | bold italic forecolor backcolor link image emoticons tokens | align bullist numlist | code removeformat template',
templates: [{
title: 'Date modified example',
description: 'Adds a timestamp indicating the last time the document modified.',
content: '<p>Last Modified: <time class="mdate">This will be replaced with the date modified.</time></p>'
title: 'Replace values example',
description: 'These values will be replaced when the template is inserted into the editor content.',
content: '<p>Name: {{username}}, StaffID: {{staffid}}</p>'
title: 'Replace values preview example',
description: 'These values are replaced in the preview, but not when inserted into the editor content.',
content: '<p>Name: {{preview_username}}, StaffID: {{preview_staffid}}</p>'
title: 'Replace values preview and content example',
description: 'These values are replaced in the preview, and in the content.',
content: '<p>Name: {{inboth_username}}, StaffID: {{inboth_staffid}}</p>'
}, commonConfig));
</script>
另一个技巧是只为编辑器构建HTML，并使用Save按钮构建最终的电子邮件。例如，将模板保存在变量(或多个变量)中：
const one_column = '<tr><td>{1}</td></tr>';
const header = document.getElementById('email-header');
const footer = document.getElementById('email-footer');
function getTwoColumns(data1, data2){
return '<tr><td>'.concat(data1,'</td><td>', data2, '</td></tr>');
// when you save your email template then you get
// contents and build the template programmatically
$('#save').click(function(){
const template = <table>.concat(
// string constant
header,
// string.replace()
one_column.replace('{1}', tinymce.get('email-fragment').getContent()),
// custom function that returns string
getTwoColumns(tinymce.get('email-banner').getContent(), tinymce.get('email-content').getContent()),
//string constant