Пользовательский файл ckeditor.styles.js с модулем WYSIWYG


8

Я пытаюсь настроить раскрывающийся список «Стиль шрифта» в CKeditor через модуль WYSIWYG, но не вижу способа указать путь для ckeditor.styles.js в редакторе профиля модуля wysiwyg.

Обратитесь к этому сообщению за дополнительной информацией - там должен быть способ указать местоположение для этого файла.

Ответы:


5

Это 2 способа (есть, конечно, больше) для добавления пользовательских стилей ckeditor с помощью модуля drupal wyswiwyg.

  1. Использование предоставленного модуля Ckeditor Styles
  2. Используя hook_wysiwyg_editor_settings_alter следующим образом:

(код "вдохновлен" модулем ckeditor_styles)

В пользовательский модуль добавьте реализацию hook_wysiwyg_editor_settings_alter:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 *
 * @param type $settings
 * @param type $context
 */
function MYCUSTOMMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  // We only add the settings to ckeditor wysiwyg profiles.
  if ($context['profile']->editor == 'ckeditor') {
    $format = $context['profile']->format;
    $path = drupal_get_path('module', 'MYCUSTOMMODULE') . '/js';
    $settings['stylesSet'] = "mycustomstyleset:/$path/ckeditor_styles.js";
  }
}

и добавьте файл с именем ckeditor_styles.js в подкаталог js пользовательского модуля:

CKEDITOR.stylesSet.add('mycustomstyleset',
  [
    { name : 'Red', element : 'span', styles : {'color' : 'red' } },
    { name : 'CSS Style', element : 'span', attributes: { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Heading 4' , element : 'h4' },
    { name : 'Blue Button', element : 'div', attributes : { 'class' : 'blue-button' } },
  ]);

Я действительно хотел, чтобы это сработало. Мне пришлось использовать полный путь, а не относительный путь к используемому здесь файлу stylesSet, иначе wysiwyg исчезнет. Тем не менее, выпадающий список Стили был отключен, и я не мог понять причину.
цифровик

не забывайте глобальный $ base_url: mycustomstyleset:$base_url/$path/ckeditor_styles.js
commonpike

@commonpike вам не нужен$base_url
Феликс Ева

4

Я делаю это для своих сайтов на Drupal все время! Ответ @ marblegravy - это первый шаг, но вы также можете захотеть сделать что-то вроде добавления соответствующих правил CSS в ваш CKEditor, чтобы когда ваш редактор применял один из ваших пользовательских стилей, редактор фактически применял их, и редактор мог предварительно просмотреть Изменения без сохранения!

Недавно я написал очень подробный пост в блоге обо всех движущихся частях здесь: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

В этом уроке я расскажу

  1. Как настроить панель инструментов
  2. Создание собственного файла ckeditor.styles.js. Вот пример:

     CKEDITOR.addStylesSet( 'drupal',
     [
     /* Block Styles */
     { name : 'Heading 2'        , element : 'h2' },
     { name : 'Heading 3'        , element : 'h3' },
     { name : 'Heading 4'        , element : 'h4' },
     { name : 'Paragraph'        , element : 'p' },
     { name : 'Blue Image Button',
     element : 'div',
     attributes : {
     'class' : 'blue-image-button' }
     },
    
     /* Inline Styles */
     { name : 'Inline Quotation'    , element : 'q' },
      ...
    
  3. Конфигурирование вашего CKEditor, чтобы он знал, где найти этот файл пользовательских стилей

  4. Внедрение соответствующих CSS для этих стилей и информирование CKEditor об этом!

введите описание изображения здесь

  1. Как использовать настройки в качестве редактора!

Надеюсь, это полезно! Дайте нам знать, если вы получите это работает!


Где вы делаете шаг 3, давая CKEditor знать о пользовательском файле ckeditor.styles.js .
Батандва

5
Этот ответ не правильный. Вопрос в том, как решить эту проблему с помощью модуля Drupal Wysiwyg, но автор объясняет, как решить эту проблему с помощью модуля Drupal CKEditor. Две разные вещи. Модуль Wysiwyg не имеет возможности добавлять дополнительные файлы
custom.styles.js

3

Я только что написал крошечный пользовательский модуль. Я использую модуль Wysiwyg (а не модуль CKEditor). Это позволяет загружать стили из ckeditor.styles.js в моей теме.

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $path = drupal_get_path('theme', 'THEMENAME');
    $settings['stylesSet'] = "drupal:/$path/ckeditor.styles.js";
  }
}

Это должен быть ответ !!!
Алекс Гилл

0

Вы можете определить стили в настройках профиля WYSIWYG (admin / config / content / wysiwyg, отредактируйте нужный профиль).

Вкладка «CSS»> «Классы CSS»

При желании можно определить классы CSS для выпадающего списка «Стиль шрифта».

Введите один класс в каждой строке в формате: [метка] = [элемент]. [Класс]. Пример: Title = h1.title

Если оставить это поле пустым, классы CSS будут автоматически импортированы из загруженных таблиц стилей. Использует внутреннюю настройку stylesSet .


-1

Просто поместите переопределенный файл ckeditor.styles.js в корень вашей темы, затем перейдите в / admin / config / content / ckeditor / edit / , затем для каждого из ваших профилей отредактируйте их и откройте набор полей css , найдите Поле « Предопределенные стили» и выберите « Использовать тему ckeditor.styles.js» .

Из справки по полям * Predefined Style *:

Определите расположение файла ckeditor.styles.js. Он используется раскрывающимся списком Стиль, доступным на панели инструментов по умолчанию. Скопируйте файл sites / all / modules / contrib / ckeditor / ckeditor.styles.js в каталог вашей темы (themes / seven / ckeditor.styles.js) и настройте его в соответствии со своими потребностями.


3
Этот ответ также предполагает использование модуля CKEDitor, о котором речь не идет
batigolix
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.