Tệp ckeditor.styles.js tùy chỉnh với mô-đun WYSIWYG

Tôi đang cố gắng tùy chỉnh thả xuống "Kiểu phông chữ" trong CKeditor thông qua mô-đun WYSIWYG, nhưng tôi không thấy cách nào để chỉ định đường dẫn cho ckeditor.styles.js trong trình chỉnh sửa hồ sơ của mô-đun wysiwyg.

Tham khảo bài đăng này để biết thêm thông tin - nó nói rằng nên có một cách để xác định vị trí cho tệp đó.

Đây là 2 cách (chắc chắn có nhiều hơn) để thêm các kiểu ckeditor tùy chỉnh bằng cách sử dụng mô-đun wyswiwyg drupal.

1. Sử dụng mô-đun Ckeditor đóng góp
2. Sử dụng hook_wysiwyg_editor_sinstall_alter như sau:

(mã "lấy cảm hứng" từ mô-đun ckeditor_styles)

Trong một mô-đun tùy chỉnh, thêm triển khai hook_wysiwyg_editor_sinstall_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";
  }
}

và thêm một tệp có tên ckeditor_styles.js trong thư mục con js của mô-đun tùy chỉnh:

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' } },
  ]);

Tôi làm điều này cho các trang web Drupal của tôi mọi lúc! Câu trả lời của @ Marblegravy là bước đầu tiên, nhưng bạn cũng có thể muốn thực hiện những việc như thêm quy tắc css tương ứng vào CKEditor của mình để khi trình chỉnh sửa của bạn áp dụng một trong các kiểu tùy chỉnh của bạn, trình chỉnh sửa thực sự áp dụng chúng và trình chỉnh sửa có thể xem trước thay đổi, mà không phải tiết kiệm!

Gần đây tôi đã viết một bài đăng blog rất chi tiết về tất cả các bộ phận chuyển động ở đây: http://drupalwoo.com/content/how-customize-ckeditor-drupal-7-site

Những gì tôi trình bày trong hướng dẫn là

1. Cách tùy chỉnh thanh công cụ

2. Tạo tệp ckeditor.styles.js tùy chỉnh. Đây là một mẫu:

    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. Định cấu hình CKEditor của bạn để nó biết nơi tìm tệp tệp tùy chỉnh này

4. Triển khai css tương ứng cho các kiểu này và cho CKEditor biết về các kiểu này!

5. Làm thế nào để sử dụng các thiết lập như là một biên tập viên!

Hy vọng nó hữu ích! Hãy cho chúng tôi biết nếu bạn làm việc này!

Tôi chỉ viết một mô-đun tùy chỉnh nhỏ. Tôi đang sử dụng mô-đun Wysiwyg (chứ không phải mô-đun CKEditor). Điều này sau đó cho phép các kiểu từ ckeditor.styles.js trong chủ đề của tôi được tải.

/**
 * 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";
  }
}

Bạn có thể xác định kiểu trong cài đặt cấu hình WYSIWYG (admin / config / content / wysiwyg, chỉnh sửa cấu hình mong muốn).

Tab "CSS"> "Các lớp CSS"

Tùy chọn định nghĩa các lớp CSS cho danh sách thả xuống "Kiểu phông chữ".

Nhập một lớp trên mỗi dòng theo định dạng: [nhãn] = [phần tử]. [Class]. Ví dụ: Tiêu đề = h1.title

Nếu để trống, các lớp CSS sẽ tự động được nhập từ (các) biểu định kiểu đã tải. Sử dụng cài đặt Stylesset trong nội bộ.

Chỉ cần đặt tệp ckeditor.styles.js bị ghi đè của bạn vào thư mục gốc của chủ đề, sau đó truy cập / admin / config / content / ckeditor / edit / , sau đó cho từng cấu hình của bạn, chỉnh sửa chúng và mở trường css , tìm Trường Kiểu được xác định trước và chọn Sử dụng chủ đề ckeditor.styles.js .

Từ trợ giúp trường * Kiểu được xác định trước *:

Xác định vị trí của tệp ckeditor.styles.js. Nó được sử dụng bởi danh sách thả xuống Kiểu có sẵn trong thanh công cụ mặc định. Sao chép các trang web / tất cả / mô-đun / contrib / ckeditor / ckeditor.styles.js vào thư mục chủ đề của bạn (Themes / seven / ckeditor.styles.js) và điều chỉnh nó theo nhu cầu của bạn.