tinymce - 防止 TinyMCE 移除 span 元素

Question

这是问题演示

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

这是 TinyMCE 默认配置

少了所有插件
带有扩展有效元素：“跨度”

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 Source Editor 中单击 update 以将 html 粘贴到编辑器中

4 - 请记住，“Hello”周围有一个跨度。

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

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

结果（问题）：即使我们在 TinyMCE 设置中的扩展有效元素中添加了“跨度”，html 文档中也没有跨度。

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

编辑 1 - 我也试过： valid_children : "+p[span]" - 仍然不起作用

编辑 2：仅在 WebKit 上复制（在 Firefox 和 IE 上正常）

score 19 · Accepted Answer

插入：extended_valid_elements : 'span'_tinymce.init

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

score 11 · Accepted Answer

我有同样的问题，我找到了解决方案。Tiny MCE 删除了没有任何属性的 SPAN 标签。尝试我们跨类或其他属性，例如：

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

在 TinyMCE 4+ 中，这种方法效果很好。

score 2 · Accepted Answer

Tinymce 删除没有任何属性的 span 标签。我们可以将 span 与任何属性一起使用，这样它就不会被删除。

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

score 1 · Accepted Answer

试试这个 3.5.8：

将 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 的外部链接

score 1 · Accepted Answer

可以通过将其编写为 JavaScript 脚本来使用该工作，以防止 WYSIWIG 剥离空标签。在这里，我的问题是包含使用空 <i> 或 <span> 标签的 Font Awesome 图标。

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

score 1 · Accepted Answer

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

我们确实需要在某个时候更新 wordpress，因此更改核心文件不是一种选择。为元素添加属性只是为了修复 tinyMCE 行为似乎也不是正确的事情。

使用文件中的以下钩子，functions.phptinyMCE 将不再删除空<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');

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

我遇到了同样的问题。正在删除空的 SPAN 标记。我找到的解决方案是

verify_html: false,

score 0 · Accepted Answer

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

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

tinymce - 防止 TinyMCE 移除 span 元素

9 回答 9

Related

Reference