Предотвратите удаление TinyMCE элементов span

Вот демонстрация проблемы

Вы можете попробовать его здесь: http://fiddle.tinymce.com/SLcaab

Это настройка по умолчанию TinyMCE

  • меньше всех плагинов
  • с extended_valid_elements: "span"

1 - Откройте редактор HTML файлов

2 - Вставьте этот html в редактор исходного текста HTML:

<p><span>Hello</span></p>
<p><a href="#" onclick="location.href='http://www.google.com'; return false;">Google 1</a></p>
<p><a href="#" onclick="location.href='http://www.google.com'; return false;">Google 2</a></p>

3 - Нажмите "Обновить" в редакторе источников HTML, чтобы вставить html в редактор

4 - Помните, что есть пробел вокруг "Hello".

5 - Поместите курсор непосредственно перед Google 2 и нажмите backspace (две ссылки должны объединиться внутри одного и того же элемента абзаца).

6 - Посмотрите на полученный html, используя Редактор исходного кода HTML.

Результат (проблема): в html-документе больше нет пробела, хотя мы добавили "span" в расширенные_valid_elements в настройках TinyMCE.

Примечание. Я удалил все плагины, чтобы убедиться, что проблема лежит в основе TinyMCE.

Изменить 1 - Я также попытался: valid_children: "+ p [span]" - все еще не работает

Изменить 2: Только для воспроизведения в WebKit (ОК в Firefox и IE)

Ответ 1

Вы используете новейшую версию TinyMCE? У меня была противоположная проблема: новые версии TinyMCE добавили бы элементы нежелательного диапазона. Переход на v3.2.7 исправил проблему для меня, которая также может работать для вас, если вы хотите использовать старую версию.

Сообщается об аналогичных ошибках, см. следующую ссылку для фильтров, отфильтрованных на элементе "span": http://www.tinymce.com/develop/bugtracker_bugs.php#!order=desc&column=number&filter=span&status=open,verified&type=bug

Ответ 2

У меня та же проблема, и я нахожу решения. Крошечный MCE удалил тег SPAN без каких-либо arrtibute. Попробуйте нас с классом или другим атрибутом. например:

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

В TinyMCE 4+ этот метод хорошая работа.

Ответ 3

Вставьте extended_valid_elements : 'span' в tinymce.init:

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

Ответ 4

Попробуйте это для 3.5.8:

  • Замените cleanupStylesWhenDeleting в tiny_mce_src.js(строка 1121) с помощью этого::

     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_src.js в свой html ниже tiny_mce.js

Ответ 5

Tinymce удалить тег span без атрибута. Мы можем использовать span с любым атрибутом, чтобы он не удалялся.

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

Ответ 6

В параметрах плагина Tinymce разрешено: Используйте текстовый фильтр Joomla.

Убедитесь, что ваша группа пользователей установила параметр "Нет фильтров" в глобальных конфигурациях > текстовых фильтров.

Ответ 7

Можно использовать эту работу, написав ее как JavaScript script, которая предотвращает удаление WYSIWIG пустых тегов. Здесь моя проблема заключалась в том, чтобы включать в себя значки шрифта Awesome, которые используют пустой < я > или <span> теги.

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

Ответ 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');