问为什么Tinymce删除了我的一些内联风格？
EN

Stack Overflow用户

提问于 2022-06-10 22:46:49

回答 2查看 348关注 0票数 0

我在电子邮件模板上使用tinymce。下面是我通过模板插件添加的模板示例。(见下文)

问题是，tinymce删除了第一级td的背景色，我不理解why..If，我在下一个表标签上添加了背景色，它可以工作。由于我不想更改所有模板，在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">

tinymce-plugins

javascript

html

jquery

tinymce

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-06-23 13:14:36

编辑和回答：最终找到的唯一解决方案是修改模板的起始，遵循文档。我没有直接从tr>td开始，而是添加了一个带有mceTmpl类的div，然后添加了一个表标记：

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

在html文件中，为了创建应该调用模板的空间，我删除了表标记并用选择器Id替换为div：

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

票数 0

Stack Overflow用户

发布于 2022-06-16 14:12:51

它正在删除整个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>

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">
      <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> (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>
                </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，并使用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
    footer, </table>);
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72580446

复制

相似问题

问为什么Tinymce删除了我的一些内联风格？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Tinymce删除了我的一些内联风格？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Tinymce删除了我的一些内联风格？
EN