在構建電子郵件模板編輯器時如何處理tinyMCE行內模式？-有解無憂

我正在創建自己的電子郵件編輯器，我正在使用tinyMCE。因此，在我的頁面上，我有一個帶有一百個按鈕（影像）的側邊欄，它們對應于 html 塊。當我單擊一個按鈕時，相應的代碼會被注入到帶有 tinyMCE 的大型可編輯文本區域中。所以我有一個大塊，看起來像你在這里看到的：（這個是用 ckeditor 制作的，但我有類似的東西）。

理想情況下，我想要的是看起來像此處可見的“行內”演示：

所以我有幾個問題：

我可以在樣式 div 中插入所有塊，而不使用所有按鈕等，并且只使塊本身可編輯嗎？

我在這里讀到行內模式在 td 上不起作用，因此有必要創建 div 并以 id 或類為目標。

那些構建構建器電子郵件的人如何進行？所有電子郵件生成器（stripo、bee、mozaico、designmodo 等）都使用行內編輯（ckEditor、專有解決方案或 tinyMCE）。那么他們是否將每個注入到 js 中的 html 組件都用一個 div 包圍，然后在下載檔案時將其洗掉？沒有更簡單的方法嗎？我負擔不起創建數百個 tinyMCE 實體

如果有人在這方面有經驗，我會很感激任何建議......謝謝

uj5u.com熱心網友回復：

您可以擁有許多具有同一類的 div。例如，我們有 4 個 .email-editable 類的 div。所有 .email-editable 元素都將具有相同的選項。當您想保存所有編輯器時，您需要呼叫 tinymce.editors 來獲取 Tinymce 實體的陣列，并為每個實體呼叫 save()：

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

// this is the action for Click event
// this action will save all editors
document.getElementById('saveB').addEventListener('click', function(){
  // save all editors
  for (var i = 0; i < tinymce.editors.length; i  ) {
    tinymce.editors[i].save();
}
  // show html on console
  let html = document.getElementById('email').innerHTML;
  console.log(html);
  // with Jquery:
  // console.log($('#email').html());
});

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

<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">Default header (this is not editable)</div>
  <div class="email-editable"><p>CUSTOM CONTENT 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p><ul><li>Item 1</li><li>Item 2</li></ul></div>
  <div class="email-editable"><p>CUSTOM CONTENT 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p></div>
  <div class="email-editable"><p>CUSTOM CONTENT 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p></div>
  <div class="email-editable"><p>CUSTOM CONTENT 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem eget nunc faucibus semper.</p></div>
  <div id="email-footer">2022 &copy; My Company (this is not editable)</div>
  
</div>
<button id="saveB" type="button">Save email</button>

更新的答案

New template that uses table element. When you click the Save button, then each TD element of tbody will have the content (no DIV) but will lost the TinyMCE editor.

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('saveB').addEventListener('click', function() {
  // obtain all TD elements where you edit the content
  let blocks = document.getElementById('email-body').getElementsByTagName('td');
  // change all inner HTML for each TD element.
  for (var i = 0; i < tinymce.editors.length; i  ) {
    let content = tinymce.editors[i].getContent();
    blocks[i].innerHTML = content; // note that this will remove the TinyMCE editor
  }
  // show html on console
  let html = document.getElementById('email').innerHTML;
  console.log(html);
});

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

<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>
<table id="email">
  <thead>
    <tr>
      <td id="email-header">Default header (this is not editable)</td>
    </tr>
    </thread>
    <tfoot>
      <tr>
        <td id="email-footer">2022 &copy; My Company (this is not editable)</td>
      </tr>
    </tfoot>
    <tbody id="email-body">
      <tr>
        <td>
          <div class="email-editable">
            <p>CUSTOM CONTENT 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
              eget nunc faucibus semper.</p>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="email-editable">
            <p>CUSTOM CONTENT 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
              eget nunc faucibus semper.</p>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="email-editable">
            <p>CUSTOM CONTENT 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
              eget nunc faucibus semper.</p>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="email-editable">
            <p>CUSTOM CONTENT 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi libero. Morbi condimentum, <strong>ante non feugiat cursus, sapien ante laoreet turpis, fringilla finibus ante erat quis lorem</strong>. Donec cursus sem
              eget nunc faucibus semper.</p>
          </div>
        </td>
      </tr>
    </tbody>


</table>
<button id="saveB" type="button">Save email</button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447271.html

標籤：jQuery 电子邮件模板微小的

上一篇：模板Complex<T>的“未定義對`operator>>(std::istream&,Complex<int>&)的參考”

下一篇：在函式模板的回傳型別中使用decltype可消除由于例外規范引起的錯誤