How do you handle tinyMCE inline mode while building an email template editor?-CodePudding

I'm creating my own email editor, I'm using tinyMCE. On my page, I therefore have a sidebar with a hundred buttons (image) which correspond to html blocks. when I click on a button, the corresponding code is injected into a large editable textarea with tinyMCE. So I have a big block that looks like what you can see here: (this one is made with ckeditor but i have something similar).

What I would like ideally is rather something that looks like the "inline" demo visible here:

So I have several questions:

Can I insert all the blocks in a styled div, without all the buttons etc. and make only the blocks themselves editable?

I read here that the inline mode did not work on td, and therefore that it is necessary to create div and target an id or a class.

How those who build builder emails proceed ? All email builder (stripo, bee, mozaico, designmodo etc) use inline editing (ckEditor, proprietary solutions or tinyMCE). So do they surround each html component injected in js with a div, and then they remove it when the file is downloaded ? isn't there a simpler way? I can't afford to create hundreds of tinyMCE instances

If anyone has experience in this area, I would appreciate any advice...thanks

CodePudding user response：

You can have many div with the same class. For example, we have 4 divs with .email-editable class. All .email-editable elements will have the same options. When you want to save all editors, you need to call tinymce.editors to get the array of Tinymce instances and call save() for each instance:

// 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 ><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 ><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 ><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 ><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>

Updated answer

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