Ckeditor allowedContent for htmlタグ

Question

私はChromeブラウザのテキスト入力用のリッチエディタとしてCkeditorを使用しています。また、システムがデータを取得した後、bs4で簡単に解析できるように、いくつかのhtml idタグを追加しました。

次は、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タグのコンテンツを許可する指示に従っていますが、これに代えて

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

を私がしたいこと：（CKEDITOR.instances.editor.getData()で）データを取得するときに、私は以下の結果を得たとして、しかし、それは動作しないようですつまり

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

、それはまだすべてのアウトストリップ私が追加したhtmlタグ

私はソースコードをチェックすると、私は同じテキストエリアの内容が隠された形式に置かれているタグと1で二回生成していることを確認、すなわち、

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

、エディタは、別のバージョンを作成するには私が編集できる実際のテキストエリア。しかし、これはすべてのhtmlタグが削除されているので役に立たない。

私の質問は、実際のテキストエリアにhtmlタグを保存して、編集と提出後にidタグを使ってhtmlを解析できるようにすることです。誰もこれについて助言することができますか？どうもありがとう。

Answer 1

私は自分の質問に答えることができないかもしれませんが、同様の状況に遭遇した人に私の解決策を教えてください。

要するに、私は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

は、この情報がお役に立てば幸いです。