為什么 Tinymce 刪除了我的一些內聯樣式？

Question

我在電子郵件模板上使用 tinymce。 這是我通過模板插件添加的模板示例。 （見下文）

1-問題是tinymce刪除了第一級td的背景顏色，我不明白為什么..如果我在下一個表標簽上添加背景顏色，它就可以工作。 由於我不想更改所有模板，因此在 td 上允許背景顏色和其他 css 屬性的最佳方法是什么？ 我在 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">

這就是我得到的。 它正在刪除整個 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

它正在刪除整個 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> <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>

工具欄1 ：'插入文件撤消重做| 風格選擇 | 粗斜體 | alignleft aligncenter alignright alignjustify | Bullist numlist outdent 縮進 | 鏈接圖片 | template', toolbar2 : '打印預覽媒體 | 前色背景圖釋'

我搜索了toolbar1和工具欄 2，但toolbar2不提供這些屬性。 也許我錯了：-P。

更新

我錯了。 這是參考：工具欄N

無論如何，如果您在同一頁面上需要多個編輯器並且每個編輯器都使用特定的配置，那么請為每個編輯器使用tinymce.init(config) 。

有沒有辦法添加一個占位符或其他東西來表明他可以點擊那個空間？*

你可以：

添加預定義的內容。 例如： <div class="content">Insert here...</div>
為懸停效果添加 css 樣式。 例如： .content:hover { background-color: red; } .content:hover { background-color: red; }

如何在不破壞布局的情況下創建一個可以隨意添加模板多次的空間？

您可以添加更多空間：

使用 BR 標簽。
使用 CSS 邊距和/或 CSS 填充。

一切都取決於您的 HTML 標記。

更新 23/06/2022

回復晚了非常抱歉。 我測試了你的 codepen 並將所有tinymce.init(...)放入$(document).ready(function(){ /* here */ }); . 這在不更改 HTML 的情況下修復了橫幅編輯器。

我與您分享一個使用 Jquery 3.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"> <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>

另一個技巧是只為編輯器構建 HTML 並使用保存按鈕來構建最終的電子郵件。 例如，將您的模板保存在一個變量（或多個變量）中：

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

編輯和回答：最后我找到的唯一解決方案是按照文檔修改模板的開頭。 我沒有直接從 tr>td 開始，而是添加了一個帶有 mceTmpl 類的 div，然后是一個 table 標記：

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

並在 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

更新 23/06/2022

解決方案2
0 已采納 2022-06-23 13:14:36

為什么 Tinymce 刪除了我的一些內聯樣式？

問題描述

2 個解決方案

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

更新 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