ฉันใช้CKEditorเป็นเครื่องมือแก้ไขส่วนหลังบนเว็บไซต์ของฉัน ฉันกำลังขับรถไปรอบ ๆ โค้ง แต่ดูเหมือนว่าฉันต้องการเปลี่ยนรหัสเป็นวิธีที่เหมาะสมเมื่อใดก็ตามที่ฉันกดปุ่มซอร์ส ตัวอย่างเช่นถ้าฉันกดแหล่งข้อมูลและสร้าง<div>...

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

จากนั้นก็ไม่มีเหตุผลที่ชัดเจนตัดชั้นเรียนจาก<div>ดังนั้นเมื่อฉันกดแหล่งที่มาอีกครั้งก็เปลี่ยนเป็น ...

<div>some content</div>

ฉันคิดว่าพฤติกรรมที่น่ารำคาญนี้สามารถปิดconfig.jsได้ แต่ฉันขุดและไม่พบสิ่งใดในเอกสารเพื่อปิด

ปิดใช้งานการกรองเนื้อหา

ทางออกที่ง่ายที่สุดคือไปที่config.jsและการตั้งค่า:

config.allowedContent = true;

( อย่าลืมล้างแคชของเบราว์เซอร์ ) จากนั้น CKEditor หยุดกรองเนื้อหาที่ป้อนเลย อย่างไรก็ตามสิ่งนี้จะปิดการใช้งานการกรองเนื้อหาทั้งหมดซึ่งเป็นหนึ่งในคุณสมบัติที่สำคัญที่สุดของ CKEditor

การกำหนดค่าการกรองเนื้อหา

คุณสามารถกำหนดค่าตัวกรองเนื้อหาของ CKEditorได้แม่นยำยิ่งขึ้นเพื่ออนุญาตเฉพาะองค์ประกอบคลาสสไตล์และแอตทริบิวต์ที่คุณต้องการ วิธีนี้ดีกว่ามากเนื่องจาก CKEditor จะยังคงลบ HTML เส็งเคร็งจำนวนมากที่เบราว์เซอร์สร้างเมื่อคัดลอกและวางเนื้อหา แต่จะไม่ดึงเนื้อหาที่คุณต้องการ

ตัวอย่างเช่นคุณสามารถขยายการกำหนดค่าเริ่มต้นของ CKEditor เพื่อรับคลาส div ทั้งหมด:

config.extraAllowedContent = 'div(*)';

หรือบางสิ่ง Bootstrap:

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

หรือคุณสามารถอนุญาตรายการคำอธิบายที่มีdirแอตทริบิวต์ที่เป็นตัวเลือกสำหรับdtและddองค์ประกอบ:

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

นี่เป็นเพียงตัวอย่างพื้นฐานมาก ๆ คุณสามารถเขียนกฎได้ทุกประเภท - ต้องมีคุณสมบัติ, คลาสหรือสไตล์, จับคู่เฉพาะองค์ประกอบพิเศษ, จับคู่องค์ประกอบทั้งหมด คุณสามารถไม่อนุญาตสิ่งต่าง ๆ และกำหนดกฎของ CKEditor ใหม่ทั้งหมด อ่านเพิ่มเติมเกี่ยวกับ:

• การกรองเนื้อหาใน CKEditor - ทำไมคุณต้องมีการกรองเนื้อหา
• ตัวกรองเนื้อหาขั้นสูง - คำอธิบายอย่างละเอียดของกลไกการกรอง
• กฎเนื้อหาที่ได้รับอนุญาต - วิธีเขียนกฎเนื้อหาที่อนุญาต

ฉันพบวิธีแก้ปัญหา

สิ่งนี้ปิดการกรอง แต่ก็ใช้งานได้ แต่ไม่ใช่ความคิดที่ดี ...

config.allowedContent = true;

ในการเล่นกับสตริงเนื้อหาจะทำงานได้ดีสำหรับ id ฯลฯ แต่ไม่ใช่สำหรับแอตทริบิวต์คลาสและสไตล์เนื่องจากคุณมี () และ {} สำหรับการกรองคลาสและสไตล์

ดังนั้นการเดิมพันของฉันคืออนุญาตให้มีคลาสใด ๆ ในโปรแกรมแก้ไขคือ:

config.extraAllowedContent = '*(*)';

สิ่งนี้อนุญาตให้คลาสและสไตล์อินไลน์ใด ๆ

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

หากต้องการอนุญาตเฉพาะ class = "asdf1" และ class = "asdf2" สำหรับแท็กใด ๆ :

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

(ดังนั้นคุณต้องระบุชื่อคลาส)

หากต้องการอนุญาตเฉพาะ class = "asdf" สำหรับแท็ก p เท่านั้น:

config.extraAllowedContent = 'p(asdf)';

วิธีอนุญาตให้ใช้แอตทริบิวต์ id สำหรับแท็กใด ๆ :

config.extraAllowedContent = '*[id]';

ฯลฯ

หากต้องการอนุญาตแท็กสไตล์ (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

จะซับซ้อนกว่านี้เล็กน้อย:

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

หวังว่ามันจะเป็นทางออกที่ดีกว่า ...

แก้ไข : คำตอบนี้สำหรับผู้ที่ใช้โมดูล ckeditor ใน drupal

ฉันพบโซลูชันที่ไม่ต้องการแก้ไขไฟล์ ckeditor js

คำตอบนี้จะคัดลอกมาจากที่นี่ เครดิตทั้งหมดควรไปที่ผู้เขียนต้นฉบับ

ไปที่ "ผู้ดูแลระบบ >> การกำหนดค่า >> CKEditor"; ใต้โปรไฟล์เลือกโปรไฟล์ของคุณ (เช่นเต็ม)

แก้ไขที่รายละเอียดและที่ "ตัวเลือกขั้นสูง >> การกำหนดค่า JavaScript ที่กำหนดเอง" config.allowedContent = true;เพิ่ม

อย่าลืมล้างแคชใน "แท็บประสิทธิภาพ"

ตั้งแต่ CKEditor v4.1 คุณสามารถทำได้ใน config.js ของ CKEditor:

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

คุณสามารถอ้างถึงเอกสารทางการสำหรับไวยากรณ์รายละเอียดของกฎเนื้อหาที่อนุญาต

หากคุณใช้ ckeditor 4.x คุณสามารถลองได้

config.allowedContent = true;

หากคุณใช้ ckeditor 3.x คุณอาจประสบปัญหานี้

ลองวางบรรทัดต่อไปนี้ใน config.js

config.ignoreEmptyParagraph = false;

สิ่งนี้เรียกว่า ACF (ตัวกรองเนื้อหาอัตโนมัติ) ใน ckeditor.It ลบแท็ก unnessary ทั้งหมดที่เราใช้ในเนื้อหาข้อความการใช้คำสั่งนี้ในไฟล์ config.js ของคุณควรจะปิด ACK นี้

config.allowedContent = true;

โปรดดูที่ขั้นสูงคู่มือกรองอย่างเป็นทางการของเนื้อหาและการกวดวิชาบูรณาการปลั๊กอิน

คุณจะพบมากกว่านี้เกี่ยวกับคุณสมบัติที่มีประสิทธิภาพนี้ ดูที่config.extraAllowedContentที่เหมาะกับความต้องการของคุณ

หากคุณใช้ Drupal และโมดูลที่เรียกว่า "WYSIWYG" กับไลบรารี CKEditor การแก้ปัญหาต่อไปนี้อาจเป็นวิธีแก้ปัญหา สำหรับฉันมันใช้งานได้เหมือนมีเสน่ห์ ฉันใช้ CKEditor 4.4.5 และ WYSIWYG 2.2 ใน Drupal 7.33 ฉันพบวิธีแก้ปัญหานี้ที่นี่: https://www.drupal.org/node/1956778 https://www.drupal.org/node/1956778

นี่คือ: ฉันสร้างโมดูลที่กำหนดเองและใส่รหัสต่อไปนี้ในไฟล์ ".module":

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

ฉันหวังว่านี่จะช่วยผู้ใช้ Drupal รายอื่น ๆ

ต่อไปนี้เป็นตัวอย่างที่สมบูรณ์แบบสำหรับCKEDITOR 4.x :

HTML

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

SCRIPT

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

โค้ดด้านบนจะอนุญาตแท็กทั้งหมดในเครื่องมือแก้ไข

สำหรับรายละเอียดเพิ่มเติม: CK EDITOR กฎเนื้อหาที่ได้รับอนุญาต

ฉันพบว่าการสลับไปใช้ html แบบเต็มแทนที่จะเป็น html ที่กรองแล้ว (ด้านล่างเครื่องมือแก้ไขในกล่องแบบเลื่อนลงรูปแบบข้อความ) เป็นสิ่งที่แก้ไขปัญหานี้ให้ฉันได้ มิฉะนั้นสไตล์จะหายไป

ฉันต้องการเพิ่ม config.allowedContent = true นี้ จำเป็นต้องเพิ่มลงในไฟล์ ckeditor.config.js ไม่ใช่ไฟล์ config.js, config.js ไม่ได้ทำอะไรเลยสำหรับฉัน แต่เพิ่มลงในพื้นที่ด้านบนของ ckeditor.config.js เก็บคลาส div ของฉันไว้

ตัวเลือกอื่นหากใช้ drupal เป็นเพียงการเพิ่มสไตล์ css ที่คุณต้องการใช้ วิธีนั้นจะไม่ตัดชื่อสไตล์หรือคลาสออก

ดังนั้นในกรณีของฉันภายใต้แท็บ css ใน drupal 7 เพียงเพิ่มสิ่งที่ชอบ

Facebook = span.icon-facebook2

ตรวจสอบด้วยว่าปุ่มแบบอักษรเปิดใช้งานอยู่

ฉันประสบปัญหาเดียวกันกับโครมกับ ckeditor 4.7.1 เพียงแค่ปิดการใช้งาน pasteFilter ใน ckeditor instanceReady คุณสมบัตินี้จะปิดใช้งานตัวเลือกตัวกรองทั้งหมดของ Advance Content Filter (ACF)

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