Дополняем кнопку Image в BUEditor'е

Drupal → Дополняем кнопку Image в BUEditor'е

26 Февраля 2009 / Обновлено: 10 Ноя 2010, 17:44

Стандартная кнопка позволяет вставлять изображение только по вводу URL, т.е. это изображение сначала нужно прикрепить к материалу (интерфейс "прикрепить файл" находится чуть ниже окошка ввода текста) и скопировать полученный путь в это окошко. Так же можно указать альтернативный текст и размеры вставляемого изображения.

Получаем — небольшую или большую картинку в посте — не удобно и в неудобном месте.

Как исправить

Во-первых, если хотите загружать картинку через кнопку "Вставить картинку" в BUEditor и создавать автоматически превьюшки нужно установить модуль IMCE.

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

Для drupal-6.x

php:
$imce_url = function_exists('imce_access') && imce_access() ? url('imce') : '';
 
return "js:
var B = eDefBrowseButton('$imce_url', 'attr_src', 'Обзор', 'image');
var form = [
 {name: 'src', title: 'URL Изображения', suffix: B},
 {name: 'width', title: 'Ширина x Высота', suffix: ' x ', getnext: true, attributes: {size: 3}},
 {name: 'height', attributes: {size: 3}},
 {name: 'class', title: 'Выравнивание изображения', type: 'select', options: {'': '', 'leftalign': 'Влево', 'rightalign': 'Вправо', 'aligncenter': 'По центру'}},
 {name: 'alt', title: 'Альтернативный текст'}
];
eDefTagDialog('img', form, 'Вставить/редактировать изображение', 'OK');
";

Для drupal-5.x

php:
$imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';
 
return "js:
var B = eDefBrowseButton('$imce_url', 'attr_src', 'Обзор', 'image');
var form = [
 {name: 'src', title: 'URL Изображения', suffix: B},
 {name: 'width', title: 'Ширина x Высота', suffix: ' x ', getnext: true, attributes: {size: 3}},
 {name: 'height', attributes: {size: 3}},
 {name: 'class', title: 'Выравнивание изображения', type: 'select', options: {'': '', 'leftalign': 'Влево', 'rightalign': 'Вправо', 'aligncenter': 'По центру'}},
 {name: 'alt', title: 'Альтернативный текст'}
];
eDefTagDialog('img', form, 'Вставить/редактировать изображение', 'OK');
";

Примечание: Этот код добавляет атрибут class к тегу img, но вы можете добавить или изменить его на id — по вашему усмотрению. Т.о. теперь мы можем подцепить наши изображения и настроить их отображение.

В результате получим примерно следующий диалог (модуль IMCE установлен):
Диалог вставки изображения с установленным IMCE

Теперь добавьте в style.css вашей темы стилевое оформление для 3-ех элементов: img.leftalign, img.rightalign, img.aligncenter.

К примеру такое:

img.leftalign {

float: left;

margin: 0 10px 0 0;

}

img.rightalign {

float: right;

margin: 0 0 0 10px;

}

img.aligncenter {

float: none;

display: block;

margin: 0 auto;

}

Третье. Если не желаете ставить модуль IMCE, но хотите чтобы картинка стала превьюшкой, достаточно написать ширину и/или высоту (в пикселях) — тогда изображение станет меньшего размера. Далее выделяем картинку вместе с тегами img и нажимаем кнопку вставить ссылку и вставляем ссылку на эту же картинку.

Таким образом мы имеем небольшую картинку с ссылкой на себя в оригинальном размере.

Вот, в общем-то, и все на сегодня.

Еще по теме

Image Resize Filter – Фильтр изменения размера изображений

от Блог EllECTRONC, отправлено 1 Мар 2010, 22:06

Image Resize Filter это модуль фильтр для изменения размера изображения. Очень простой и удобный в использовании, особенно в комбинации с текстовыми редакторами. Суть работы проста – просто вставляете изображение, указав его ширину и высоту, и этот мод…

Также может быть полезно…

↓ Старые сверху

23 Комментария [Нет новых]

Alinaki, 10 Апр 2009, 02:21

Неужели нет простого способа загружать картинку непосредственно из BUEditor'а, не прибегая к помощи IMCE? Не всем пользователям объяснишь, как им пользоваться… Я пока прикрутил на кнопку iframe с ImagePicker, но это тоже довольно тяжеловесно.

EllECTRONC, 10 Апр 2009, 18:03

После прикручивания IMCE изображения заливаются "как бы" через BUEditor, просто там дополнительное окно открывается.
Можно так же написать для BUEditor кнопку на php или JS, но мне кажется тогда проще прикрутить настоящий визивиг типа FCKEditor или TinyMCE. И тогда все будет удобно. Если сайт для простых юзеров, то думаю и резоннее визивиг?!

Alinaki, 10 Апр 2009, 22:13

Показывать IMCE - нанести пользователю психологическую травму А HTML наряду с BB-кодами применяются достаточно широко, чтобы пользователи не пугались. Полноценные WYSIWYG - монструозны. А вполне подходящий NICEdit слегка бажит с модулем аяксовых комментариев… Видимо, придется таки браться за написание отдельной кнопки

EllECTRONC, 12 Апр 2009, 17:51

Есть еще парочка милых, на мой взгляд, и не громоздких редакторов — MarkItUp (D6) и Htmlarea (D5)

Gukov Yor, 23 Апр 2009, 09:59

А где можно посмотреть код других кнопочек? интересует "Заголовки"

EllECTRONC, 23 Апр 2009, 14:31

@Gukov Yor: В BUEditor для 6-го друпала по умолчанию есть кнопка с заголовками!
Для пятого одной кнопкой не сделать, imho…

Gukov Yor, 25 Апр 2009, 16:37

@EllECTRONC:
(Извиняюсь, забыл написать, drupal 6.10)
Я как раз про BUEditor, кнопочки есть но h1,h2,h3, хочу через JS вывести, а то много места занимаю? не подскажете как сделать как на drupal.ru?
Ещё вопросик, где можно толковый мануал почитать, с примерчиками по JS на рус.яз., Очень буду рад за ваши наработки и разъяснение по BUEditor'у. Спасибо,подписан

EllECTRONC, 25 Апр 2009, 17:25

@Gukov Yor: Странно, странно, но в бьюике к шестому друпалу как раз кнопа Заголовки и идет как JS, но не смотря на это привожу код:

js: eDefTagChooser([

 ['h1', 'Заголовок 1'],

 ['h2', 'Заголовок 2'],

 ['h3', 'Заголовок 3'],

 ['h4', 'Заголовок 4'],

], true, 'li', 'ul', 'slideDown');

Да, кстати этот код приведен в readme.txt к бьюику, там же описаны и другие функции. Мне было достаточно его прочтения, так что перевод на русский к readme я не делала.

Gukov Yor, 28 Апр 2009, 13:05

Спасибо, халатное отношение к ридми приводит к таким вопросам

Alinaki, 11 Июн 2009, 13:16

Я кстати все-таки реализовал нормальную загрузку изображений (без Imagepicker и IMCE). Если кому-нибудь интересно - опишу позже Сейчас оформляю это отдельным модулем.

EllECTRONC, 13 Июн 2009, 17:33

@Alinaki: Еще как интересно! Модуль будете на орге выкладывать?

Alinaki, 14 Июн 2009, 01:49

Пока об этом не думал Вдохновлялся модулями Imagepicker и Inline. Идея в том, что я делаю для BUEditor отдельную кнопку, в панели которой открываю iframe и загружаю там средствами JQuery изображение. В BUEditor пересылается тег вида [img:адрес], и специальный фильтр пропускает адрес через Imagecache + Lightbox. Хочу, конечно, без использования iframe, но пока не особо понял структуры BUEditor - он намного мощнее, чем кажется сначала.

als, 7 Июл 2009, 04:22

Не надо, пожалуйста, давать такие советы:
"Если не желаете ставить модуль IMCE, но хотите чтобы картинка стала превьюшкой, достаточно написать ширину и/или высоту (в пикселях)?—?тогда изображение станет меньшего размера."

Вот так и получаются страницы с превьюшками размера 10-15 Мб. Изображение-то грузится целиком, а потом уже браузером сжимается. А после таких советов товарищи пользователи заливают фотографию размером 2 Мб с фотоаппарата, ставят размер 200x100 и думают, что все отлично.

EllECTRONC, 7 Июл 2009, 13:58

@als: ))) ну что я могу сказать… такие "таварищи пользователи" будут всегда хоть советуй, хоть не советуй
Для таких юзверей надо ограничения по размеру ставить или четкую инструкцию, что большие изображения загружать только если они нужны, хотя я не думаю, что пользователи такого рода будут ситедь и уменьшать (сжимать) изображение В таком случае поставьте imagecache и установите размер изображения - и все будет нормально.

andypost, 8 Авг 2010, 06:12

Новые релизы 2.x имеют некоторые отличия от описаных. Думаю, что стоит добавить и для них. Новый IMCE вообще очень радует

demon-e398, 29 Окт 2010, 23:32

А вот такой вопрос можно ли сделать такую кнопку применительно к модулю Albumphoto???

EllECTRONC, 30 Окт 2010, 08:02

Мне еще не приходилось пользоваться этим модулем, поэтому встречный вопрос: какой там особый синтаксис?

Елена, 31 Окт 2011, 18:39

Извините, но вы не указываете где именно вставлять код для того чтобы можно было выбрать положение картинки автоматически. У вас на писано что нужно вставлять в style.css. А где там вставлять? После какой строчки? Вы бы хотя бы название написали. Мне это непонятно. Если можете напишите где там надо встатвлять.

EllECTRONC, 1 Ноя 2011, 09:00

PHP код кнопки нужно вставлять в ваш редактор. Для этого идете по admin/settings/bueditor (для D6), нажимаете «Редактировать» напротив нужного редактора. В табличке снизу есть пара пустых полей, в поле «Содержимое» вставляете этот PHP код. Не забудьте выбрать кнопочку и указать «Заголовок».

CSS код можете вставлять в любой CSS файл вашей темы. Если он всего один, то вставляете в него (скорее всего это файл style.css). Новые стили лучше всего добавлять в конец файла, чтобы они гарантированно были ПОСЛЕ других правил стилей для того же объекта, в данном случае изображения (img).

Елена, 1 Ноя 2011, 09:21

Ну спасибо большое что все разъяснили. Буду вставлять!

Елена, 1 Ноя 2011, 09:57

К сожалению изменения в style.css не помогают. Вставляла в самом конце.

EllECTRONC, 1 Ноя 2011, 10:15

После добавления или изменения любого кода, рекомендуется, а иногда просто необходимо, очистить весь Кеш. На странице по адресу admin/settings/performance, вы найдете кнопочку, почти в самом низу.