为什么 Tinymce 删除了我的一些内联样式？

Question

I'm using tinymce on an email template.我在电子邮件模板上使用 tinymce。 Here is an example of the template I add through the template plugin.这是我通过模板插件添加的模板示例。 (see below) （见下文）

1-The issue is that tinymce deletes the background-color of the first level td and I don't understand why..If I add the background-color on the next table tag, it works. 1-问题是tinymce删除了第一级td的背景颜色，我不明白为什么..如果我在下一个表标签上添加背景颜色，它就可以工作。 As I don't want to change all my templates, what is the best way to allow background color and other css properties on td ?由于我不想更改所有模板，因此在 td 上允许背景颜色和其他 css 属性的最佳方法是什么？ I tried class="mceTmpl" on the tr or td, it doesn't change anything.我在 tr 或 td 上尝试了 class="mceTmpl"，它没有改变任何东西。

<tr>
   <td>
    <div class="content">
     <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
      <tr>
        <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;">
                <tr>
                    <td align="left" valign="top" dir="rtl">

And here is what I get.这就是我得到的。 It's removing a entire tr > td > table它正在删除整个 tr > td > 表

<tr>
     <td>
       <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>
                <tr>
                    <td align="left" valign="top" dir="rtl">

Answer 1

It's removing a entire tr > td > table它正在删除整个 tr > td > 表

Note that TinyMCE deletes any invalid HTML markup.请注意，TinyMCE 会删除任何无效的 HTML 标记。 See extended_valid_elements and valid_elements properties in documentation.请参阅文档中的extended_valid_elements和valid_elements属性。 But if you write valid HTML5 markup you do not need them.但是，如果您编写有效的 HTML5 标记，则不需要它们。 For example:例如：

 .editable-row { background-color: #7ae; width: 100%; } table { width: 100%; } #print { margin-top: 2rem; }

 <body style="background-color: gray;"> <table id="email"> <thead> <tr> <th>Static head</th> </tr> </thead> <tfoot> <tr> <td>Static footer</td> </tr> </tfoot> <tbody> <tr class="editable-row"> <td> <table> <tr> <td> <div class="content">Template #1</div> </td> </tr> </table> </td> </tr> <tr> <td><br/></td> </tr> <tr class="editable-row"> <td> <table> <tr> <td> <div class="content">Template #2</div> </td> </tr> </table> </td> </tr> </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 : 'insertfile undo redo |工具栏1 ：'插入文件撤消重做| styleselect |风格选择 | bold italic |粗斜体 | alignleft aligncenter alignright alignjustify | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | Bullist numlist outdent 缩进 | link image |链接图片 | template', toolbar2 : 'print preview media | template', toolbar2 : '打印预览媒体 | forecolor backcolor emoticons'前色背景图释'

I searched for toolbar1 and toolbar2 but TinyMCE does not offer those properties.我搜索了toolbar1和工具栏 2，但toolbar2不提供这些属性。 Maybe I am wrong :-P.也许我错了：-P。

UPDATE更新

I was wrong.我错了。 Here is the reference: toolbar N这是参考：工具栏N

Anyway, if you need multiple editors on the same page and each editor uses specific configuration, then use tinymce.init(config) for each editor.无论如何，如果您在同一页面上需要多个编辑器并且每个编辑器都使用特定的配置，那么请为每个编辑器使用tinymce.init(config) 。

is there a way to add a placeholder or something to indicate that he can clic on that space ?*有没有办法添加一个占位符或其他东西来表明他可以点击那个空间？*

You can:你可以：

Add a predefined content.添加预定义的内容。 Eg: <div class="content">Insert here...</div>例如： <div class="content">Insert here...</div>
Add css styles for hover effects.为悬停效果添加 css 样式。 Eg: .content:hover { background-color: red; }例如： .content:hover { background-color: red; } .content:hover { background-color: red; }

How do you create a space in which you can add a template as many times as you want, without breaking the layout?如何在不破坏布局的情况下创建一个可以随意添加模板多次的空间？

You can add more space:您可以添加更多空间：

Using BR tag.使用 BR 标签。
Using CSS Margin and/or CSS Padding.使用 CSS 边距和/或 CSS 填充。

All depends on your HTML markup.一切都取决于您的 HTML 标记。

UPDATE 23/06/2022更新 23/06/2022

Sorry for the late response.回复晚了非常抱歉。 I tested your codepen and I put all tinymce.init(...) inside $(document).ready(function(){ /* here */ });我测试了你的 codepen 并将所有tinymce.init(...)放入$(document).ready(function(){ /* here */ }); . . That fixed the Banner editor without changing your HTML.这在不更改 HTML 的情况下修复了横幅编辑器。

I share you a new sample editor (code adapted from https://www.tiny.cloud/blog/cloud-hosted-email-editor/ ) using Jquery 3.5.1 and Tinymce 5.10.5.我与您分享一个使用 Jquery 3.5.1 和 Tinymce 5.10.5 的新示例编辑器（代码改编自https://www.tiny.cloud/blog/cloud-hosted-email-editor/ ）。 The main idea is to use block elements (divs or textarea) inside of TD elements for editors.主要思想是在 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"> <tr> <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"> <tr> <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> (ie the next Gmail) and need rich text editor functionality?</p> <p><strong>Building email marketing software</strong> (ie 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> </div> </td> </tr> <tr> <td style="padding: 0 64px 16px;"> <table border="0" style="width: 100%;"> <tr> <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> </div> </td> <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> </div> </td> </tr> </table> </td> </tr> <tr> <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> </td> </tr> </table> </td> </tr> </table> </div> </div> <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>

Another trick is to build your HTML only for editor and use the Save button to build the final email.另一个技巧是只为编辑器构建 HTML 并使用保存按钮来构建最终的电子邮件。 For example, keep your template in a variable (or variables):例如，将您的模板保存在一个变量（或多个变量）中：

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
    footer, </table>);
});

Answer 2

EDIT AND ANSWER: finaly the only solution I found was to modify the begining of my template, following the docs.编辑和回答：最后我找到的唯一解决方案是按照文档修改模板的开头。 Instead of starting directly with a tr>td I add a div with the mceTmpl class, and then a table tag:我没有直接从 tr>td 开始，而是添加了一个带有 mceTmpl 类的 div，然后是一个 table 标记：

<div class="mceTmpl"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="680">

and in the html file to create the space where the template should be called, I removed the table tag and replaced it by a div with the selector Id :并在 html 文件中创建应调用模板的空间，我删除了 table 标记并将其替换为具有选择器 Id 的 div ：

<tr>
   <td>
    <div id="banner"  role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;"></div>                
   </td>
</tr>

为什么 Tinymce 删除了我的一些内联样式？

问题描述

2 个解决方案

解决方案1
0 2022-06-16 14:12:51

UPDATE 23/06/2022更新 23/06/2022

解决方案2
0 已采纳 2022-06-23 13:14:36

为什么 Tinymce 删除了我的一些内联样式？

问题描述

2 个解决方案

解决方案1 0 2022-06-16 14:12:51

UPDATE 23/06/2022更新 23/06/2022

解决方案2 0 已采纳 2022-06-23 13:14:36

解决方案1
0 2022-06-16 14:12:51

解决方案2
0 已采纳 2022-06-23 13:14:36