如何在CKEditor中定義允許的標籤？

有時用戶將不同來源的文本複製並粘貼到CKEditor，但我想限制他們可以複製到CKEditor的標籤。如何在CKEditor中定義允許的標籤？
我只需要在CKEditor的使用某些標籤：列表標籤，標籤休息，等...
我可以定義他們&禁用CKEditor的其它標籤？

2010-05-26 kenpeter

CKEditor的4擁有全新的（花式），用於過濾標籤系統的幾個例子：http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter – Eli 2014-02-06 16:22:15

您可以使用一些設置。您可以定義這些設置，編輯ckeditor根目錄下的config.js文件。例如，如果你想成爲激進像我一樣，你可以把：

config.forcePasteAsPlainText = true;

如果你想要像你說的正好限制只有特定的標籤，我發現波紋管的設置：

config.removeFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd';

的只有當用戶執行「刪除格式」命令時纔會完成最後的操作。更多信息：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags

考慮到所有的時間，我認爲你已經找到了你的答案，但其他人可以得到幫助。

來源

2010-12-05 13:39:12

forcePasteAsPlainText並不總是有效，請參閱http：//dev.ckeditor。com/ticket/756 – Damien 2012-09-20 13:04:53

我只是這樣做，以確保沒有人可以在編輯器中放入<input>標籤。這也許可以擴展到其他標籤：

  CKEDITOR.on('instanceReady', function(ev) 
      { 
       var editor = ev.editor; 
       var dataProcessor = editor.dataProcessor; 
       var htmlFilter = dataProcessor && dataProcessor.htmlFilter; 
       htmlFilter.addRules(
       { 
        elements : 
        { 
         input: function(element) 
         { 
          return false; 
         }, 
        } 
       }); 
      });

來源

2011-07-14 23:52:50

更多關於此處的信息：http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor – Eli 2011-12-11 21:26:26

我直接應用於html標籤的有限選擇粘貼操作，使用從phpjs.org的strip_tags方法。

CKEDITOR.on('instanceReady', function(ev) { 
    ev.editor.on('paste', function(evt) { 
     evt.data['html'] = strip_tags(evt.data['html'], 
     '<i><em><b><strong><blockquote><p><br><div><ul><li><ol>' // allowed list 
    ); 
    }); 
}); 

function strip_tags (input, allowed) { 
    // http://phpjs.org/functions/strip_tags (http://kevin.vanzonneveld.net) 
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>) 
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, 
     commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi; 
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) { 
     return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : ''; 
    }); 
}

來源

2012-06-15 21:42:05 Kato

是HTML的正則表達式解析嗎？ – Nenotlep 2013-01-23 15:14:07

三通！我的天啊！它會是嗎？地球上的罪孽。實際上，它是剝離HTML而不是解析，這正是正則表達式非常適合的一個目的。 – Kato 2013-01-23 15:59:27

ckeditor 4用'event.data.dataValue'代替'evt.data ['html']' – user570605 2013-05-05 22:36:07

可以使用whitelist plugin在配置中定義了允許的元素和屬性的列表，並拒絕其他任何東西。

這與Paul Tomblin提出的解決方案基本相同，但應該更容易處理更多元素，而不是複製大量代碼，而不是使用白名單來代替黑名單，因此任何不允許的內容都將被刪除。

來源

2012-06-16 08:59:28 AlfonsoML

這是一個好主意，但插件不會過濾拖放 – Damien 2012-09-20 13:07:37

將插件作爲開源提供的好處應該是你可以改進它，甚至支付某人去做你需要的東西。即使用戶拖放東西，輸出也會保持清理狀態，所以這只是一個部分錯誤，我們可以說問題在於CKEditor沒有像拖放一樣拖放拖放操作。 – AlfonsoML 2012-09-20 14:18:51

是的，我想我會用它，謝謝。至於修復它，看到這個ckeditor bug在「wontfix」處關閉似乎並不容易：http://dev.ckeditor.com/ticket/5473。 – Damien 2012-09-21 07:50:29

CKEDITOR.config.fullPage = false

指示要編輯的內容是否作爲完整的HTML頁面輸入。整頁包括<html>,<head>和<body>元素。最終輸出也會反映此設置，僅當禁用此設置時才包括<body>內容。

來源

2013-06-27 08:02:45

爲了增加我的輸入，自4.1開始提供高級內容過濾器功能，該功能允許爲允許的內容（標籤和哪些樣式/屬性/類別）提供非常特定的規則。我發現它非常強大並且非常好配置。

更在http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter閱讀，但這裏是從頁

config.allowedContent = true; // to allow all 

// A rule accepting <p> and <h1> elements with optional "left" and "right" classes. 
// Note: Both elements may contain these classes, not only <h1>. 
config.allowedContent = "p h1(left,right)"; 

// Rules allowing: 
// * <p> and <h1> elements with an optional "text-align" style, 
// * <a> with a required "href" attribute, 
// * <strong> and <em> elements, 
// * <p> with an optional "tip" class (so <p> element may contain 
// a "text-align" style and a "tip" class at the same time). 
config.allowedContent = "p h1{text-align}; a[!href]; strong em; p(tip)";

來源

2014-01-22 06:55:34 Nenotlep

如何在CKEditor中定義允許的標籤？

回答

相關問題