Ngăn chặn WYSIWYG + CKEditor thoát khỏi các lớp html

Tôi đang sử dụng trình soạn thảo WYSIWYG với CKEditor. Tôi thấy rằng khi thêm các lớp tùy chỉnh vào các thành phần của mình từ chế độ xem "nguồn", CKEditor sẽ loại bỏ các lớp đó khi chuyển ra khỏi chế độ xem nguồn.

Khi tìm kiếm giải pháp cho vấn đề này, tôi đã tìm thấy trang mô-đun CKEditor mô tả cách khắc phục vấn đề này khi chỉ sử dụng CKEditor. (Về cơ bản, chúng ta cần thiết lập cấu hình JS config.allowedContent = truetrong cài đặt Bộ lọc nội dung nâng cao).

Tuy nhiên, khi sử dụng CKEditor qua WYSIWYG, các cài đặt này không được hiển thị trong giao diện quản trị. Làm thế nào để bạn đạt được điều tương tự khi sử dụng CKEditor qua WYSIWYG?

PS: Tôi không thể sử dụng CKEditor một mình vì nó không tích hợp với plugin phương tiện .

Phiên bản nào của CKEditor bạn đang sử dụng? Có một vấn đề với CKEditor 4.1+, có một tính năng gọi là Bộ lọc nội dung tự động (ACF) sẽ tự động loại bỏ các thuộc tính không được xác định cho trình chỉnh sửa: https://drupal.org/node/1956778

Bản vá số 37 trong vấn đề làm việc cho tôi.

Tôi tìm thấy một giải pháp.

Điều này tắt bộ lọc, nó hoạt động, nhưng không phải là một ý tưởng tốt ...

config.allowedContent = true;

Để chơi với một chuỗi nội dung hoạt động tốt cho id, v.v., nhưng không phải cho các thuộc tính lớp và kiểu, bởi vì bạn có () và {} cho lọc lớp và kiểu.

Vì vậy, đặt cược của tôi là cho phép bất kỳ lớp nào trong trình soạn thảo là:

config.extraAllowedContent = '*(*)';

Điều này cho phép bất kỳ lớp và bất kỳ phong cách nội tuyến.

config.extraAllowedContent = '*(*);*{*}';

Để chỉ cho phép class = "asdf1" và class = "asdf2" cho bất kỳ thẻ nào:

config.extraAllowedContent = '*(asdf1,asdf2)';

(vì vậy bạn phải chỉ định tên lớp)

Để chỉ cho phép class = "asdf" chỉ cho thẻ p:

config.extraAllowedContent = 'p(asdf)';

Để cho phép thuộc tính id cho bất kỳ thẻ nào:

config.extraAllowedContent = '*[id]';

Vân vân

Để cho phép thẻ kiểu (<style type = "text / css"> ... </ style>):

config.extraAllowedContent = 'style';

Để phức tạp hơn một chút:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

Hy vọng nó là một giải pháp tốt hơn ...

Điều này có vẻ như là một cái gì đó nên được thêm vào mô-đun WYSIWYG, khả năng thêm cài đặt tùy chỉnh cho người chỉnh sửa là một yêu cầu khá phổ biến. Nhưng trong trường hợp không có điều đó, tôi vẫn khuyên bạn không nên tự chỉnh sửa mô-đun vì nó sẽ bị hỏng khi nâng cấp ... may mắn là mô-đun này cung cấp một cuộc gọi đến drupal_alter, vì vậy trong một mô-đun tùy chỉnh:

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    //check if the editor is ckeditor and the version is at least 4.0
    if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
        //add custom settings for ckeditor 4.+ here
        $settings['allowedContent'] = TRUE;
    }
}

trong đó "mymodule" rõ ràng là tên của mô-đun tùy chỉnh của bạn. Điều này hoàn thành nhiệm vụ mà không cần chỉnh sửa mô-đun elses của ai đó.

Hãy thử thêm các mục sau vào mô-đun / wysiwyg / biên tập viên / ckeditor.inc

'allowedContent' => TRUE, đến function wysiwyg_ckeditor_settings($editor, $config, $theme)

để bây giờ nó đọc:

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
  $settings = array(
    'width' => 'auto',
    // For better compatibility with smaller textareas.
    'resize_minWidth' => 450,
    'height' => 420,
    // @todo Do not use skins as themes and add separate skin handling.
    'theme' => 'default',
    'skin' => !empty($theme) ? $theme : 'kama',
    // By default, CKEditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKEditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    // ADDED  'allowedContent' => TRUE, to keep WYSIWYG from removing classes
    'entities_latin' => FALSE,
    'entities_greek' => FALSE,
    'allowedContent' => TRUE, 
  );

Không cần hack bất kỳ nguồn nào, và cũng không cần cố gắng tìm hiểu xem các cài đặt này đang được đọc ở đâu, bạn có thể thêm nó vào mô-đun tùy chỉnh của riêng bạn

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraAllowedContent'] = array(
            'a[download,type,length,href]',
            'span;ul;li;table;tr;td;style;*[id];*(*);*{*}'
        );
    }
}

Các cài đặt mà OP đang yêu cầu là *(*);*{*}từ câu trả lời của @Tommy ở trên. Điều này dường như cho phép các thuộc tính lớp và kiểu trên bất kỳ phần tử nào. Phần còn lại chỉ là mục ví dụ. Một ví dụ khác, mục này cho phép các thẻ cần thiết cho mô-đun phương tiện.

'img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);video[width,height,controls,src](*);source[src,type];audio[controls,src](*);img[*](media-element,file-default)',

Bộ lọc HTML được lọc loại bỏ các lớp khỏi các thành phần không có trong các thành phần HTML được phép của nó . Thẻ đoạn văn ( <p>) không có trong đó theo mặc định (có thể gây nhầm lẫn và không tự nhiên), mặc dù nó có thể là yếu tố thường xuyên nhất mà lớp được áp dụng. Khi bạn đặt nó vào đó, HTML đã lọc sẽ không còn loại bỏ các lớp khỏi các thẻ này. Tương tự với thẻ hình ảnh ( <img>).