Поддержка Проблемы и решения Возможно ли создавать в визуальном редакторе вложенные блоки одного класса?

  • Люблю использовать вложенные блоки div с увеличенным левым margin для демонстрации иерархии.
    Заводишь один класс

    .incBlock
    {
     display: inine-block
     margin-left: 30px;
     border: solid 1px black;
    }

    и применяешь его ко всем div-ам — внешнему, внутреннему, вложенному во внутренний и так далее. Получается довольно наглядно, и сильно напоминает табуляцию в программировании для обозначения блоков.
    Так вот в WordPress мне с такой простой задачей никак не удаётся справится, если я пытаюсь делать всё через визуальный редактор.
    Редактор — Tiny MCE Advanced. В ней включено использование стилей из editor-style.css, где прописан нужный мне стиль блока .incBlock.
    Я выделяю текст, успешно применяю к нему свой блочный стиль, делаю внутри блока перенос на Shift+Enter, ввожу текст нового вложенного блока, пытаюсь применить к нему тот же стиль, но вместо того, чтобы применить его и сделать его вложенным блоком он наоборот «снимает с него» стиль в который он уже обёрнут (он же одноимённый).
    В итоге организовать такую вот вложенность блоков через визуальный редактор удаётся только совсем дурацким образом: насоздавать кучу одинаковых нумерованный стилей incBlock1 incBlock2 incBlock3 и так до неизвестности. Каждый вложенный блок приходится оборачивать стилем отличным от родительского. Гемор — согласитесь ведь.

    Есть ли какой нибудь 4красивый способ организовать описанную мной работу с блоками? Может быть можно как то отключить снятие стиля при применении к тексту того же самого стиля? Думаю это бы решило проблему.

Просмотр 15 ответов — с 1 по 15 (всего 26)
  • Не уверен, что правильно всё понял, но наверное нужно написать плагин для TinyMCE со своими кнопками и стилями для редактора (и соответственно, дублирующихся в тему).
    Рецептов как это сделать в интернетах море.

    Модератор Denis Yanchevskiy

    (@denisco)

    WordPress-разработчик, denisco.pro

    Есть ли какой нибудь 4красивый способ организовать описанную мной работу с блоками?

    1. Сделать списком и через css убрать маркеры.
    2. Сделать шорткод. Вложенные шорткоды вполне работают.

    Denis Yanchevskiy

    1. Сделать списком и через css убрать маркеры.

    Списком не получится, по крайней мере без ручного назначения стиля всему списку, так как через визуальный редактор стили применяются не ко всему списку, а к отдельным элементам (li).
    Шорткод не хочу. Мало ли. Может надоест WP, перелезу на самописные рельсы, придётся там либо автозамену делать, либо поддержку шорткодов городить.

    SeVlad

    наверное нужно написать плагин для TinyMCE со своими кнопками и стилями для редактора

    Да не надо свои плагины писать. Есть плагин в котром можно создать кнопки для TinyMCE, которые будут вставлять заданные шорткоды или тэги прямо в текст и прямо вокруг выделенного фрагмента текста. Только вот беда — для таких вставок тоже работает правило невозможности вложенного стиля с тем же именем. Была идея сделать не одну а 2 кнопки, одна из которых вставляет открывающий тэг, вторая закрывающий, но идея оказалась провальной из за того что WP сразу после вставки открывающего тега автоматически лепит закрывающий. Так что если кто-то знает как это отключить — сообщайте. Это будет очень круто и позволит городить невероятных монстров прямо из визуального редактора.

    Модератор Denis Yanchevskiy

    (@denisco)

    WordPress-разработчик, denisco.pro

    Списком не получится, по крайней мере без ручного назначения стиля всему списку.

    Зачем назначать класс списку, у элементов которого и так есть отступы?

    так как через визуальный редактор стили применяются не ко всему списку, а к отдельным элементам (li)

    Назначить родительскому и прописать css-правила для вложенных?

    Зачем назначать класс списку, у элементов которого и так есть отступы?

    Для обводки. Чтобы каждый дочерний был обведён своей обводкой + обводкой родителя. Без назначения класса списку обводка только у элементов списка и она не обводит вложенных элементов.

    Назначить родительскому и прописать css-правила для вложенных?

    Насколько я знаю в CSS нет селекторов, позволяющих выбрать родителя элемента.

    Насколько я знаю в CSS нет селекторов, позволяющих выбрать родителя элемента.

    зато есть селектор для дочерних элементов

    Насколько я знаю в CSS нет селекторов, позволяющих выбрать родителя элемента.

    Разве «cascading» в данной аббревиатуре ни о чем не говорит?
    И про наследование не знаете?

    https://html5book.ru/osnovy-css/:

    Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой.

    Разве «cascading» в данной аббревиатуре ни о чем не говорит?
    И про наследование не знаете?

    Окей. Имеем:

    <ul>
     <li>1</li>
     <li>2</li>
     <li>
      <ul>
       <li>31</li>
      </ul>
    </ul>

    имеем класс
    .incB
    {
    border: solid 1px red;
    nargin-left: 30px;
    }
    и имеем невозможность назначить наш класс непосредствено UL, толкьо LI (так редкатор WP рабтает)
    Как мне при помощи наследования и каскдности добиться того, чтобы применив класс к LI эти свойства получил UL?

    Да и вообще списки не помогут, потому, что к ним нельзя применять display: inline-block, вернее можно, но сразу после этого все строки внутри списка выстраиваются в ряд. Они больше не стоят каждый с новой строчки.

    и имеем невозможность назначить наш класс непосредствено UL

    вы избранный?
    у всех других такая возможность есть:
    редактор:


    консоль:

    • Ответ изменён 6 лет, 6 месяцев назад пользователем tuxfighter.
    • Ответ изменён 6 лет, 6 месяцев назад пользователем tuxfighter.

    вы избранный?
    у всех других такая возможность есть

    Вы недопоняли суть вопроса. Я пытаюсь обеспечить работоспособность всех нужных фишек из визуального редакотора, без переключения на текстовый. Через визуальный редактор невозможно назначить стиль списку. Можно только элементам списка.

    понятно, вы не ищите легких путей — так и запишим

    По вашему, искать каждый раз нужный фрагмент текста в огромном полотне моноширного шрифта — это лёгкий путь? (Про поиск по странице знаю — не удовлетворяет)

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

    Через визуальный редактор невозможно назначить стиль списку. Можно только элементам списка.

    С чего бы?

Просмотр 15 ответов — с 1 по 15 (всего 26)
  • Тема «Возможно ли создавать в визуальном редакторе вложенные блоки одного класса?» закрыта для новых ответов.