Fullrest – PublicatR (Редактор многосекционный)

[Picko Vitten]

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

 

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

 

 

Когда мы задумали В5, стало ясно, что нам придется сделать «нечто», что должно оформлять контент (статью) по типу википедии. На момент 4.1 наш редактор статей занимался этим: http://v41.fullrest....i-creation-myth это не самый крутой редактор, по сути его там и не было. У википедии много сильных сторон – это опен сорс, все знают как использовать и куча остальных бонусов сверху, но что не нравилось совершенно, так это мета-описание данных, это просто ад, совершенно непонятные символы для выделения жирным, подчеркивания, какие-то «-- --, | |» и остальные чудеса инженерной мысли по части верстки; конечно, у авторов википедии были основания поступать так, наверное были, какие – мне не ведомо, но что мы хорошо поняли, так это то, что рядовому юзеру в этих причудливых конструкциях точно не разобраться (если я до сих пор матерюсь, когда на работе что-то в вики запихиваю… обычный юзер закроет сайт и скажет пока). В этой связи мы решили заменить нотацию википедии на нотацию BBCode, все используют форумы и в той или иной степени знакомы с ББкодами.

 

Так же в википедии не нравился метод хранения статей – линейный список. Действительно, если посмотреть на вики-сайты, становится очевидным, что разработчики википедии не озаботились удобным навигированием по библиотеке, оно и понятно, она ведь задумывалась как библиотека статей, которые являются логическими единицами, а навигация – поиск есть и давай, шагай :) Именно поэтому, зачастую очень сложно найти что либо на той же викии. Поэтому нам требовались отношения «родитель – потомок», в которых мы всегда знаем кто мама, а кто папа и на основе этого знания представляется возможным построение дополнительных органов навигирования (менюшки), которые будут помогать пользователю. Такой подход не отменяет возможности линейного просмотра.

 

Мы хотели сделать редактор который мог бы делать вот такие страницы: http://eu.battle.net.../gameplay/world или похожие. Чтобы пользователь мог сверстать абсолютно любой контент, чтобы он мог сделать целый раздел по игре, вселенной или крутое описание плагина с инструкциями, спойлерами и всякой такой мутью, в общем – чего душа захочет.

 

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

 

В общем смысле, любая статья является набором текста, картинок, таблиц, сносок и различных эллементов других типов. Кто-то может сказать, мол «Пфффф никаких проблем, зачем забор городить». Городить есть зачем, грамотное «обтекание» картинки или четкое размещение определенного контента в левой части статьи на прозрачных условиях – это проблема. Попробуйте сделать так, чтобы у вас был текст, а слева и справа от него было две картинки и при всем при этом, редактор это «грамотно скушал», а потом еще сделайте так, чтобы под каждой из картинок был инфо блок с кратким описанием… Или сделайте так, чтобы слева шел текст, а справа от него было 4 картинки в 2 линии, или 9 картинок в 3 линии. Или скажем справа небольшая табличка, чуть левее 2 небольших графика. Я могу придумать огромное количество примеров, об которые «ВСИГ» редакторы (визуальные) обломают зубы да так, что еще половину сайта с собой заберут, а википедия, если и справится, то будет это выглядеть весьма ущербно, чисто с визуальной точки зрения. И вот как раз ради решения вопроса верстки, мы и «Городим» весь этот «забор».

 

http://pic.fullrest.ru/upl/GfMB8Q3Q.png

 

Решение проблем приходит в виде секций, мы рассудили просто – в газетах есть колонки, там они отлично работают, чем мы хуже? В итоге мы на скорую руку слепили тестовую версию редактора и развернули его на тесонлайне, где он наглядно продемонстрировал – «Да я могу! Всё могу, а то что не могу, все равно могу». Секции работают по принципу колонок, иногда «обтекание» сложных конструкций попросту невозможно, мы эту проблему решили колонками, просто и сердито.

 

Всего существует 8 + 2 видов секций, где «+2» - это специфические секции со скрытым содержимым, которые стоит рассматривать немного отдельно, в виду особенности их функционирования. А так, обычные 8 секций это просто набор разного сочетания колонок от 1 колонки и до 4х колонок.

 

http://pic.fullrest.ru/upl/KpDrBGBr.png

 

Такой диапазон позволяет решать любой круг задач, да и больше 5 колонок мы не сделаем, тк ограничение по ширине у нас 1000 пикселей. При вставке секций, вставляется конфигурация по умолчанию, но ничто не мешает пересортировать колонки по своему вкусу – опции есть.

 

http://pic.fullrest.ru/upl/UzDte5pL.png

 

Так же мы реализовали древовидную структуру не просто «родитель-потомок», а структуру «Корень -> Родитель -> Потомок», где каждый родитель и каждый потомок имеют общий корень. Например, есть «корневая статья» под названия «Вселенная Элдерскролл», у этой статьи огромное количество детишек, но все эти детишки принадлежат вселенной, помимо их конкретных «родственных связей»

 

http://pic.fullrest.ru/upl/0b91ueK8.png

 

Всего несколько компонентов позволяет сделать интересную среду для верстки конента: bbcode + секции + древовидная структура связей.

 

 

Послесловие: в последующих постах я опишу специфику секций и их управления, а после опишу все ббкоды.

[Picko Vitten]

Стоит понимать, что у каждой статьи есть 2 блока редактирования:

1. Это описательные мета-данные (могут различаться у статей, новостей, файлов, рассказов)

2. Область редактора PublicatR

 

Сейчас нас интересует только наш публикатр, в общем смысле это выглядит примерно так

 

http://pic.fullrest.ru/upl/ZsXSiz9C.jpg

 

 

С 8ю секциями я обсчитался, но это не суть важно. Самое главное, что редактор состоит из спеска секций (коих на скрине 2 штуки, одноколончная и трехколоночная) и панели добавления секций, каждая секция будет вставлять в конец списка. Описывать первые семь секций я не вижу смысла, они делают ровно то, на что похожи картинки, если кто-то захочет подробно разжевать момент с колоночками – милости прошу. Я лишь приведу скрин где будет отображен результат эти 2х секций:

 

http://pic.fullrest.ru/upl/TYT5vS4n.jpg

 

 

На это скрине я рамочками указал какая колонка за что отвечает, так же можно заметить что обе секции лежат на едином фоне, как если бы они были «сцеплены вместе» в некую логическую единицу. Именно поэтому сейчас я рассмотрю все органы управления стандартными секциями.

 

Итак, каждая секция имеет 2 уровня органов управления «Общесекционные»

 

http://pic.fullrest.ru/upl/kbl94uFC.jpg

 

 

и… назовем их «колоночными органами управления»

 

http://pic.fullrest.ru/upl/meJ8OCcB.jpg

 

 

 

 

Как может стать понятно, общесекционные работают на всю секцию сразу, а колоночные на конкретные колонки внутри секции (например вам вкрай надо чтобы одна колонка была на темном фоне, а другие две на белом и при этом, на общем белом фоне)

 

Рассмотрим сначала общесекционную панель, в текущей версии там 8 кнопок:

1. «Синие стрелочки» - как может стать ясно, это стрелки для сортировки секций между собой. Стоит отметить что любая пересортировка сбрасывает все вертикальные соединительные цепи, речь о которых пойдет дальше.

 

2. «Соединительные цепи» - это непростой для объяснения механизм. Объясню на примере: «Предположим, что у вас есть 4 секции, которые состоят из одной колонки, потом идет 2 колонки, потом снова одна и дальше 3 колонки. Все эти 4 секции описывают Двемерские артефакты и в первой секции заголовок «Орудия кагренака», но суть в том, что эти секции находятся внутри большой статьи про двемеров и вам хотелось бы выделить эту часть темным фоном.» В первой версии редактора мы так не могли, но в новой мы сделали цепочки при нажатии на одну из кнопок со стрелками вверх/вниз ваша секция будет объединятся в логическую группу с соседней секцией на которую указывает стрелка

 

http://pic.fullrest.ru/upl/McHb45zN.jpg

 

 

Красным выделены зажатые кнопки цветовой группировки, а зеленым выделена «соединительная цепь», которая указывает на явную группировку. Как только вы сгруппировали секции, то при нажатии на смену общесекционного цвета, все участники группы поменяют свой цвет и результат будет таким

 

http://pic.fullrest.ru/upl/sqc6JqH4.jpg

 

 

 

Я поставил темный фон, его лучше видно. Пока что для смены цвета надо нажимать на цвет первого эллемента в цепи, в нашем случае это секция с заголовком «босмеры»

 

3. «Кнопки смены цвета секции» - они меняют цвет подложки всей секции или группы секций как описано выше. Это не запрещает указывать цвета колонкам.

4. «Предпросмотр», после сохранения контента секции вы можете сделать ее предпросмотр, есть некоторые сложности, которые не позволяют делать предпросмотр без сохранения. Но их мы решим.

 

5. «Удаление» - двойной клик на эту кнопку удалит секцию, если что, секции всегда можно восстановить из логов – все пишется, сохраняется каждое действие, все можно возвертнуть ))

6. «Сохранить изменения» - есть странная кнопка, которая появляется при появлении изменений. Она капризная, но рабочая, будем допиливать ее поведение :)

[Picko Vitten]

Рассмотрим сначала колночную панель, количество кнопок зависит от количества колонок:

 

http://pic.fullrest.ru/upl/meJ8OCcB.jpg

 

1. «Кнопка сортировки» - представлена в виде 4х синих стрелок, если вы зажмете эту кнопку и потяните мышку в лево или в право, колоночки пересортируются. При этом сбросится горизонтальная группировка в рамках секции. После сортировки надо жать кнопку «Сохранить изменения», иначе можно столкнуться с весьма забавным багом :)

2. «Соединительные цепи» - соединительные цепи описаны выше, все изложенное там актуально и здесь, с той лишь разницей что объединение происходит по горизонтали в рамках секции. Вы можете использовать оба вида объединения одновременно.

3. «Кнопки смены цвета секции» - меняют цвет конкретной колонки или группы колонок (при группировке).

 

 

 

 

Вот пример использования горизонтальной группировки и текста одной колонки:

http://pic.fullrest.ru/upl/v0oJVLvo.jpg

 

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

 

http://pic.fullrest.ru/upl/a7FVW670.jpg

 

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

В общем различных комбинаций множество.

[Picko Vitten]

Секции со скрытым содержимым

 

Эти секции не просто «колоночки», тут все немного сложнее. Сначала начну с примера.

 

Предположим у вас есть статья про какие-то аспекты связанные с даэдра, но фокус в том, что объем текста у статьи уже неслабый, а вам хотелось бы процитировать еще 6 книг связанных с этим делом, но выходит так, что книги надо цитировать полностью и ссылку на книгу давать не хочется. Конечно, можно взять и просто вставить текст шести книг друг за другом, тем самым увеличив визуальный размер статьи чуть ли не в два раза, в такой ситуации очень пригодился бы способ увеличения «контентной плотности», то есть инструмент, который бы мог в физическом пространстве одной статьи уместить все шесть статей. Именно этим и занимаются секции со скрытым содержимым.

 

http://pic.fullrest.ru/upl/zZbo9Foy.jpg

 

 

Как видно из изображения, кнопки добавления скрытых секций добавляют их с разной шириной «области меню», во всем остальном секции абсолютно идентичны. Как в управлении, так и в идее, мы рассмотрим секцию с широкой менюшкой.

 

 

http://pic.fullrest.ru/upl/PPDHfyvQ.jpg

 

 

Так выглядит только что добавленная секция со скрытым содержимым. Все органы управления секцией и колонками ровно такие-же как и у других секций. Новое же здесь представлено в виде двух кнопок «Добавить новый пункт меню», «Добавить новый разделитель меню» и 3 инпут поля.

 

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

 

http://pic.fullrest.ru/upl/lzUQPkGN.jpg

 

 

 

У контента есть 3 кнопки – первая нужна для сортировки (стрелочка вверх/вниз) зажав которую вы таскаете блоки вверх/вниз, кнопка редактирования блока и кнопка удаления блока. Нажав на кнопку редактирования вы увидите следующее:

 

http://pic.fullrest.ru/upl/ydIa4gbi.jpg

 

 

Поле где написано «Новый разделитель», в него вводится название заголовка блока, который будет отображаться в меню, в «Содержание раздела меню» вводится текст содержимого как и в любую другую секцию.

 

Стоит отметить особое поведение кнопок «Сохранить содержимое» и «Закрыть». Чтобы сохранить изменения надо жать именно на «Сохранить», в то время как «Закрыть» просто сворачивает редактирование без сохранения. Помните, что предпросмотр делается по последней сохраненной секции.

 

Я накидал немного контента в эту секцию , вот так выглядит редактирование разделителя:

 

http://pic.fullrest.ru/upl/dTNNy6Fx.jpg

 

 

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

 

http://pic.fullrest.ru/upl/vnCtrrgx.jpg

 

 

 

Вот так это выглядит в живую:

 

 

http://pic.fullrest.ru/upl/Wht8sQkA.jpg

 

 

 

Я думаю достаточно наглядно и понятно. Нажимая на пункты меню контент справа будет переключаться без перезагрузки страницы. Вот и получается, что в одном объеме, может храниться большое количество текста. Вот пример использования данного вида секции, так сказать, на полную катушку http://www.fullrest.ru/games/elderscrolls-morrowind/magic-6174 поклацав на правое меню все станет ясно. Так же, думаю не вызывает вопросов возможность добавления текста над меню и под меню – практика тесонлайна показала, что такая возможность очень кстати, что и видно из примера с магией морровинда.

[Picko Vitten]

BBCODE

 

В этом посте я опишу основные ББкоды и некоторые особенности связанные с их использованием.

 

Итак, МНЕ НЕ НРАВИТСЯ ТАКОЙ ПОДХОД:

 

http://pic.fullrest.ru/upl/u0O4Uanu.jpg

 

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

 

http://pic.fullrest.ru/upl/ZJAPQ4wF.jpg

 

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

 

Хочу начать с одного конкретного тега – «параграф» или [p][/p]. Этот тег должен обрамлять обычный текст, внутри этого тега разрешены теги, которые обведены на картинке ниже:

 

http://pic.fullrest.ru/upl/8bOuqBte.jpg

 

Никакие другие теги внутри параграфа не разрешены, ни таблицы, ни картинки, ни упаси господи менюшки. А вот параграфы могут располагаться внутри других тегов, за исключением очевидно, ошибочных применений, по типу «А вставлю ка я параграф в пункт меню – будет весело». Еще стоит отметить, что внутри параграфа работает автоматический перенос строк, который вне параграфа приходится инициировать посредством тега [br]. Отсутствие автоматической простановки параграфов обусловлено глубинными проблемами, реализация которых займет достаточно большое количество времени (которого сейчас не так много).

[Picko Vitten]

ДОБАВЛЕНИЕ МЕНЮ

 

Итак, карту сделали, еще всяких фиксов накатили, теперь есть время продолжить на тему наших ббкодов. Рассмотрим один из самых сложных моментов в нашем редакторе. Он сложен именно для понимания.

 

Итак, изучим вот эти кнопки:

 

http://pic.fullrest.ru/upl/ow8JZ10t.jpg

 

 

Рассмотрим кнопку добавления системной меню:

 

http://pic.fullrest.ru/upl/PZTip46e.jpg

 

Системные меню разрабатывались для того, чтобы использовать мощь нашей «древовидной» организации статей, всего лишь в 1 тег, вы можете вставить в страницу меню, которая будет помогать пользователям в навигации по контенту. Системные меню имеют 2 системны отсчета, с позиции которых они строят пункты меню: от лица текущей статьи (в зеленой рамке) и от лица своего родителя (в синей рамке). В красной рамке результирующий ббкод, параметр :horizontal является опциональным и приказывает меню расположиться в горизонтальной плоскости.

 

http://pic.fullrest.ru/upl/Ezl7bzSQ.jpg

 

Предположим у вас есть вот такая вот структура статей, вы создали эту структуру, написали статьи, организовали древо и тут встал вопрос «А как пользователь должен перемещаться между страницами? Мне что? Надо самому лепить ссылки на каждую страницу?», действительно, перспектива лепить кучу ссылок удручает и вот тут «врывается» наша системная меню. Скажем вы находитесь в статье «Ролевая система» и вам необходимо вставить меню, которая подскажет пользователю, что есть и подстатьи, в таком случае мы жмем на вставку системной меню и выбираем кнопку в зеленой рамке, она говорит системе «Вставь в меню моих потомков», то есть подстатьи статьи ролевая система, которые находятся на первом уровне вложения.

 

http://pic.fullrest.ru/upl/2gl7r7ho.jpg

 

Хорошо, а как быть в случае, когда вы находитесь в «подстатье», но для поддержания единообразия меню, вам требуется показать соседние статьи? Те статьи, которые находятся на том-же уровне вложения, что и текущая? Тут на помощь приходит кнопка в синей рамке – она идет к своему родителю и просит его рассказать кто его дети, этих детей менюшка вставляет как свои пункты.

 

http://pic.fullrest.ru/upl/2XMHLF0q.jpg

 

 

 

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

http://pic.fullrest.ru/upl/ylZbkbV1.jpg

 

и обчного - вертикального:

http://pic.fullrest.ru/upl/bJ6tnMMR.jpg

[Picko Vitten]

Это конечно хорошо, когда машина может построить меню за вас, но что делать, когда вам жизненно важно, сделать меню «под себя», а может вам нужно меню с вложениями? В общем, и на этот вопрос у нас есть ответ, в виде вставки меню обычного типа:

http://pic.fullrest.ru/upl/RJdn63lA.jpg

 

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

http://pic.fullrest.ru/upl/jVvzZNWH.jpg

 

Как видно из этого примера, функционал достаточен, чтобы реализовать любые эротические фантазии верстальщика.

[Picko Vitten]

Ну и в завершении описания менюшек, осталось описать вставку горизонтальной меню, это 2 кнопки в разделе меню, которые имеют зеленые вкрапления:

http://pic.fullrest.ru/upl/EicKImrE.jpg

 

На изображении все достаточно красноречиво, при вставке меню вы можете выбрать по сколько пунктов в линию надо отображать. Это нужно для того, чтобы у вас была гибкость в этом плане, если много места (например секция, которая состоит из одной колонки), то можно сделать 5 пунктов в линию, а если места мало, то поменьше. Не самый сложный момент для объяснения.

 

По поводу вставки пункта меню (он в зеленой рамке), я думаю я приведу картинку со стрелочками и это будет лучше всяких слов.

http://pic.fullrest.ru/upl/U8UldCfp.jpg

[Picko Vitten]

Верстаем таблицы!

 

Данный материал будет легок к изучения для людей знакомых с HTML, те кто с ним не знаком и смогут во всем это разобраться, будут приятно удивлены (если потом придется столкнуться с HTML), дело в том, что для верстки таблиц мы взяли за прототип верстку HTML, будем заниматься просвещением народных масс, так сказать. Итак, как всегда заряжаем из далека ))) Как обычный человек привык рисовать таблицы на листке? Обычно это один из этих двух вариантов:

 

http://pic.fullrest.ru/upl/t/2Vq1yubp_1000x625.png

 

http://pic.fullrest.ru/upl/t/VYEXPyGB_1000x625.png

 

 

Допускаю, что кто-то может и по другому рисовать, но будем реалистами – обычно так дело и обстоит )) Иногда люди сначала рисуют шапку, потом рисуют горизонталки и следом вертикалки. Так вот, дело в том, что такие схемы построения таблиц в нашем редакторе не работают :) Придется учиться думать по другому, как машина ))) И опять же, кидаем камень из далека ))) Суть интерпретаторов такова, что они кушают код, тот или иной, но код. Программисты пишут код как писатели книги – строчка за строчкой, соответственно машина идет сверху вниз по коду и интерпретирует/транслирует его в ту форму, которая будет понятна компьютеру/браузеру. Поскольку все выражено в линиях то по этой логике, в HTML таблицы рисуются линиями, казалось бы, «Мы и так линиями рисуем таблицы, в чем подвох?», подвох есть, он заключается в том, что да – горизонтальные линии остаются, но вертикальных линий просто нет, в каждой линии есть набор «ячеек» (квадратиков), которые ассоциируются с соседями по вертикали, но технически, они не являются частью вертикальной линии:

 

http://pic.fullrest.ru/upl/t/aFT1l2nG_1000x625.png

 

 

Получается, что сначала нужно сказать браузеру «Чувак, вот я хочу сделать таблицу», ставить соотвествующий ббкод и браузер понимает, что вот тут у него будет таблица, потом говорите браузеру «Хочу линию в таблицу» и ставите соотвествующий тег, а уже потом говорите «А теперь, давай мы в линию ячеек насыпем, ну чтобы по взрослому, мы же таблицу тут делаем»

 

[table][/table] - внутри этого тега лежат линии, тейбл отмечен зеленой рамкой.

[tr][/tr] – этот тег говорит, что это линия в таблице, отмечен синим. Также есть два аналогичных тега: [thead][/thead] – используется для создания горизонтального заголовка таблицы, к нему применяются особые стили, так-же очень правильная вещь с точки зрения SEO – такую таблицу очень оценит гугл; [tfoot][/tfoot] – подвал таблцы, идея как у [thead] но, тфуут находит в конце таблицы.

[td][/td] – это ячейка, читай колонка, кусочек колонки, тк физических колонок у нас нет, правильно? Именно внутри ТД будет находится текст!!! Есть еще тег [th][/th] – это ячейка заголовочного типа, она может использоваться внутри [thead], [tfoot] и отдельно (скажем вам в край надо, чтобы заголовочные ячейки были в левой колонке, не сложно придумать пример, да?).

 

http://pic.fullrest.ru/upl/81f7Wb9h.jpg

 

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

[Picko Vitten]

Остался один важный вопрос, точнее их несколько, это дополнительные параметры ))

 

Тег [table][/table] – это обычный вариант записи, но если вам понадобится добавить название таблицы? Скажем «1.1: Таблица коэффициентов распределения…», что делать? Все просто:

[table=НАЗВАНИЕ ТАБЛИЦЫ][/table] – “=название” является опциональным параметром, может быть, а может и не быть.

 

В данной реализации теги [tr], [thead], [tfoot] дополнительных параметров не имеют.

А вот теги [td],[th] имеют. Вот вам два примера:

 

http://pic.fullrest.ru/upl/t/ZOkpGsfZ_1000x625.png

 

Параметр [td:r3] можно расшифровать как «Возми эту ячейку и прикрепи к ней еще 2 (3 потому что текущая ячейка + 2 снизу и того получается результирующая ячейка высотой 3), которые находятся под ней».

Параметр [td:c2] можно расшифровать примерно также, за тем исключением что происходит прикрепление одной ячейки слева.

 

Соответственно r – ROW (строка), c – COLUMN (столбец).

Параметр [td:w200] – говорит машине, что мы хотим столбец шириной 200 пикселей.

Параметры [td:left], [td:right], [td:center] – являются горизонтальной ориентацией текста.

 

Параметры [td:top], [td:bottom], [td:middle] – являются вертикальной ориентацией текста.

 

Конечно, никто не запрещает делать такие связки: [td:r3:c2:left:bottom:w200] последовательно опциональных параметров не имеет значения.

Разобраться в специфике опционалок не так просто, но это дело решит практика. Плюс у нашей системы много аналогий с HTML и если потом будете верстать таблицы на хтмле, то вам все будет до боли знакомо :)

 

Вот решение двух примеров выше:

 

http://pic.fullrest.ru/upl/t/J1HZsDhC_1000x625.png

 

http://pic.fullrest.ru/upl/t/CUnyAl7W_1000x625.png

[Picko Vitten]

БЛОК ФОРМАТИРОВАНИЯ

 

В этом разделе панели редактирования нет ничего сложно, вообще ничего сложного.

 

http://pic.fullrest.ru/upl/7iNNU2OD.jpg

 

В синей рамке находятся теги/кнопки:

 

Разделительная линия

---

– просто вставляет разделительную линию, может кому пригодится.

Отступ сверху

10

, где вместо десятки вы ставите цифру отступа в пикселях. Предположим, вам по какой-то причине понадобилось сдвинуть таблицу/картинку/текст на 125 пикселей вниз? Нет ничего проще – ставите тег

125

в необходимое место и получаете свой отступ.

 

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

 

В красной рамке находятся 2 тега, которые не совсем простые. Они призваны создавать обтекание текста. Предположим у вас есть текс и вам нужно сделать информационную врезку, но для этого не хотелось бы делать отдельную секцию, дабы не создавать разрывы в тексте. А может вам хочется вставить небольшую табличку в эту врезку или видео?

 

http://pic.fullrest.ru/upl/t/wqF8vxzc_1000x625.png

 

 

Функционал блоков с обтеканием позволяет реализовать все это! Синтаксис тега такой:

[float:left/right(:smaller/small/medium/large/larger)]СОДЕРЖИМОЕ[/float]

Параметры :right или :left являются обязательными и определяют с какой стороны будет происходить обтекание. Left – это значит что блок находится у левого края, а текст обтекает справа.

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

:smaller – блок шириной 25% от контейнера в котором он (тег [float]) находится;

:small – блок шириной 33% от контейнера в котором он (тег [float]) находится;

:medium – блок шириной 50% от контейнера в котором он (тег [float]) находится;

:large – блок шириной 66% от контейнера в котором он (тег [float]) находится;

:larger – блок шириной 75% от контейнера в котором он (тег [float]) находится.

 

http://pic.fullrest.ru/upl/t/6KSfaMRu_1000x625.png

 

Блоки с обтеканиями позволяют реализовать достаточно интересные варианты оформления. Практикуйтесь и вы поймете все нюансы с ними связанные.

[morrow]

Где на сайте обычным пользователям можно потренироваться в умении клепать статьи с помощью данного редактора? Теоретически можно попробовать при заливке нового плагина, но если я не хочу ничего заливать в базу, а просто хочу попробовать сделать статью с красивым оформлением?

[Casval Sylvius]

Где на сайте обычным пользователям можно потренироваться в умении клепать статьи с помощью данного редактора? Теоретически можно попробовать при заливке нового плагина, но если я не хочу ничего заливать в базу, а просто хочу попробовать сделать статью с красивым оформлением?

Так можешь сделать статью\плагин для тренировки скрытым и тренироваться на ней.

Потом как натренируешься удалить.

[Moran Remar]

Либо банально создать блог или написать обзор скажем.

[morrow]

Либо банально создать блог или написать обзор скажем.

Так нет прав же (по крайней мере у меня, либо я не вижу как это делать). Сделаю как предложил Сильвиус.

[Moran Remar]

 

Так нет прав же (по крайней мере у меня, либо я не вижу как это делать). Сделаю как предложил Сильвиус.

Там же у всех права есть)) Просто нужно перейти в раздел блогов и нажать кнопку углу "Добавление контента".

[morrow]

Там же у всех права есть)) Просто нужно перейти в раздел блогов и нажать кнопку углу "Добавление контента".

И ведь точно.) Спасибо.