Отступ текста абзаца?

Поддержка
1

Чувствую себя идиотом, но не могу понять, почему это не работает:

<div style="margin-left: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Результат следующий:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

При этом текст явно не отступлен!

Наверное, всё же должен существовать какой-то способ настроить отступ текста, даже если по какой-то причине это неочевидно, верно?

2

Я использую несколько &emsp;, если мне нужно отступить что-то, но это работает только для первой строки.

3

Это работает только для первой строки абзаца.

4

Мне кажется, это у меня на кончике языка. :slightly_smiling_face:

Редактирование: Я перепутал это с добавлением четырёх пробелов к новому абзацу в элементе списка, чтобы сохранить выравнивание.

Я обнаружил, что можно обернуть блок текста в теги <ul> </ul>, и это создаст отступ. Это немного кустарно, но может быть полезно, если у вас нет доступа к настройкам администратора для создания решения с обёрткой из более глубоких уровней.

Например:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
5

Наверное, четыре пробела в Markdown означают блок кода

6

Discourse разрешает только определённые HTML-теги и атрибуты. Я предполагаю, что они полностью блокируют атрибут style, так как он обладает практически безграничными возможностями.

7

Есть ли способ разрешить больше тегов/атрибутов в настройках нашего сайта?

8

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

9

Я считаю, что стиль div не включен в белый список, поэтому вам понадобится плагин или компонент. Однако вы можете создать собственный bbcode-тег wrap прямо в админ-панели форума. Добавьте следующие строки в раздел Настройка > ваша тема или компонент > Общие CSS:

[data-wrap="indent"] {
    margin-left: 20px;
}

Затем в вашем сообщении используйте этот код для нужного текста:

[wrap="indent"]
Ваш абзац
[/wrap]
10

Я не знал, что так можно. На своём форуме я использовал теги span с атрибутом data-theme:

image
image372×172 4.02 KB

(можно посмотреть вживую здесь: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

Чем-то отличается тег [wrap]? Можно ли использовать его для встроенных стилей?
Есть ли другие способы настройки стилей постов?

11

Поскольку мы используем элемент div, у нас есть довольно много возможностей для настройки, но для встроенных стилей, на мой взгляд, ваш вариант — лучший.

Не уверен, что сразу доступно множество других опций. Когда я часто использую что-то, я создаю плагин или компонент для добавления класса div или bbcode и размещаю иконку на панели инструментов.

12

Один простой вопрос… Как это сделать?

13

Вы можете использовать мой компонент темы в качестве примера:

У вас есть два варианта: добавить иконку на панель инструментов или в меню шестерёнки

image
image485×241 3.13 KB

Панель инструментов:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "align_justify_button",
        group: "extras",
        icon: "align-justify",
        perform: e => e.applySurround('[wrap="justify"]\n', '\n[/wrap]', 'align_justify_text')
    });
});

Меню шестерёнки

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
      action: "floatleft",
      icon: "indent",
      label: "float_left_button"
  };
});

С плагином у вас будет больше дополнительных опций, но компонента должно быть достаточно: GitHub - MonDiscourse/discourse-formatting-toolbar: Add formatting options on your post (center, align to right, justify a text, etc.) · GitHub