TinyMCE - selection.setContent 和 getContent（变形按钮）答案

【问题标题】：TinyMCE - selection.setContent with getContent (Warp Button)TinyMCE - selection.setContent 和 getContent（变形按钮）
【发布时间】：2018-03-01 16:24:34
【问题描述】：

我想要一个按钮来包装所有标签的内容。

我的代码：

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

例子：

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

结果：

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

问题：它正在添加额外的p 标签，为什么？如何预防？

其他问题（但不是那么糟糕）是只选择了一个 p 标签：

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

p 标签已消失。

插件：char word count autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus table template visualblocks anchor hr nonrupt textcolor colorpicker

感谢您的帮助。

【问题讨论】：

也许您可以在 TinyMCE Fiddle 上创建一个运行示例，以便人们可以看到代码在运行中？您还应该提及您正在使用的 TinyMCE 版本以及失败时使用的浏览器。
fiddle.tinymce.com/Kagaab/9 这里是您可以重现我的问题的小提琴。谢谢

标签： javascript jquery html tinymce tinymce-4

【解决方案1】：

我用 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>');
          }
          });
      }
  });

打开以获得更好的解决方案 =)

【讨论】：