Tôi đang sử dụng CKEditor làm trình chỉnh sửa back end trên trang web của mình. Nó đang khiến tôi đi vòng qua khúc quanh mặc dù dường như muốn thay đổi mã theo cách nó thấy phù hợp mỗi khi tôi nhấn nút nguồn. Ví dụ: nếu tôi nhấn nguồn và tạo <div>...

<div class="myclass">some content</div>

Sau đó, không có lý do rõ ràng nào loại bỏ lớp khỏi <div>, vì vậy khi tôi nhấn lại nguồn, nó đã được đổi thành ...

<div>some content</div>

Tôi cho rằng hành vi gây khó chịu này có thể bị tắt trong config.js, nhưng tôi đã đào và không thể tìm thấy bất cứ điều gì trong tài liệu để tắt nó.

Vô hiệu hóa lọc nội dung

Giải pháp đơn giản nhất là vào config.js và cài đặt:

config.allowedContent = true;

( Hãy nhớ xóa bộ nhớ cache của trình duyệt ). Sau đó, CKEditor ngừng lọc nội dung được nhập vào. Tuy nhiên, điều này sẽ hoàn toàn vô hiệu hóa tính năng lọc nội dung , một trong những tính năng quan trọng nhất của CKEditor.

Cấu hình lọc nội dung

Bạn cũng có thể định cấu hình bộ lọc nội dung của CKEditor chính xác hơn để chỉ cho phép các thành phần, lớp, kiểu và thuộc tính này mà bạn cần. Giải pháp này tốt hơn nhiều, vì CKEditor vẫn sẽ xóa rất nhiều HTML nhảm nhí mà trình duyệt tạo ra khi sao chép và dán nội dung, nhưng nó sẽ không loại bỏ nội dung bạn muốn.

Ví dụ: bạn có thể mở rộng cấu hình CKEditor mặc định để chấp nhận tất cả các lớp div:

config.extraAllowedContent = 'div(*)';

Hoặc một số công cụ Bootstrap:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

Hoặc bạn có thể cho phép danh sách mô tả với các dirthuộc tính dtvà ddyếu tố tùy chọn :

config.extraAllowedContent = 'dl; dt dd[dir]';

Đây chỉ là những ví dụ rất cơ bản. Bạn có thể viết tất cả các loại quy tắc - yêu cầu thuộc tính, lớp hoặc kiểu, chỉ khớp các phần tử đặc biệt, khớp với tất cả các phần tử. Bạn cũng có thể không cho phép các công cụ và xác định lại hoàn toàn các quy tắc của CKEditor. Đọc thêm về:

• Lọc nội dung trong CKEditor - tại sao bạn cần lọc nội dung.
• Bộ lọc nội dung nâng cao - mô tả sâu về cơ chế lọc.
• Quy tắc nội dung được phép - cách viết quy tắc nội dung được phép.

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 ...

Chỉnh sửa : câu trả lời này dành cho những người sử dụng mô đun ckeditor trong drupal.

Tôi tìm thấy một giải pháp không yêu cầu sửa đổi tập tin js ckeditor.

Câu trả lời này được sao chép từ đây . tất cả các khoản tín dụng nên đến tác giả gốc.

Chuyển đến "Quản trị viên >> Cấu hình >> CKEditor"; trong Hồ sơ, chọn hồ sơ của bạn (ví dụ: Đầy đủ).

Chỉnh sửa cấu hình đó và trên "Tùy chọn nâng cao >> Cấu hình JavaScript tùy chỉnh" thêm config.allowedContent = true;.

Đừng quên xóa bộ đệm trong "Tab hiệu suất."

Kể từ CKEditor v4.1, bạn có thể thực hiện việc này trong config.js của CKEditor:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

Bạn có thể tham khảo tài liệu chính thức về cú pháp chi tiết của Quy tắc nội dung được phép

nếu bạn đang sử dụng ckeditor 4.x, bạn có thể thử

config.allowedContent = true;

nếu bạn đang sử dụng ckeditor 3.x, bạn có thể gặp vấn đề này .

hãy thử đặt dòng sau vào config.js

config.ignoreEmptyParagraph = false;

Đây được gọi là ACF (Bộ lọc nội dung tự động) trong ckeditor. Nó xóa tất cả các thẻ đơn nhất là những gì chúng ta đang sử dụng trong nội dung văn bản. Sử dụng lệnh này trong tệp config.js của bạn sẽ tắt ACK này.

config.allowedContent = true;

Vui lòng tham khảo hướng dẫn chính thức của Bộ lọc nội dung nâng cao và hướng dẫn tích hợp plugin .

Bạn sẽ tìm thấy nhiều hơn thế này về tính năng mạnh mẽ này. Đồng thời xem config.extra ALLowedContent có vẻ phù hợp với nhu cầu của bạn.

Nếu bạn sử dụng Drupal VÀ mô-đun có tên "WYSIWYG" với thư viện CKEditor, thì cách giải quyết sau đây có thể là một giải pháp. Đối với tôi nó hoạt động như một lá bùa. Tôi sử dụng CKEditor 4.4.5 và WYSIWYG 2.2 trong Drupal 7.33. Tôi tìm thấy cách giải quyết này tại đây: https://www.drupal.org/node/1956778 .

Đây là: Tôi tạo một mô-đun tùy chỉnh và đặt đoạn mã sau vào tệp ".module":

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

Tôi hy vọng điều này sẽ giúp những người dùng Drupal khác.

Sau đây là ví dụ đầy đủ cho CKEDITOR 4.x :

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

KỊCH BẢN

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

Đoạn mã trên sẽ cho phép tất cả các thẻ trong trình chỉnh sửa.

Để biết thêm chi tiết: Quy tắc nội dung được phép của ED EDITOR

Tôi thấy rằng việc chuyển sang sử dụng html đầy đủ thay vì html được lọc (bên dưới trình chỉnh sửa trong hộp thả xuống Định dạng văn bản) là điều đã khắc phục vấn đề này đối với tôi. Nếu không thì phong cách sẽ biến mất.

Tôi muốn thêm config.allowedContent = true; cần phải được thêm vào tệp ckeditor.config.js không phải là config.js, config.js không làm gì cho tôi ngoài việc thêm nó vào khu vực hàng đầu của ckeditor.config.js giữ các lớp div của tôi

Một tùy chọn khác nếu sử dụng drupal chỉ đơn giản là thêm kiểu css mà bạn muốn sử dụng. theo cách đó, nó không loại bỏ phong cách hoặc tên lớp.

vì vậy trong trường hợp của tôi dưới tab css trong drupal 7 chỉ cần thêm một cái gì đó như

facebook = span.icon-facebook2

đồng thời kiểm tra xem nút kiểu chữ có được bật không

Tôi gặp vấn đề tương tự trên chrome với ckeditor 4.7.1. Chỉ cần vô hiệu hóa pasteFilter trên ckeditor dụReady. Thuộc tính này vô hiệu hóa tất cả các tùy chọn bộ lọc của Bộ lọc nội dung nâng cao (ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });