Визуальный редактор WordPress — Раскрашивайте шорткоды

Я хочу выделить шорткоды в визуальном редакторе WordPress определенным цветом. Например. У меня есть следующие короткие коды

[shortcode1] Some text [/shortcode1]
              ...
[shortcode2] Some text [/shortcode2]

и хочу присвоить каждому из них уникальный цвет, чтобы пользователь мог легко увидеть, что он должен изменить.

Я нашел несколько решений для подсветки синтаксиса в редакторе HTML, но не для самого визуального редактора. Знаете ли вы плагин для достижения этой цели?


wordpress wp-editor
person Sp0tlight    schedule 15.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Удалось получить рабочее решение.

Что вам нужно:

Расширенный плагин TinyMCE

Что ты должен делать:

Настройте плагин Visual Blocks, который поставляется с плагином TinyMCE, и добавьте классы css для каждого элемента, который вы хотите выделить (просто переберите все элементы p и проанализируйте innerHTML и проверьте, содержит ли он ваш конкретный шаблон).

В итоге это выглядит примерно так: введите здесь описание изображения

ИЗМЕНИТЬ

Класс, который необходимо настроить: ... /plugins/tinymce-advanced/mce/visualblocks/plugin.min.js

Метод window.NodeList && (a.addCommand("mceVisualBlocks", function() {) — это то место, которое вам нужно настроить. Просто вставьте код в начале метода:

var elements = a.getDoc().getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
        // here you should do some Regex or simple string contains string check
        // of the innerHTML and set the css class of the element. E.g.:

 if((elements[i].innerHTML.indexOf("foo") >= 0 
     && elements[i].className.indexOf("baz") < 0){
            elements[i].className = "baz";
 }
}

В том же каталоге вы найдете css/visualblocks.css. Вы должны добавить CSS в соответствии с вашими настройками, например:

.mce-visualblocks .baz {
    background-color: red;
}

Вы можете переключать выделение в визуальном редакторе в верхней строке меню (Вид->Показать блоки).

Если у меня будет время, я поработаю над лучшим решением, но оно удовлетворяет всем требованиям, которые у меня есть на данный момент.

person Sp0tlight    schedule 22.04.2015