TinyMCE - selection.setContent with getContent (Warp Button)

Question

I wanna have a button to wrap content with all tags.

My Code:

      editor.addButton('MobileToggleArea', {
      text: '<M>',
      icon: false,
      onclick: function (){
          editor.selection.setContent('<div class="mobile-hide">' + editor.selection.getContent({format: 'raw'}) + '</div><div class="mobil-mehr">mehr</div>');
      }
  });

Example:

<p>test</p>
<p>test</p>

Result:

<p>&nbsp;</p>
<div class="mobile-hide">
<p>test</p>
<p>test</p>
<div class="mobil-mehr">mehr</div>
<p>&nbsp;</p>

Problem: It is adding additional p tags, why? how to prevent?

Other Problem (but not so bad) is when selected only one p Tag:

<div class="mobile-hide">test</div>
<div class="mobil-mehr">mehr</div>

The p Tag has gone away.

Plugins: char word count autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus table template visualblocks anchor hr nonbreaking textcolor colorpicker

Thanks for helping out.

Perhaps you could make a running example at TinyMCE Fiddle so people can see the code in action? You should also mention what version of TinyMCE you are using and what browser(s) you have used when this fails. — Michael Fromin
fiddle.tinymce.com/Kagaab/9 here the fiddle where you can reproduce my problem. Thanks — user715449

user715449 user715449 · Accepted Answer · 2017-09-25T11:05:29

I fixed both problems with Jquery:

      editor.addButton('MobileToggleArea', {
      text: '<M>',
      icon: false,
      onclick: function (){
          editor.selection.setContent('<div class="mobile-hide">' + editor.selection.getContent({format: 'raw'}) + '</div><div class="mobil-mehr">mehr</div>');
          jQuery(editor.getBody()).find('.mobile-hide').prev().remove('p');
          jQuery(editor.getBody()).find('.mobile-hide').next().next().remove('p');
          jQuery(editor.getBody()).find('.mobile-hide').each(function(){
          if(!jQuery(this).find('*').length){
           jQuery(this).wrapInner('<p></p>');
          }
          });
      }
  });

Open for better Solutions =)

TinyMCE - selection.setContent with getContent (Warp Button)

1 Answers