WYSIWYG 모듈이있는 사용자 정의 ckeditor.styles.js 파일

WYSIWYG 모듈을 통해 CKeditor에서 "글꼴 스타일"드롭 다운을 사용자 정의하려고하지만 wysiwyg 모듈의 프로파일 편집기에서 ckeditor.styles.js의 경로를 지정할 방법이 없습니다.

추가 정보는이 게시물을 참조하십시오. 해당 파일의 위치를 ​​지정하는 방법이 있어야합니다.

drupal wyswiwyg 모듈을 사용하여 사용자 정의 ckeditor 스타일 세트를 추가하는 두 가지 방법이 있습니다 (확실히 더 있음).

1. 컨트 리뷰 션 모듈 Ckeditor 스타일 사용
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";
  }
}

사용자 정의 모듈의 하위 디렉토리 js에 ckeditor_styles.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' } },
  ]);

나는 항상 Drupal 사이트를 위해 이것을한다! @marblegravy의 대답은 첫 번째 단계이지만 CKEditor에 해당 CSS 규칙을 추가하는 것과 같은 작업을 수행하여 편집기가 사용자 정의 스타일 중 하나를 적용 할 때 편집기가 실제로 적용하고 편집기에서 미리 볼 수 있습니다. 저장하지 않고 변경 사항을!

나는 최근에 모든 움직이는 부분에 대한 매우 자세한 블로그 게시물을 썼습니다 : 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에 이러한 스타일도 알려주십시오!

5. 설정을 편집기로 사용하는 방법!

도움이 되길 바랍니다. 이 작업을 수행하면 알려주십시오!

방금 작은 맞춤 모듈을 작성했습니다. CKEditor 모듈 대신 Wysiwyg 모듈을 사용하고 있습니다. 그러면 내 테마의 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";
  }
}

WYSIWYG 프로파일 설정에서 스타일을 정의 할 수 있습니다 (admin / config / content / wysiwyg, 원하는 프로파일 편집).

"CSS"탭> "CSS 클래스"

"글꼴 스타일"드롭 다운 목록에 CSS 클래스를 선택적으로 정의하십시오.

각 행에 하나의 클래스를 [label] = [element]. [class] 형식으로 입력하십시오. 예 : Title = h1.title

비워두면로드 된 스타일 시트에서 CSS 클래스를 자동으로 가져옵니다. stylesSet 설정을 내부적으로 사용합니다 .

그냥 재정의 넣어 ckeditor.styles.js의 다음으로 이동, 테마의 루트에 파일을 / 관리 / 설정 / 컨텐츠 / ckeditor / 편집 / , 당신의 프로필, 각 편집 을하고 열어 CSS를 필드 셋을의를 찾을 수 사전 정의 된 스타일 필드에서 테마 ckeditor.styles.js 사용을 선택 하십시오 .

* 사전 정의 된 스타일 * 필드 도움말에서 :

ckeditor.styles.js 파일의 위치를 ​​정의하십시오. 기본 도구 모음에서 사용 가능한 스타일 드롭 다운 목록에서 사용됩니다. sites / all / modules / contrib / ckeditor / ckeditor.styles.js 파일을 테마 디렉토리 (themes / seven / ckeditor.styles.js)에 복사하여 필요에 맞게 조정하십시오.