带有Tinymce的电子邮件编辑器：如何导出干净的HTML文件？

Question

我设法创建了一个电子邮件编辑器，该电子邮件编辑器以此示例。在文件的末尾，我添加了下载按钮，以便用户可以检索他编辑的文件。

我的问题是，Tinymce注入了我想在导出期间要删除的大量代码，标签，类，属性和ID。是否有一个函数或插​​件可以在没有任何引用Tinymce的情况下检索其文件？

目前，我“手动”删除每个元素，这在我看来根本没有最佳状态。元素太多（到处都是属性），我敢肯定有一种更简单的方法。

document.getElementById('btnHtml').addEventListener('click', function() {

  let $email = $('.email-container');
  let contentToDelete = document.querySelectorAll("script,div.mce-tinymce,#mceDefaultStyles,.mce-widget,#u0,#u1,button");//
  contentToDelete.forEach((element) => element.remove());//remove all elements and children that are outside tinymce editors

  // Get content from all editors 
  for (var i = 0; i < tinymce.editors.length; i++) {
    let editable = $email.find('.content')[i];
    editable.innerHTML = tinymce.editors[i].getContent();
    editable.removeAttribute('spellcheck');
    // If you remove "contenteditable" then this node will not open TinyMCE when you click on it.
    editable.removeAttribute('data-mce-bogus');
    editable.removeAttribute('data-mce-style');
    editable.removeAttribute('[data-mce-href');
    editable.classList.remove('mce-content-body');
    editable.classList.remove('mce-item-table');
   
  
  }

      var txtboxes = document.querySelectorAll('.content');
      txtboxes.forEach(box => {
      box.replaceWith(...box.childNodes);//remove only  div.content itself not the children
    });
   
       
  let full = new XMLSerializer().serializeToString(document.doctype);//serialize all the document, get the doctype
  let innercontent = document.documentElement.outerHTML;
  let content = full + innercontent; // append doctype to html content
  let blob = new Blob([content], {
    type: 'text/html'
  });

  // Create download link and then download.
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.download = "index.html";
  a.style.display = 'none';
  a.href = url;
  //document.body.appendChild(a);

  // this link will not work here so try it on "codepen.io" or on your computer
  a.click();

  // Release object URL
  window.URL.revokeObjectURL(url);
});

//at the end of my html file
  <button type="button" id="btnHtml" type="button">Download html file</button>

Answer 1

是否有一个函数或插​​件可以检索其文件，而无需任何引用tinymce？

是的，该函数是 getContent 。我可以使用jQuery 3.6.0和Tinymce 5.6.0显示一个示例：

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

document.getElementById('save').addEventListener('click', function() {

  let $email = $('#email');

  // Get content from all editors 
  for (var i = 0; i < tinymce.editors.length; i++) {
    let editable = $email.find('.email-editable')[i];
    editable.innerHTML = tinymce.editors[i].getContent();
    editable.removeAttribute('spellcheck');

    // If you remove "contenteditable" then this node will not open TinyMCE when you click on it.
    editable.removeAttribute('contenteditable');
    editable.classList.remove('mce-content-body');

    // Note that the "getContent" function omits the TinyMCE metadata. Try it with "console.log". ;-)
    console.log(tinymce.editors[i].getContent());
  }

  // For this example, serialize only the #email element and their children
  let emailContent = new XMLSerializer().serializeToString($('#email')[0]);
  let blob = new Blob([emailContent], {
    type: 'text/html'
  });

  // Create download link and then download.
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.download = "index.html";
  a.style.display = 'none';
  a.href = url;
  //document.body.appendChild(a);

  // this link will not work here so try it on "codepen.io" or on your computer
  a.click();

  // Release object URL
  window.URL.revokeObjectURL(url);
});

#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;
}

#save {
  margin-top: 30px;
  padding: 10px 0;
  width: 100%;
}

.special {
  color: #7ae;
}

<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">Unmodifiable header :)</div>
  <div class="email-editable">Insert your text here</div>
  <div class="email-editable">
    <ul>
      <li>Some text and more text...</li>
      <li><span class="special">Special item</span> for you.</li>
    </ul>
  </div>
  <div id="email-footer">2022 © Unmodifiable footer :)</div>

</div>
<button id="save" type="button">Export to html</button>

请注意，我仅删除Tinymce在我的示例中为我生成的容器的属性（我的意思是 .email-edeedible 元素），因此您也可以删除其他属性。我不使用 tinymce.editors [i] .save（）; ，因为它添加了Tinymce的元数据。该元数据对于将来编辑文本很有用。例如，您可以将文本存储在数据库中，然后将其检索以进行进一步编辑。

另请注意，我使用 url.revokeobjecturl 。来自 https：// https：//deeverveperer.mozilla.org/en-us us.org/en-us us /docs/web/api/url/revokeObjecturl ：

完成使用对象URL完成浏览器知道不再保留对文件的引用时调用此方法。

---

目前，我“手动”删除每个元素，这在我看来根本不是最佳的。元素太多（到处都是属性），我敢肯定有一种更简单的方法。

您做对了。另一种方法是将jQuery对象扩展到添加功能。在网页上您有一个示例来添加一个函数，以删除删除所有属性节点。也许您可以编辑该功能以添加白名单（字符串数组）作为输入参数。

示例代码（信用geeksforgeeks.org）是：

$.fn.removeAllAttributes = function() {
    return this.each(function() {
        $.each(this.attributes, function() {
            this.ownerElement.removeAttributeNode(this);
        });
    });
};

$('textarea').removeAllAttributes();

---

更新

如果我为每个编辑器添加了一个特定类不同类别的内容？我尝试使用ID，也有同样的问题。让editable = $ email.find（'。徽标，.banner，.fragment，.content'）[i]; editable.innerhtml = tinymce.editors [i] .getContent（）;

为每个编辑器分配一个唯一的ID。 Tinymce API具有函数 tinymce.get（id）（请参阅参考）返回特定的编辑器，所以我的新示例是...

// create instances of Tinymce for elements #logo, #banner, #fragment and #content.
tinymce.init({
  selector: "#logo",
  inline: true,
  plugins: "advlist lists link image",
  toolbar: "styleselect | bold italic forecolor",
  menubar: false,
});
tinymce.init({
  selector: "#banner",
  inline: true,
  plugins: "advlist lists link image",
  toolbar: "styleselect | bold italic forecolor | bullist numlist | link image| removeformat",
  menubar: false,
});
tinymce.init({
  selector: "#fragment",
  inline: true,
  plugins: "advlist lists link image",
  toolbar: "styleselect | bullist numlist | link image| removeformat",
  menubar: false,
});
tinymce.init({
  selector: "#content",
  inline: true,
  plugins: "advlist lists link image",
  toolbar: "styleselect | bullist numlist | link image| removeformat",
  menubar: false,
});

document.getElementById('saveB').addEventListener('click', function() {
  let $email = $('#email');

  $("#logo").html(tinymce.get("logo").getContent());
  $("#banner").html(tinymce.get("banner").getContent());
  $("#fragment").html(tinymce.get("fragment").getContent());
  $("#content").html(tinymce.get("content").getContent());

  // Clean containers
  $('#logo, #content, #fragment, #banner')
    .removeAttr('spellcheck')
    .removeAttr('contenteditable')
    .removeClass('mce-content-body');

  // For this example, serialize only the #email element and their children
  let emailContent = new XMLSerializer().serializeToString($('#email')[0]);
  let blob = new Blob([emailContent], {
    type: 'text/html'
  });

  // Create download link and then download.
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.download = "index.html";
  a.style.display = 'none';
  a.href = url;
  //document.body.appendChild(a);

  // this link will not work here so try it on "codepen.io" or on your computer
  a.click();

  // Release object URL
  window.URL.revokeObjectURL(url);
});

#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%;
}

.special {
  color: #7ae;
}

<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">Unmodifiable header :)</div>
  <div id="logo">Insert <span style="color:red">your logo</span> here...</div>
  <div id="banner">Add some banner here...</div>
  <div id="fragment">Add <strong>some text</strong> here...</div>
  <div id="content">Insert your content here</div>
  <div id="email-footer">2022 © Unmodifiable footer :)</div>

</div>
<button id="saveB" type="button">Export to html</button>