Question

以下是问题演示

您可以在此处试用：http://fiddle.tinymce.com/SLcaab

这是TinyMCE默认配置

少了所有插件
with extended_valid_elements：＆＃34; span＆＃34;

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 - 请记住，有一个“你好＆＃39;。

。”

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

6 - 使用Html源代码编辑器查看生成的html。

结果（问题）：即使我们添加了＆＃39; span＆＃39;到TinyMCE设置中的extended_valid_elements。

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

编辑1 - 我也尝试过： valid_children：＆＃34; + p [span]＆＃34; - 仍然无效

编辑2：仅在WebKit上重现（在Firefox和IE上确定）

Answer 1

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

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

Answer 2

我有同样的问题，我找到了解决方案。 Tiny MCE删除了没有任何arrtibute的SPAN标记。尝试我们跨越课程或其他attrib。例如：

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

在TinyMCE 4+中这种方法很好用。

Answer 3

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

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

Answer 4

尝试3.5.8：

用tiny ::

替换tiny_mce_src.js（第1121行）中的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();});
};

在tiny_mce.js下面的html中输入tiny_mce_src.js的外部链接

Answer 5

Tinymce删除没有任何属性的span标记。我们可以使用任何属性的span，以便不删除它。

{{1}}

Answer 6

在Tinymce插件参数中启用：使用Joomla文本过滤器。

确保您的用户组已设置＆＃34;未过滤＆＃34;全局配置中的选项＆gt;文字过滤器。

Answer 7

可以通过将其编写为JavaScript脚本来防止WYSIWIG剥离空标记来解决这个问题。这里我的问题是包括使用空＆lt; i＆gt;的Font Awesome图标。或者＆lt; span＆gt;标签

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

Answer 8

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

我们确实需要在某个时候更新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 9

我遇到了同样的问题。空的SPAN标签将被删除。我找到的解决方案是

verify_html: false，

防止TinyMCE移除span元素

9 个答案: