Проверьте, находитесь ли вы в определенном блоке контента в TinyMCE и не разрешаете плагину добавлять его в этот блок контента, если он есть

Question

Итак, у меня есть форма TinyMCE на моей странице, и она предварительно заполнена "разделами" (div с конкретными именами классов).

У меня есть пара плагинов, которые добавят в TinyMCE больше "секции ".

Мне это нужно, поэтому, когда я нажимаю кнопку плагина, он проверяет, находится ли курсор внутри" секции ", и вставляет" секцию "в другую" секцию ".

Не уверен, что мне нужно идти в этом направлении.Любая помощь была бы полезна.

больше информации: Ниже приведен пример плагина, который добавляет кнопку, которая просто вставляет простой dov в редактор при выделении / курсоре.

ed.addButton('pluginbutton', {
    title : 'MyPlugin',
    image : 'img/test.png',
    onclick : function() {
        ed.selection.setContent('<div>test</div>');
    }
});

В настоящее время я думаю, что onBeforeSetContent - это обработчик событий API, который мне нужно установить, чтобы обрабатывать, нахожусь ли я в другом разделе и, если да, отправлять сообщение на экран.Если нет, просто используйте метод setContent.Я не уверен, как именно это настроить, хотя я все еще в этом разбираюсь.Любая помощь здесь?

Answer 1

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

Примечание: Я использую метод jQuery closest. Я понял, так как вы работаете в основной команде jQuery, вы, вероятно, используете его для этого проекта. Если нет, просто рефакторинг этой строки по мере необходимости. Важная часть заключается в том, что selection.getNode() возвращает элемент DOM, который является родительским для начальной и конечной точек выбора.

ed.addButton('pluginbutton', {
    title : 'MyPlugin',
    image : 'img/test.png',
    onclick : function() {
        if( !$(ed.selection.getNode()).closest('div.section').length ){
            ed.selection.setContent('<div class="section">test</div>'); 
        }
    }
});

Дополнительные мысли

Кроме того, чтобы ваш плагин был достаточно осведомлен, чтобы он не помещал div как дочерний элемент тега p, вы можете сделать что-то вроде этого:

Заменить щелчок выше следующим:

onclick: function(){
    var $node = $(ed.selection.getNode());
    if( !$node.closest('div.section').length ){
       // Get highest element that is a direct child of the `body` tag:
       var $parent = $node.closest('body > *');
       // Wrap with our special section div
       if($parent.length) $parent.wrap('<div class="section"></div>');
    }
}

Answer 2

Я не знаю TinyMCE конкретно, но должна быть возможность извлечь текущий элемент DOM из ed.selection. Если это возможно (я уверен, что он использует какую-то функцию или свойство получателя), вы должны сделать следующее:

• Отметьте «запрещенную» область, используя идентификатор или класс («<div class='protected'>»)
• проследуйте по наследству выбора (используя свойство parentNode элемента) и проверьте, имеет ли один из родительских элементов «защищенный» класс или идентификатор.
• Если идентификатор найден, не выполнять setContent(); в противном случае выполните его.