Your Site Master

Главная | Trash Can. | Actual Topics | Обратная связь | Guest Book | В избранное | Сделать домашней
Категории
 Новости разработчиков CMS
 Новости форумов
 Скрипты для сайтов
 Новости разработчиков сайтов
 Новости дизайнеров
 CMS Блоги
 Блоги о сайтостроении
Календарь

December, 2019
ПнВтСрЧтПтСбВс
1
2345678
9101112131415
16171819202122
23242526272829
3031
Опросы
Какую CMS Вы используете для Вашего сайта?

SLAED
Drupal
WordPress
DataLife Engine
1С-Битрикс
TYPO3
Ucoz
Joomla
Amiro CMS
HostCMS
CMS Made Simple
NetCat


Результаты
Другие опросы

Всего голосов: 248
Комментарии: 0
Ссылки

Архив Новостей
  December 2019 (2)
  November 2019 (10)
  October 2019 (11)
  September 2019 (12)
  August 2019 (9)
  July 2019 (8)
  June 2019 (6)
  May 2019 (13)
  April 2019 (12)
  March 2019 (18)
  February 2019 (11)
  January 2019 (9)
  December 2018 (23)
  November 2018 (10)
  October 2018 (15)
  September 2018 (12)
  August 2018 (7)
  July 2018 (13)
  June 2018 (11)
  May 2018 (15)
  April 2018 (17)
  March 2018 (12)
  February 2018 (16)
  January 2018 (15)
  December 2017 (15)
  November 2017 (13)
  October 2017 (14)
  September 2017 (20)
  August 2017 (15)
  July 2017 (1)
  June 2017 (1)
  April 2017 (3)
  February 2017 (13)
  January 2017 (15)
  December 2016 (23)
  November 2016 (19)
  October 2016 (19)
  September 2016 (19)
  August 2016 (19)
  July 2016 (17)
  June 2016 (23)
  May 2016 (11)
  April 2016 (18)
  March 2016 (20)
  February 2016 (19)
  January 2016 (16)
  December 2015 (22)
  November 2015 (19)
  October 2015 (21)
  September 2015 (14)
  August 2015 (16)
  July 2015 (22)
  June 2015 (22)
  May 2015 (9)
  April 2015 (6)
  March 2015 (6)
  February 2015 (9)
  January 2015 (8)
  December 2014 (8)
  November 2014 (7)
  October 2014 (7)
  September 2014 (8)
  August 2014 (8)
  July 2014 (8)
  June 2014 (7)
  May 2014 (7)
  April 2014 (11)
  March 2014 (8)
  February 2014 (9)
  January 2014 (7)
  December 2013 (17)
  November 2013 (20)
  October 2013 (25)
  September 2013 (20)
  August 2013 (20)
  July 2013 (27)
  June 2013 (25)
  May 2013 (28)
  April 2013 (32)
  March 2013 (24)
  February 2013 (25)
  January 2013 (28)
  December 2012 (33)
  November 2012 (36)
  October 2012 (29)
  September 2012 (36)
  August 2012 (38)
  July 2012 (31)
  June 2012 (35)
  May 2012 (30)
  April 2012 (41)
  March 2012 (57)
  February 2012 (38)
  January 2012 (43)
  December 2011 (63)
  November 2011 (41)
  October 2011 (39)
  September 2011 (63)
  August 2011 (62)
  July 2011 (52)
  June 2011 (48)
  May 2011 (66)
  April 2011 (54)
  March 2011 (51)
  February 2011 (63)
  January 2011 (45)
  December 2010 (73)
  November 2010 (62)
  October 2010 (59)
  September 2010 (69)
  August 2010 (63)
  July 2010 (48)
  June 2010 (50)
  May 2010 (58)
  April 2010 (84)
  March 2010 (95)
  February 2010 (83)
  January 2010 (55)
  December 2009 (99)
  November 2009 (104)
  October 2009 (98)
  September 2009 (100)
  August 2009 (73)
  July 2009 (97)
  June 2009 (106)
  May 2009 (79)
  April 2009 (36)
  March 2009 (30)
  February 2009 (15)
  January 2009 (20)
  December 2008 (21)
  November 2008 (23)
  October 2008 (15)
  September 2008 (11)
  August 2008 (6)
  July 2008 (12)
  June 2008 (9)
  May 2008 (6)
  April 2008 (18)
  March 2008 (28)
  February 2008 (4)
  December 2007 (4)
  November 2007 (1)
  September 2007 (2)
  August 2007 (2)
  July 2007 (6)
  June 2007 (3)
  May 2007 (7)
  April 2007 (2)
  March 2007 (1)
  February 2007 (2)
  December 2006 (1)
  November 2006 (2)
  October 2006 (3)
  September 2006 (2)
  July 2006 (2)
  June 2006 (3)
  May 2006 (1)
  April 2006 (1)
  March 2006 (1)
  February 2006 (2)
  January 2006 (2)

Диалоговая кнопка BUEditor + стандартная drupal-форма для внутреннего линкинга

Новости разработчиков программного обеспечения (CMS) для построения сайтов

Вашему вниманию предлагается статья, в которой описывается способ встраивания стандартного функционала форм Drupal в редактор BUEditor для удобного добавления ссылок на внутренние материалы сайта.

Форма после использования

Начну с дисклеймера. К сожалению, не имею возможностей разбирать весь процесс создания по косточкам, т.к. было потрачено немало времени и допущено и исправлено множество ошибок прежде, чем получился результат, достойный публикации. Тратить это время здесь смысла большого не имеет, лучше идти дальше. Вот решение - пользуйтесь, экспериментируйте, дорабатывайте, делитесь. Здесь же постараюсь описать все, что необходимо для реализации задуманного функционала. Описание дается для блоками, а не построчно.

Инструменты

  • Module API
  • Drupal form API
  • Ajax
  • JQuery
  • BUEditor

Предыстория

Основным редактором на нашем научном портале является BUEditor, т.к. есть твердая необходимость форматировать текст с использованием модуля  DruTeX. Ну и просто постараться сохранить предсказуемый вид для исходных текстов (в отличие от wysiwyg-редактора) для их дальнейшего использования по-жизни. По мере наполнения появилась необходимость для кросс-линкинга между статьями, терминами словаря и другими видами материалов. Все это осложнялось отсутствием таких возможностей для BUEditor, в отличие от других редакторов, для которых есть такой модуль как  Linkit. Потратив некоторое время на изучение матчасти (Drupal form API), было принято решение, что во что бы то ни стало нужно прикрутить стандартную форму Drupal к диалогам BUEditor. Ведь autocomplete уже реализован, стили сделаны, а пока форма ждет ответа, там бегает кружёк и выпадет готовая менюха - вообщем просто и красиво.

Первым делом начал искать, что было сделано. Например - http://www.drupal.ru/node/12619, но по делу там ничего не нашел. Начал экспериментировать с маленьким неофициальным модулем ajax-demo и его autocomplete-возможностями. Все быстро встало на свои места. Дальше появился вопрос - как заставить друпаловскую форму залезть в диалог редактора?

Кстати, бился с поиском до последнего, т.к. не сторонник, чтобы на сайте был такой hand-made. Но готовых решений нет и был вынужден изменить своим же принципам.

Hands on

Итак, приступаем.

Первым делом надо сделать свой модуль (назвал его callbacks), в который войдет основной функционал, а именно:

  • Описание формы
  • Описание функций обращения к базе
  • Клиентский js-функционал
  • Стили ответа

callbacks.info

; $Id$
 
name = callbacks module
core = "6.x"
version = "6.x-1.1"

callbacks.module


<?php
// $Id$

/**
 * Implementation of hook_init().
 */
function callbacks_init(){
    variable_set('callbacks_link_form_var', drupal_get_form('callbacks_link_form'));
}

/**
 * Implementation of hook_menu().
 */
function callbacks_menu() {
  return array(
    'callback/link' => array(
      'access arguments' => array('access content'),
      'page callback' => 'callbacks_link_func',
      'type' => MENU_CALLBACK,
    ),
  );
}

/**
* Retrieve a pipe delimited string of autocomplete suggestions for existing users
*/
function callbacks_link_func($string) {
  $matches = array();
  $dst = "";
  $result = db_query_range("SELECT nid, language, type, title FROM {node} n WHERE LOWER(n.title) LIKE LOWER('%s%%')", $string, 0, 10);
  while ($node = db_fetch_object($result)) {

    $get_alias = db_query("SELECT dst FROM {url_alias} WHERE src = 'node/%s'", $node->nid );
    if( $alias = db_fetch_object($get_alias) )
      $dst = $alias->dst;
    else
      $dst = "node/" . $node->nid;

    $matches[$node->nid] = array(
      'type' => check_plain($node->type),
      'title' => check_plain($node->title),
      'alias' => check_plain($dst),
      'lang' => check_plain($node->language),
    );
  }

  $results = array();
  if (count($matches)) {
    foreach( $matches as $key_nid => $values ) {
      $text = '<div class="clear-block">';
//      $text .= '<div class="callbacks-nid">['. $key_nid .']</div>';
      $text .= '<div class="callbacks-title">'. $values['title'] .'</div>';
      $text .= '<div class="callbacks-type">['. $values['type'] . ':' . ( $values['lang'] ? $values['lang'] : 'any' ) . ']</div>';
      $text .= '<div class="callbacks-alias">'. $values['alias'] .'</div>';
      $text .= "</div>";
      $dst = $values['alias'];
      $results[$dst] = $text;
    }
  }

  drupal_json($results);
}

/**
 * Defines a form.
 */
function callbacks_link_form() {

  drupal_add_js(drupal_get_path('module', 'callbacks') . '/js/callbacks.js');
  drupal_add_css(drupal_get_path('module', 'callbacks') . '/css/callbacks.css');

  return array(
    'link-path-ac' => array(
      '#autocomplete_path' => 'callback/link',
      '#title' => t('URL or Title'),
      '#description' => t('Start type title to get its internal URL'),
      '#type' => 'textfield',
      '#required' => TRUE,
    ),
    'link-text' => array(
      '#title' => t('Link text'),
      '#description' => t('Select text in editor or enter link text'),
      '#type' => 'textfield',
    ),
    'cancel' => array(
      '#value' => t('Cancel'),
      '#attributes' => array('class' => 'callbacks-button'),
      '#type' => 'button',
    ),
     'add-link' => array(
      '#value' => t('Add link'),
      '#attributes' => array('class' => 'callbacks-button'),
      '#type' => 'button',
    ),
  );
}
?>

hook_init() - нужен, чтобы заранее подготовить форму, иначе BUEditor ее не съест.

hook_menu() - это осознанная необходимость для autocomplete в Form API.

callbacks_link_func($string) - стандартный функционал для json-ответов. Здесь можно выбирать из базы любые поля и отдавать их для отображения, в данном случае поиск ноды в базе происходит по заголовку, но этим, как вы понимаете, можно не ограничиваться. Тут же происходит стилевое оформление - дело вкуса прячется в конце функции. Да, кстати, здесь приходится делать двойной запрос к базе, т.к. все, что мы делаем, мы делаем для живых людей и поэтому подставлять красивый alias вместо ссылки вида node/435 насущная необходимость. Для красоты (см. картинку в конце) выводится название, алиас, тип материала и язык.

callbacks_link_form() - описываем форму по-друпаловски: быстро, просто, удобно, с аутокомплитом.

JS часть. Файлик js/callbacks.js

Drupal.behaviors.callbacks = function(){
 
$('#edit-add-link').unbind().click(
 
function(){
var url = $('input#edit-link-path-ac').val();
var text = $('input#edit-link-text').val();
E = BUE.active;
E.replaceSelection( '[url'+ (text ? ('='+ url) : '') +']'+ (text || url) +'[/url]' );
E.dialog.close('fadeOut');
return false;
}
 
);
 
$('#edit-cancel').unbind().click(
function(){
BUE.active.dialog.close('fadeOut');
return false;
}
);

$('#edit-add-link').unbind().click() - отцепляем стандартный submit и говорим форме, что же нам от нее нужно.

$('#edit-cancel').unbind().click() - то же самое, но для кнопочки Cancel, для порядка.

CSS часть. Файлик css/callbacks.css

.form-radios .form-item {
display: inline;
}
 
.callbacks-nid {
float: left;
}
 
.callbacks-title {
float: left;
}
 
.callbacks-alias {
color: #333;
font-size: 0.9em;
clear: both;
margin-bottom: 5px;
font-weight: bold;
}
 
.callbacks-type {
float: right;
font-size: 0.8em;
}
 
.callbacks-button {
float: right;
}

Тут самая скука, расставить цвета и отступы.

Вторым делом добавить php-кнопку в BUEditor.

<?php
php:
$button_form = drupal_to_js(variable_get('callbacks_link_form_var', ''));

return "js:
var S = E.getSelection();
E.dialog.open('Internal linking', $button_form, 'fadeIn');
$('input#edit-link-text').val( S );
Drupal.attachBehaviors($button_form);
";
?>

variable_get() - важен, т.к. вариант с drupal_get_form() в данном случае приводит к непредсказуемым результатам и его использовать нельзя.

drupal_to_js() - важен, т.к. иначе форма выдается в неадаптированном для js виде.
Drupal.attachBehaviors() - важен, т.к. без этой функции форма не слушается и плохо себя ведет.

Все

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

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

Выглядит форма таким образом:
Форма до использования

А результат ее использования не менее красив:
Форма после использования

Прикрепленный файлРазмер
callbacks_form.png6.79 кб
callbacks_form_2.png34.29 кб




  


Разместил: Drupal Россия | Дата: 10.05.2011 | Прочитано: 1480 | Раздел: Новости разработчиков программного обеспечения (CMS) для построения сайтов   
cms-develop-news | Новости разработчиков программного обеспечения (CMS) для построения сайтов | http://www.drupal.ru/node/61991 | Drupal Россия |

Рейтинг статьи

Средняя оценка: 0.00/0Средняя оценка: 0Всего голосов:0

Отлично
Хорошо Нормально Пойдёт Плохо


Смотрите также связанные темы

02.04.2009 Корпоративный портал Госалкогольинспекции Республики Татарстан работает на платформе «1С-Битрикс»
Алкогольная госинспеция Республики Татарстан выбрала программный продукт «1С-Битрикс: Корпоративный портал» в качестве интранет-решения для внутреннего ресурса организации.
08.08.2008 Голосование за лучшую CMS (Open Source CMS Award)
Голосование за лучшую CMS в 2008 году открыто. Номинации принимаются до 25 августа 2008 года. Напомним, что в прошлом году в номинации Overall 2007 Open Source CMS Award на третьем месте оказалась CMS Made Simple (после Drupal и Joomlа) и как третий победитель получила чек на $ 2.000. Конечно, в этом году мы хотим достичь по крайней мере такого же результата.
03.01.2009 Создать термин словаря таксономии
Задача:  Нужно в модуле создать термин определенного словаря таксономии в модуле Drupal. читать далее
14.04.2008 rotor
Позволяет добавлять в блоки материалы, которые будут меняться каждые X секунд. Полезно для показа какой-то важной информации или рекламы. http://drupal.org/project/rotor
14.04.2008 author_taxonomy
Позволяет связывать одного или нескольких авторов с документом, основываясь на словаре таксономии. http://drupal.org/project/author_taxonomy
01.04.2008 singlesignon
Добавляет общую авторизацию на нескольких сайтах на Drupal на сервере с общей базой данных. Инструкции по установке находятся в файле singlesignon.module. http://drupal.org/node/50418
14.04.2008 gallerix
Включает возможности: Массовая загрузка Вид альбома в виде сетки Загрузка фото, комментирование, голосование и несущественная правка с помощью AJAX Легкий расширяемый движок Управляемые размеры, оригиналы не меняются Функции безопасности Альбомы для пользователей отдельные И много другого... Требования: Drupal 5.x Рабочая библиотека GD Права на mkdir, rmdir, unlink, и chmod. Views (дополнительно) Для тех кто интересуется маленькими иконками у каждой фотографии, как на демо сайте, пожалуйста, узнавайте больше о движке Gallerix по ссылке http://the.failbo.at/gallerix_widget_engine http://dr...
14.04.2008 couloir_slideshow
Javascript слайдшоу, основанное на Couloir slideshow, которое можно найти http://www.couloir.org/js_slideshow/ Функции: Множество слайдшоу Возможность начинаться автоматически Изменяемый порядок Максимальная ширина и высота Настраиваемая директория для фотографий Настраиваемое время отображение изображения Блокировка отображения http://drupal.org/project/couloir_slideshow
08.05.2009 Банк рефератов
Модуль "Банк рефератов" версия 1.0 с использованием MySQL. Функционал: 1. Все закачанные рефераты хранятся у Вас на сервере. 2. Админка, конфигурация. 3. Возможность запрета закачки или скачивания гостям. 4. Возможность пожаловаться на закаченный кем-то реферат (кнопка "жалоба") которая отсылает жалобу на конкретный реферат на мыло админу и на время проверки блокирует скачивание файла. 5. В архиве есть sql файл набор из 103 разделов для рефератов.
06.10.2008 Страницы - Page для slaed cms 2.x
Модуль Page - это клон модуля Pages с прикрученными коментариями для SLAED CMS 2.5, 2.6 Lite. С ленг файлами надеюсь справитесь самостоятельно. Установка стандартная.
Нет комментариев. Почему бы Вам не оставить свой?
Вы не можете отправить комментарий анонимно, пожалуйста зарегистрируйтесь.
Google Search
Google

Web yoursitemaster.com

Топ Новостей
1: Модуль статистики «LightStat» 3.0
Hot NEWS!
Просмотров - 496


2: Drupal-школа - двенадцатое занятие: продвижение сайта на Drupal
Просмотров - 451

3: Обновление Drupal (новая версия Drupal 8.4.0)
Просмотров - 446

4: Новогодние и Рождественские скидки до 40%
Просмотров - 442

5: The Month in WordPress: October 2017
Просмотров - 435

6: Amiro.CMS и поддержка федерального закона 54-ФЗ
Просмотров - 435

7: Drupal-школа - восьмое занятие: блок представления и управление видимостью блоков на Drupal 8
Просмотров - 433

8: WordPress 4.8.2 Security and Maintenance Release
Просмотров - 425

9: Универсальное платежное решение для интернет магазинов и сервисов (Станислав Ревва) [DrupalCamp Краснодар 2016]
Просмотров - 422

10: Новый продукт в Битрикс24, который меняет все. 10 октября. Онлайн
Просмотров - 421

Google 120X240
Ссылки

Главная | Actual Topics | Статьи | Обратная связь | Guest Book
Генерация: 0.227 сек. и 11 запросов к базе данных за 0.160 сек.
Powered by SLAED CMS © 2005-2007 SLAED. All rights reserved.
Яндекс.Метрика