Руководство использования BUEditor на drupal.ru + Bonus

Прислано: EllECTRONC

пт, 17/04/2009 - 18:18

Другие статьи по теме:

Это заметка о форматировании и написании текста. Так как не перевелись еще те, кто спрашивают, что-то типа, а как сюда добавить картинку, хотя… они и не переведутся :)

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

Поэтому если вы не знаете:

  • как сюда добавить|вставить картинку
  • как разукрасить код (как добавить подсветку кода)
  • как добавить рабочую ссылку на комментарий или ссылку содержащую #

то читайте до конца.

Меню

BUEditor

  — Вставка изображения

Для того чтобы вставить изображение, нужно указать:

Адрес изображения
Если вы хотите вставить изображение из сети то просто укажите здесь URL этого изображения. Если же вы хотите вставить изображение со своего компьютера, то для начала загрузите изображение, используя «Прикрепленные файлы». После загрузки изображения вы увидите его URL, который и нужно вставить в это поле.
Так же можно снять галочку «Отображать в списке».
Ширина x Высота
Указывается дополнительно, но не обязательно.
Альтернативный текст
Текст, который будет показан при наведении курсора мыши на изображение.
Выравнивание
Выберите из списка выравнивание изображения. Например, выравнивание «По левому краю» приведет к тому, что изображение будет слева от текста.

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

Адрес ссылки
Собственно это и есть URL :)
Текст подсказки
Текст, который будет показан при наведении курсора мыши на ссылку.

  — Вставка ссылки на ресурс drupal

Ссылка на
Выберите ресурс на который вы хотите указать.
Module — вставляет тег для преобразования ссылки на страницу модуля на drupal.org
Theme — вставляет тег для преобразования ссылки на страницу темы на drupal.org
User — вставляет тег для преобразования ссылки на страницу пользователя на drupal.ru
API.ru — вставляет тег для преобразования ссылки на определенную страницу на api.drupal.ru
API.org — (по ходу и в правду надо убрать) то же api.drupal.org
PHP — вставляет тег для преобразования ссылки на определенную страницу (функции и т.п.) на php.net
Имя / Название
Вот тут и пишете на что именно хотите получить ссылку. Имя пользователя, название модуля или темы, название функции или хука и т.п. Например, чтобы вставить ссылку на модуль views — так и пишите в этом поле views и в списке Ссылка на нужно выбрать Module. Ссылку на пользователя EllECTRONC — пишите EllECTRONC и в списке Ссылка на нужно выбрать User.

Пример #1:
Вставка в пост ссылки на тему marinelli. Нажимаем на кнопку № 3 (Вставка ссылки на ресурс drupal) и в поле Имя / Название пишем marinelli. В списке Ссылка на выбираем Theme.

Получаем:
[theme=marinelli][/theme] →  marinelli[/theme]
т.о. последнее [/theme] лишнее и можно убрать;
для ссылки с одноименным названием достаточно
[theme=marinelli]
для ссылки с любым другим название допишите текст между тегами.
[theme=marinelli]тут текст — Маринелли[/theme] →  тут текст — Маринелли

Аналогично с остальными тегами.

  — Вставка ссылки на материал drupal

Эта кнопка позволяет указать короткую ссылку на материал для сайтов drupal.ru и drupal.org.

"EllECTRONC" написал(а):

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

Выберите ресурс
Выберите сайт, на который хотите указать ссылку
Номер node
Вставьте номер ноды

Вы получите [#25421][/#], добавьте текст
[#25421]бла бла[/#] → бла бла

  — Создание нумерованного списка

Аналогично и — Создание маркированного списка

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

  — Использование подсветки кода

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

  • выбрать тег с кодом из списка и потом вписать/вставить между ними код
  • вставить код, после чего выделить его, нажать на эту кнопку и выбрать из списка подсветку нужного языка.

Примечание: При вставке php кода с использованием этой кнопки вам потребуется либо добавить пробелы между кодом и тегами, либо сделать так, чтобы теги и код начинались с новых строк, иначе подсветка кода не будет работать. Это происходит из-за того что тег <code lang="php"> заменяется на <?php, а </code> на ?>. т. е. пробелы ставятся как и при обычном использовании <?php code ?>. Так же можно использовать стандартный вариант добавления подсветки к php коду, т.е. <?php тут код ?> и <% тут код %>.

  — Граница анонса

Вставляет тег <!--break--> для разбивки ноды.

Трюки

Ссылка со знаком #
Для того чтобы ссылки вида http://drupal.ru/node/nid#comment-id не ломалась, изменить формат ввода на «BBCode + HTML»

Bonus — как пользоваться кнопками цитирования

Кнопка #1 — Ответить на этот комментарий на отдельной странице

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

Кнопка #2 — Ответить с цитированием на отдельной странице

Тоже что и выше + цитирование текста. Выделите текст, который вы хотите процитировать и нажмите на эту кнопку. Откроется новая страница с формой комментария с цитированным текстом.

Кнопка #3 — Цитирование

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

Кто-то желает дополнить?

‹ А вы заметили сколько развелось Руководство использования BUEditor на drupal.ru + Bonus ›

Комментарии


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

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано axel в пт, 17/04/2009 - 20:28.
axel

Ссылку на статью надо вставить в bueditor, пока не придумал как. Может добавить кнопку "справка", которая будет открывать отдельное окно с этой статьёй?


Опубликовано Atl в пт, 17/04/2009 - 22:04.
Atl

К вставке изображения нужно добавить:
hspace="10" - отступ по горизонтали текста от изображения на 10 ед.
vspace="15" - отступ по вертикали текста от изображения на 10 ед.
------------
Своим уже затрахался эту прописную истину объяснять - лепят до кучи... .

P.S. Неплохо бы доп.поля выбора придумать для установки отступов текста.


Опубликовано EllECTRONC в сб, 18/04/2009 - 09:42.
EllECTRONC

"axel" написал(а):

Ссылку на статью надо вставить в bueditor, пока не придумал как. Может добавить кнопку "справка", которая будет открывать отдельное окно с этой статьёй?

Не надо! Понимаешь ли в чем дело, то кол-во кнопок, которое сейчас есть полностью занимает панель для монитора в 17", еще одна кнопка пойдет во второй ряд, а это не приемлемо.
Но предлагаю, тогда, так:

  1. либо копируем этот редактор в новый и добавляем туда пару кнопочек и ставим его на создание и редактирование материала, а на комментах останется этот;
  2. либо убираем кнопки выравнивание текста влево и вправа, т.к. я недоумеваю зачем «они» надо, и за место них цепляем, либо см. п.1 :)

Вообще есть желание добавить кнопари для <dl><dt><dd>.
Еще вариант на страницу создания нод ссылочку сверху крупно и не будем мучить редактор.
И, кстати, кнопка информация у бьюика присутствует...

"Atl" написал(а):

К вставке изображения нужно добавить:

Уга, дак там и есть по 10px со всех сторон — что есть не правильно! Я не знаю кто изменил.

"Atl" написал(а):

Неплохо бы доп.поля выбора придумать для установки отступов текста.

Ага, ща! И будем текст потом искать по странице :)
Надо, всего лишь навсего, настроить нормально и доверить это одному человеку, чтоб не было — одни добавил, другой убрал.

А самое первое, я думаю, надо убрать таки фильтр со шпалами.


Опубликовано direqtor в сб, 18/04/2009 - 04:26.
direqtor

Ай, маладца...

Кстати, мимо меня пролетело, эта радость в свободном доступе или только для д.ру?


Опубликовано Владимир Ситников в сб, 18/04/2009 - 05:17.
Владимир Ситников

Предлагаю убрать кнопку подчеркнутый текст. Ибо это ЗЛО!
И гнев Аллаха упадет на голову тех кто будет подчеркивать слова!
Ибо подчеркивать можно только ссылки!


Опубликовано EllECTRONC в сб, 18/04/2009 - 08:49.
EllECTRONC

 direqtor, ну пока только на друпал.ру и еще парочке сайтов, у меня сейчас маловато времени, а хочется это все красиво описать и чтоб у других осталось места для творчества. Процесс идет, но медленно. Кому не терпится заполучают в обмен на зеленые.
 vladimir-sitnikov, ну что за предрассудки?

"Владимир Ситников" написал(а):

Ибо подчеркивать можно только ссылки!

А куда деть исконно русское выражение: "Я подчеркиваю ..."? :)
Ссылки, они подсвечиваются, а подчеркиваться должны при наведении.


Опубликовано direqtor в сб, 18/04/2009 - 09:07.
direqtor

"EllECTRONC" написал(а):

Ссылки, они подсвечиваются, а подчеркиваться должны при наведении.

Не совсем верно. Изначально ссылки были придуманы ярко-синими и подчеркнутыми. Тогда никакого hover в помине не было, как и самого CSS.

Это только в последние годы стало почти стандартом смягчение цвета ссылок и подчеркивание их только при наведении мыши.


Опубликовано EllECTRONC в сб, 18/04/2009 - 09:54.
EllECTRONC

Да, помню, но сейчас все иначе. Мне не нравится когда все ссылки подчеркнуты.
Под подсвечиванием я и имела в виду, что они выкрашены в синий цвет :)


Опубликовано direqtor в сб, 18/04/2009 - 10:36.
direqtor

"EllECTRONC" написал(а):

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

Я рад что процесс идет. Сам только что на один модуль порт на D6 выложил.


Опубликовано direqtor в сб, 18/04/2009 - 10:37.
direqtor

I've understood.


Опубликовано a.mohax в пн, 20/04/2009 - 03:40.
a.mohax

По центру не могу выровнять.
leftcenterright


Опубликовано tech-life в ср, 22/04/2009 - 13:16.
tech-life

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

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


Опубликовано EllECTRONC в ср, 22/04/2009 - 19:19.
EllECTRONC

tech-life, покажите мне сайт или читайте тут.


Опубликовано Chupzzz в сб, 25/04/2009 - 13:28.
Chupzzz

Какой hspace и vspace? Давно нету таких атрибутов. Какой год на дворе?
Лучше class="inlineimg" делать или типа того.


Опубликовано jason32 в пт, 15/05/2009 - 15:26.
jason32

а можно выложить все кнопки и настройки? Хочется такой комплектик на свой сайт


Опубликовано EllECTRONC в пт, 15/05/2009 - 15:52.
EllECTRONC

будет время, будет бьюик. ближе к концу июня - июлю :)


Опубликовано talgar@drupal.org в пн, 18/05/2009 - 13:38.
talgar@drupal.org

"EllECTRONC" написал(а):

Кнопка #3 — Цитирование

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

в браузере chrome эта фишка не работает


Опубликовано Nodachi в ср, 20/05/2009 - 12:37.
Nodachi

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

Сайт мой - BELRACE.RU, работал на энтузиазме, все получается кроме цитат. На форуме можете увидеть.


Опубликовано yuzver.name в сб, 23/05/2009 - 14:19.
yuzver.name

Великолепно. А можно ваш модуль BUEditor получить?


Опубликовано sqz042 в вт, 28/06/2011 - 12:00.
sqz042

а как тут сделана вставка кода, хочу себе такую же кнопку.

Допустим формат ввода ноды php.
Но что бы можно было в этой ноде ввести код который бы не выполнялся, а подсвечивался.

Поиск юзал, нашёл код кнопки:

js: E.tagChooser([
['code', 'CSS', {'class': 'css'}],
['code', 'HTML', {'class': 'html4strict'}],
['code', 'JavaScript', {'class': 'javascript'}],
['code', 'jQuery', {'class': 'jquery'}],
['code', 'XML', {'class': 'xml'}],
['code', 'PHP', {'class': 'php'}],
['code', 'MySQL', {'class': 'mysql'}]
]);

Однако при попытке обрамить тег со ссылкой кодом для html - ничего не происходит, тег обрабатывается как и надо


Новое на сайте

Ссылки партнёров