TinyMCE-带有getContent的selection.setContent（Warp按钮）

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.

Answer 1

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