web-dev-qa-db-ja.com

TinyMCEがスパン要素を削除しないようにする

これが問題のデモンストレーションです

ここで試すことができます： 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-カーソルをGoogle2の直前に置き、バックスペースを押します（2つのリンクは同じ段落要素内にマージされます）。

6-Htmlソースエディタを使用して、結果のhtmlを確認します。

結果（問題）：TinyMCE設定のextended_valid_elementsに「span」を追加したにもかかわらず、htmlドキュメントにスパンがなくなりました。

注：問題がTinyMCEのコアにあることを確認するために、すべてのプラグインを削除しました。

編集1-私も試しました：valid_children： "+ p [span]"-まだ機能しません

編集2：WebKitでのみ再現（FirefoxとIEではOK）

tinymce
11
W3Max

TinyMCEの最新バージョンを実行していますか？私は反対の問題を抱えていました-TinyMCEの新しいバージョンは不要なスパン要素を追加します。 v3.2.7にダウングレードすると、問題が修正されました。古いバージョンを使用する場合にも問題が解決する可能性があります。

同様のバグが報告されています。「span」要素でフィルタリングされたバグについては、次のリンクを参照してください。 http://www.tinymce.com/develop/bugtracker_bugs.php#!order=desc&column=number&filter=span&status=open、検証済み＆type = bug

1
am_

挿入extended_valid_elements : 'span'からtinymce.init：

tinymce.init({
    selector: 'textarea.tinymce',
    extended_valid_elements: 'span',
    //other options
});
13
Jang-Ho Bae

私は同じ問題を抱えており、解決策を見つけています。 Tiny MCEは、何の問題もなくSPANタグを削除しました。クラスまたは別の属性にまたがってみてください。例えば：

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

TinyMCE 4+では、この方法はうまく機能します。

11
Konrad

この質問に出くわし、提供されたすべての回答に満足していませんでした。

ある時点で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');
1
caramba

WYSIWIGが空のタグを削除しないようにするJavaScriptスクリプトとして記述することで、回避策を使用することができます。ここでの私の問題は、空の<i>または<span>タグを使用するFontAwesomeアイコンを含めることでした。

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

Tinymceは属性なしでスパンタグを削除します。削除されないように、任意の属性でspanを使用できます。

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

Tinymceプラグインパラメーターで有効にします。Joomlaテキストフィルターを使用します。

ユーザーグループがグローバル設定>テキストフィルターで「フィルターなし」オプションを設定していることを確認してください。

1
Jon

3.5.8でこれを試してください：

  1. 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();});
};

  2. tiny_mce.jsの下のhtmlにtiny_mce_src.jsへの外部リンクを配置します

1
Ben Eliott

私は同じ問題を抱えていました。空のSPANタグは削除されています。私が見つけた解決策は

verify_html: false、

0
Dip