Настройка FCK Editor в Drupal

Перед сдачей свежепостроенного сайта на Drupal заказчику нужно слегка подкрутить визуальный редактор (у меня это FCKeditor) на предмет усложнения возможности обгадить внешний вид сайта.

Первым делом пишу CSS для визуального редактора и помещаю его в отдельный css-файл. Пускай это будет файл в теме под названием fck.css. Не забываю продублировать его в основной теме.

Затем пишу xml со стилями, которые будут доступны заказчику. По умолчанию FCK Editor ищет его в папке темы под именем fckstyles.xml.

Образец fckstyles.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Styles>
	<Style name="Paragraph" element="p" />
	<Style name="Heading 1" element="h1" />
	<Style name="Heading 2" element="h2" />
	<Style name="Heading 3" element="h3" />
	<Style name="Heading 4" element="h4" />
	<Style name="Heading 5" element="h5" />
	<Style name="Heading 6" element="h6" />
</Styles>

Следом настраиваю FCKeditor в админке сайта путём редактирования нужного профиля: /admin/settings/fckeditor/edit/Default

xml подхватится по умолчанию, а в css редактор нужно ткнуть носом, поменяв пару полей. В Editor CSS ставлю Define CSS и в поле CSS path дописываю следующую конструкцию: %tfck.css

%t - это путь к теме
fck.css - название файла в папке темы.

Следом иду ковырять конфиг визуального редактора. Лежит где-то в районе /sites/all/modules/fckeditor/fckeditor.config.js

Выкидываю в лес всякие смайлики и ручные выборы и раскраски шрифтов ('FontFormat','FontName','FontSize') и вместо них вписываю только 'Style'.

Попутно вырубаю как класс вставку из word - для этого отрубаю 'PasteWord' и применяю магию в виде

FCKConfig.ForcePasteAsPlainText = true;

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

Жму F5 и наслаждаюсь полученным результатом.

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

Успехов в сайтостроении :)

Тэги:

Обсуждение:

• Автор: Руслан (Анонимус)

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

• Отправлено: 2010-05-02 00:35:57

• Автор: ВАся (Анонимус)

• А выложить файлы здесь слабо?

• Отправлено: 2010-06-27 02:33:36

• Автор: Dmitrii Varvashenia
• Тема: Файлы

• А смысл?
  fck.css - это обычный css и он будет у каждого сайта свой, образец fckstyles.xml - см. выше и он то-же будет отличаться в ту или иную сторону (Например H1 нельзя давать клиенту вставлять в страницу - несколько H1 будет хреново с точки зрения SEO)
  fckeditor.config.js лежит в друпале и он то-же в каждой версии будут отличаться и при апдейте по-любому придётся освоить процедуру добавления одной строчки javascript и освоения таинства применения комментариев в нужном месте js-файла для отключения кнопок.
  
  И если тупо воткнуть в систему файл какого-то левого чувака типа меня, то эта система может начать себя загадочно вести.
  
  Кроме того, готов поспорить, что есть более правильный с точки зрения друпала способ управлять визуальным редактором, чем ходить напрямую в js-файл. Но это нагуглилось раньше.
  
  Hint: если уж кто решиться править js при каждом апдейте руками, то по умолчанию в нём определено три пресета кнопок: Full HTML, Filtered HTML и Drupal Basic.
  Каждый пресет содержит структуру типа:

  FCKConfig.ToolbarSets['НазваниеТулбара'] = [
    //Первая строка редактора
    ['НазваниеКнопкиДляПодклбчения'], //Первая группа кнопок в 1-й строке
    ['TextColor','BGColor','ShowBlocks'], //Вторая группа кнопок в 1-й строке
   '/', //Далее кнопки начнутся с новой строки
    ['Style'], //Одна кнопка в группе
    ['JustifyLeft','JustifyCenter','JustifyRight''] //3 кнопок в группе
  ];
  

  Например самая простая однострочная и одногрупповая тулбара:

  FCKConfig.ToolbarSets['DrupalBasic'] = [
    ['Style','-','Bold','Italic','-','-','Link','Unlink', 'Image']
  ];
  

  '-' симолизирует разрыв между кнопками

• Отправлено: 2010-06-27 04:17:53