防止TinyMCE的自删除跨度元素

Question

这里的问题是示范

你可以在这里尝试一下：http://fiddle.tinymce.com/SLcaab

这是TinyMCE的默认配置

• 较少所有的插件
• 与extended_valid_elements：“span”

1 - 打开HTML源代码编辑器

2 - 粘贴此HTML到HTML源代码编辑器：

<p><span>Hello</span></p> 
<p><a href="http://www.google.com">Google 1</a></p> 
<p><a href="http://www.google.com">Google 2</a></p> 

3 - 在HTML源代码编辑器中单击更新粘贴在编辑器中的HTML

4 - 请记住，'你好'有一个跨度。

5 - 将光标放在Google 2之前，然后按退格键（两个链接应在同一段落元素内合并）。

6 - 使用Html Source Editor查看生成的html。

结果（问题）：尽管我们在TinyMCE设置中将'span'添加到extended_valid_elements，但在html文档中没有更多跨度。

注意：我删除了所有的插件，以确保问题是TinyMCE的核心。

编辑1 - 我也试过： valid_children： “+ P [跨度]” - 仍然无法正常工作

编辑2：只有转载WebKit的（OK在Firefox和IE）

Answer 1

您是否正在运行最新版本的TinyMCE？我遇到了相反的问题 - 新版本的TinyMCE会添加不需要的span元素。降级到v3.2.7已经解决了我的问题，如果您愿意使用旧版本，那么这对您也可能有用。

类似的错误已被报道，请参阅以下链接过滤 “跨度” 元素上的错误： http://www.tinymce.com/develop/bugtracker_bugs.php#!order=desc&column=number&filter=span&status=open,verified&type=bug

Answer 2

尝试此3.5.8：在tiny_mce_src.js

1. 更换cleanupStylesWhenDeleting（与此::

   function cleanupStylesWhenDeleting() { 
        function removeMergedFormatSpans(isDelete) { 
          var rng, blockElm, wrapperElm, bookmark, container, offset, elm; 
          function isAtStartOrEndOfElm() { 
            if (container.nodeType == 3) { 
              if (isDelete && offset == container.length) { 
                return true; 
              } 
   
              if (!isDelete && offset === 0) { 
                return true; 
              } 
            } 
          } 
   
          rng = selection.getRng(); 
          var tmpRng = [rng.startContainer, rng.startOffset, rng.endContainer, rng.endOffset]; 
   
          if (!rng.collapsed) { 
            isDelete = true; 
          } 
   
          container = rng[(isDelete ? 'start' : 'end') + 'Container']; 
          offset = rng[(isDelete ? 'start' : 'end') + 'Offset']; 
   
          if (container.nodeType == 3) { 
            blockElm = dom.getParent(rng.startContainer, dom.isBlock); 
   
            // On delete clone the root span of the next block element 
            if (isDelete) { 
              blockElm = dom.getNext(blockElm, dom.isBlock); 
            } 
   
            if (blockElm && (isAtStartOrEndOfElm() || !rng.collapsed)) { 
              // Wrap children of block in a EM and let WebKit stick is 
              // runtime styles junk into that EM 
              wrapperElm = dom.create('em', {'id': '__mceDel'}); 
   
              each(tinymce.grep(blockElm.childNodes), function(node) { 
                wrapperElm.appendChild(node); 
              }); 
   
        blockElm.appendChild(wrapperElm); 
            } 
          } 
   
          // Do the backspace/delete action 
          rng = dom.createRng(); 
          rng.setStart(tmpRng[0], tmpRng[1]); 
          rng.setEnd(tmpRng[2], tmpRng[3]); 
          selection.setRng(rng); 
          editor.getDoc().execCommand(isDelete ? 'ForwardDelete' : 'Delete', false, null); 
   
          // Remove temp wrapper element 
          if (wrapperElm) { 
            bookmark = selection.getBookmark(); 
   
            while (elm = dom.get('__mceDel')) { 
              dom.remove(elm, true); 
            } 
   
            selection.moveToBookmark(bookmark); 
          } 
        } 
   
   
         editor.onKeyDown.add(function(editor, e) { 
          var isDelete; 
   
          isDelete = e.keyCode == DELETE; 
          if (!isDefaultPrevented(e) && (isDelete || e.keyCode == BACKSPACE) && !VK.modifierPressed(e)) { 
            e.preventDefault(); 
            removeMergedFormatSpans(isDelete); 
          } 
        }); 
   
        editor.addCommand('Delete', function() {removeMergedFormatSpans();}); 
   }; 
   

2. 线1121）把一个外部链接tiny_mce_src.js在HTML以下tiny_mce.js

Answer 3

我有同样的问题，我找到解决方案。微小的MCE删除了SPAN标签，没有任何arrtibute。试试我们跨班或另一个attrib。例如：

<h3><span class="emptyClass">text</span></h3> 

在TinyMCE 4+这个方法很好的工作。

Answer 4

可以通过将它写成JavaScript脚本来防止WYSIWIG剥离空标签，从而使用它。这里我的问题是包含字体真棒图标，其中使用空<我>或<范围>标签。

<script>document.write('<a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook"></i></a>');</script> 

Answer 5

插入extended_valid_elements : 'span'到tinymce.init：

tinymce.init({ 
    selector: 'textarea.tinymce', 
    extended_valid_elements: 'span', 
    //other options 
}); 

Answer 6

TinyMCE的取下跨度标签没有任何属性。我们可以对任何属性使用span，这样它就不会被删除。

e.g <span class="my-class">Mahen</span> 

Answer 7

遇到了这个问题，并不满意所有提供的答案。

我们确实需要在某些时候更新wordpress，所以更改核心文件不是一个选项。给元素添加属性只是为了修复tinyMCE行为似乎也不是正确的。

随着functions.php文件中的以下钩子，tinyMCE将不再删除空的<span></span>标签。

function tinyMCEoptions($options) { 
    // $options is the existing array of options for TinyMCE 
    // We simply add a new array element where the name is the name 
    // of the TinyMCE configuration setting. The value of the array 
    // object is the value to be used in the TinyMCE config. 

    $options['extended_valid_elements'] = 'span'; 
    return $options; 
} 
add_filter('tiny_mce_before_init', 'tinyMCEoptions'); 

Answer 8

在在TinyMCE插件参数启用： 使用的Joomla文字过滤。

确保您的用户组在全局配置>文本过滤器中设置了“无过滤”选项。