Новый редактор постов форума

[Silentspec84]

Новый форум использует редактор WYSIWYG (что видишь, то и получишь), который позволяет форматировать контент в сообщениях. Сообщения форматируются визуально - больше нет необходимости использовать устаревшие подходы, например BB коды.

Редактор используется CKEditor, который является лидирующим WYSIWYG веб-редактором. Таким образом, у нас есть доступ к большому количеству плагинов и тем, доступных для CKEditor.

 

Давайте теперь разберемся с функционалом редактора.

 

Как ответить в теме

Для того, чтобы ответить в теме, достаточно просто спуститься в самый низ страницы и нажать мышкой в поле "Ответить в этой теме":

 

Также в самом верху страницы справа есть кнопка "Ответить"

 

 

 

Стандартный вид окна редактора сообщений

 

1 - редактирование в режиме верстки. В данном режиме вы можете верстать свое сообщение, как верстали бы html страницу. Более подробно - ниже.

2 - выделяет текст жирным

3 - курсив

4 - нижнее подчеркивание

5 - зачерктуный текст

6 - нижний петит Х_n

7 - верхний петит Х²

8 - вставка ссылки:

 

Вставка ссылки

В данном случае ссылка будет вставлена через специальный помощник. Также вы можете просто скопировать ссылку с другой страницы и вставить ее в текст. При этом видео будет преобразовано в видеоформат, картинка - в формат картинки. Ссылка на сайт останется ссылкой на сайт, но выглядеть будет так:

http://tlap.com/forum/

Чтобы задать атрибуты для вашей ссылки, и нужен помощник. Из ссылки выше он превратит вашу ссылку в такую:

Ссылка на лучший форум про форекс

Также вы можете отредактировать ссылку в режиме верстки, но это подойдет не всем.

 

 

9 - Цитирование

Цитирование

При нажатии на кнопку вы создадите простую цитату, без авторства:

Цитата

Пример простой цитаты

Также вы можете цитировать конкретное сообщение целиком:

После этого в редакторе вы увидите:

Цитировать также можно и отдельные участки текста сообщения. Для этого выделите мышкой участок сообщения, который собираетесь цитировать и нажмите "Цитировать выделенное":

Также, если вы собираетесь цитировать сразу несколько сообщений пользователей, можно воспользоваться функцией мультицитирования:

После того, как вы выбрали несколько сообщений пользователей, которые собираетесь цитировать, достаточно нажать на кнопку в правом нижнем углу для завершения:

После этого вы увидите в редакторе все цитируемые сообщения:

 

Также есть возмодность просто обратиться к кому-то из пользователей, нажав на кнопку @:

 

В сообщении это будет выглядеть так: @pavlus777

При клике на упоминание можно перейти в профиль пользователя, а сам пользователь получит оповещение о том, что его упомянули.

 

10 - код

Код

 

Этот инструмент прежде всего пригодится разработчикам для демонстрации кода:

Для языка mql стоит выбрать первый пункт - "Языки С". Выглядит это следующим образом:

for(i=0; i<10; i++)
{
   time1 = iTime(NULL, PERIOD_MN1, i);
   time2 = time1 + 60*60*24*31;
   TrendLine(time1, time2);   // Моя функция линии по цене открытия месяца.
}

Выбор языка влияет только на цветовое отображение, поэтому вы можете поэкспериментировать.

 

 

11 - смайлы

Смайлы

 

Для выражения своих бурных эмоций вы можете использовать смайлы:

Их немалое количество, и, возможно, будет еще больше

 

 

12 - спойлер

 

Спойлер

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

Чтобы спойлер был с титулом (пояснение сверху о том, что находится в спойлере), нужно зайти в "Исходник" и поправить код вручную. Это несложно. Вот как выглядит код:

<div class="ipsSpoiler" data-ipsspoiler="">
	<div class="ipsSpoiler_header">
		<span>Тут описание спойлера</span>
	</div>

	<div class="ipsSpoiler_contents">
		<p>
			Тут все, что вы хотите скрыть под спойлером
		</p>
	</div>
</div>

А вот так будет выглядеть этот код:

Тут описание спойлера

Тут все, что вы хотите скрыть под спойлером

 

 

 

13 - спецсимволы
 

Спецсимволы

 

Эта кнопка добавляет возможность добавить к тексту сообщения спецсимволы:

 

 

14 - таблица
 

Таблицы

 

Это конструктор простых таблиц. Вот как он выглядит:

Небольшое пояснение: Вы можете при помощи этого инструмента верстать расположение элементов вашего поста. Чтобы сделать таблицу невидимой, нужно размер границ выставить на 0. Например:

 

Пример

	Слева картинка, справа текст
Текст слева, картинка справа
Верстка в две колонки - тут левая колонка	Верстка в две колонки - тут правая колонка

 

 

Или даже так

Верстка в три колонки - левая колонка

Верстка в три колонки - средняя колонка

Верстка в три колонки - правая колонка

 

 

 

 

16 - увеличение отступа

 

Увеличение отступа

 

Тут все просто:

вот так

 

 

 

17 - маркированный список

 

Маркированный список

Создает вот такой список:

• раз
• два
• три

 

 

18 - нумерованный список

 

Нумерованный список

Создает вот такой список:

1. раз
2. два
3. три

 

19 - 21 - выравнивание

по левому краю

по центру

по правому краю

 

22 - цвет шрифта

23 - цвет фона

24 - размер шрифта

25 - шрифт, семейство

26 - просмотр сообщения. При этом вы можете посмотреть, как ваше сообщение смотрится на PC, на планшете и на телефоне.

27 - добавление медиа
 

Добавление медиа

 

Через это меню вы также можете загрузить картинку или видео:

 

 

28 - добавление файлов

Добавление файлов

 

Под вашим сообщением вы можете обнаружить вот такую форму прикрепления файлов:

Можно добавить файл перетаскиванием или же загрузить через форму. После загрузки файла он прикрепится к сообщению, но его никто не увидит, пока вы не добаите его в само сообщение:

Так что будьте внимательны!

 

 

29 - уведомление об ответах

 

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

 

30 - сокрытие поста

 

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

 

31 - публикация поста

 

Собственно, публикация поста.

Файл.txt

[Silentspec84]

Теперь что касается пункта 1 - кнопка "Исходник". Это - очень мощный инструмент в умелых руках. Он позволяет в прямом смысле слова верстать ваши посты.

Можно сделать вот такую таблицу, например:

№	Пример таблицы	Пример таблицы
1	Пример таблицы	Пример таблицы

 

К слову, ее код такой:
 

Код таблицы

 

<table style="border-spacing: 0 10px; font-family: 'Open Sans', sans-serif; font-weight: bold; border-collapse: collapse;">
	<tbody>
		<tr>
			<th style="background: #AFCDE7; color: white; padding: 10px 20px; border-style: solid; border-width: 0 1px 1px 0; border-color: white;">
				<span style="font-family:Verdana,Geneva,sans-serif;">№</span>
			</th>
			<th style="background: #AFCDE7; color: white; padding: 10px 20px; border-style: solid; border-width: 0 1px 1px 0; border-color: white;">
				<span style="font-family:Verdana,Geneva,sans-serif;">Пример таблицы</span>
			</th>
			<th style="background: #AFCDE7; color: white; padding: 10px 20px; border-style: solid; border-width: 0 1px 1px 0; border-color: white;">
				<span style="font-family:Verdana,Geneva,sans-serif;">Пример таблицы</span>
			</th>
		</tr>
		<tr>
			<td style="background: #D8E6F3; border-style: solid; border-width: 0 1px 1px 0; border-color: white; text-align: center;">
				<span style="font-family:Verdana,Geneva,sans-serif;">1</span>
			</td>
			<td style="background: #D8E6F3; border-style: solid; border-width: 0 1px 1px 0; border-color: white;">
				<span style="font-family:Verdana,Geneva,sans-serif;">Пример таблицы</span>
			</td>
			<td style="background: #D8E6F3; border-style: solid; border-width: 0 1px 1px 0; border-color: white;">
				<span style="font-family:Verdana,Geneva,sans-serif;"><span style="color:#f1c40f"><strong>Пример таблицы</strong></span></span>
			</td>
		</tr>
	</tbody>
</table>

 

 

То есть, это просто html теги и стили css.

 

Еще можно сверстать такой вот блок. Знак инфо - это просто картинка. Вот его код:

Спойлер

<div style="border: 1px solid; 
            margin: 10px 0px; 
            padding: 15px 10px 15px 50px; 
            background-repeat: no-repeat; 
            background-position: 10px center; 
            color: rgb(0, 82, 155); 
            background-color: rgb(189, 229, 248); 
            padding-left:15%;">
  <span class="pln">Тут ваш текст</span>
</div>

Сами цвета, как и оформление, могут быть любыми.

 

 

 

То есть, вы можете верстать все, что угодно. 

 

Например, вот такой вот пост   Что то такое поясняющее, почему новый редактор - это реально круто. Ну, пояснять мне лениво, просто покажу. Заодно дам ссылки на курсы по верстке.

Знакомство с HTML и CSS   Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.:    Читать   Основы HTML   Изучаем разметку: от простейших текстовых тегов и типовой структуры страницы до сложных форм, видео и аудио.   Читать   Основы CSS   Знакомимся с синтаксисом CSS, тренируемся использовать селекторы, каскадность и наследование.   Читать

Ну а если возникнут трудности   Вот тут справочник по html   Справочник по HTML А если трудности с оформлением   То тут вот справочник по css тоже есть   Справочник css

Ну и футер вашего поста   Тут можно толкнуть заключительное слово о том, что теперь все в ваших руках - полный контроль над постами.

[Старик]

3 часа назад, Silentspec84 сказал:

30 - сокрытие поста

 

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

Только администраторам или и модераторам?

Имхо, все модеры должны видеть скрытые посты как ДСП - в т.ч. для возможности обсуждения каких-то вопросов между собой, типа модерского чата.

Как иначе сообща обсудить вопросы модерации или какие-то ситуации на форуме?

[Silentspec84]

Надо попробовать, не могу точно сказать

[MIG32]

Пропала  @ .

[pavlus777]

@MIG32

На клавиатуре же есть

[MIG32]

 Пропала и @, и возможность редактировать опубликованное сообщение. Возможно где-то есть тайная инструкция?

  

 

Я вошел под вами, изменил сообщение. Три точки справа вверху надо жать, там выбрать изменить. 

@pavlus777

 

Все работает

Изменено 25 декабря, 2020 пользователем MIG32

[pavlus777]

@MIG32

Три точки справа вверху жмете, а там вариант "Изменить" выбираете

[MIG32]

В 25.12.2020 в 23:36, MIG32 сказал:

 

 

 

В 25.12.2020 в 23:36, MIG32 сказал:

 Пропала и @, и возможность редактировать опубликованное сообщение. Возможно где-то есть тайная инструкция?

  

 

Я вошел под вами, изменил сообщение. Три точки справа вверху надо жать, там выбрать изменить. 

@pavlus777

 

 

Объясните, пожалуйста, как имя с собакой  в голубом овальчике вставляется?

Изменено 5 января, 2021 пользователем MIG32

[ju.vskv]

48 минут назад, MIG32 сказал:

Объясните, пожалуйста, как имя с собакой  в голубом овальчике вставляется?

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