Ckeditor allowed HTML標記的內容

我使用Ckeditor作爲Chrome瀏覽器中文本輸入的豐富編輯器。在系統獲取數據後，我還添加了一些html id標籤，以便通過bs4進行簡單解析。Ckeditor allowed HTML標記的內容

以下是我在HTML設置：

CKEDITOR.replace('editor', { 
toolbar : 'Basic', 
uiColor : '#9AB8F3', 
height : '70%', 
startupShowBorders: false, 
})

而且在config.js：

config.toolbarGroups = [ 
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 
    { name: 'editing',  groups: [ 'find', 'selection', 'spellchecker' ] }, 
    { name: 'links' }, 
    { name: 'insert' }, 
    { name: 'forms' }, 
    { name: 'tools' }, 
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 
    { name: 'others' }, 
    '/', 
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, 
    { name: 'styles' }, 
    { name: 'colors' }, 
    { name: 'about' } 
]; 

// Remove some buttons provided by the standard plugins, which are 
// not needed in the Standard(s) toolbar. 
config.removeButtons = 'Underline,Subscript,Superscript'; 

// Set the most common block elements. 
config.format_tags = 'p;h1;h2;h3;pre'; 

// Simplify the dialog windows. 
config.removeDialogTabs = 'image:advanced;link:advanced'; 

config.allowedContent = True;

};

雖然我已經按照指示允許在config.jd中使用config.allowedContent = *;保留所有html標籤內容。然而，似乎沒有工作，我得到的數據時（通過CKEDITOR.instances.editor.getData()）得到以下結果：

<span style='font-size:11.0pt;'> content </span>

，而不是這一點，我想：

<span id="news_content" style='font-size:11.0pt;'> content </span>

換句話說，它仍然剔除掉所有我添加的html標籤。

當我檢查的源代碼，我發現，同樣的textarea的內容是用一個與標籤被放置在隱藏格式，即產生了兩次，

<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">

和編輯器中產生另一個版本真正的textarea，允許我編輯。但是，這是無用的，因爲所有的html標籤都被剝離了。

所以，我的問題是，如何保留真正的textarea中的html標籤，以便我可以在編輯和提交後使用id標籤解析html。任何人都可以就此提出建議嗎？非常感謝。

來源

2017-01-23 CL. L

我可能無法回答我自己的問題，但我喜歡與遇到類似情況的人分享我的解決方案。

總之，最終我放棄使用ckeditor或任何插件編輯器，因爲它們中的很多將剝離掉html標籤，這對於我在隨後的過程中是必不可少的。

感謝html5，我的解決方案是使用可編輯div。設置非常簡單，如下：

CSS：

#my-content { 
    box-shadow: 0 0 2px #CCC; 
    min-height: 150px; 
    overflow: auto; 
    padding: 1em; 
    margin: 5px; 
    resize: vertical; 
    outline: none; 
}

HTML：

<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>

js腳本：

$('.editable').each(function(){ 
    this.contentEditable = true; 
});

到目前爲止，我很喜歡它，它顯示了什麼HTML代碼顯示和保存我添加的所有標籤。唯一的缺點是它沒有提供任何用於格式編輯的工具欄。我的解決方案是爲它製作一個，通過以下鏈接，您可以獲得一個非常好的教程，以製作帶有隨時可用演示的工具欄作爲插圖。

https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657

希望這有助於。

來源

2017-01-24 15:38:46

Ckeditor allowed HTML標記的內容

回答

相關問題