Ckeditor allowedContent for html tag

Chrome 브라우저에서 텍스트 입력을위한 리치 편집기로 Ckeditor를 사용하고 있습니다. 또한 시스템에서 데이터를 가져온 후 bs4로 쉽게 구문 분석 할 수 있도록 일부 HTML ID 태그를 추가했습니다.Ckeditor allowedContent for html tag

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

그리고 config.js에서 :

은 HTML 내 설정입니다

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에서 모든 html 태그 내용을 config.allowedContent = *;으로 보존 할 수 있도록 지시를 이미 따라갔습니다. 대신이의

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

을 내가 원하는 : (CKEDITOR.instances.editor.getData()에 의해) 데이터를 가져 오는 때 다음과 같은 결과를 얻었다 그러나, 그것은 작동하지 않는 것 같다 즉

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

, 아직 밖으로 모두 제거합니다 내가 추가 한 HTML 태그 나는 소스 코드를 확인

, 나는

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

, 같은 텍스트 영역의 내용, 즉 숨겨진 형식으로 넣어되는 태그와 함께 한, 두 번 생산 된 것을 발견하고 편집기는 다른 버전을 생성합니다 내가 편집 할 수있는 실제 텍스트 영역. 그러나 모든 html 태그가 거기에서 제거되기 때문에 이것은 쓸모가 없습니다.

그래서 내 질문은 편집 및 제출 후 ID 태그 HTML을 구문 분석 할 수 있도록 실제 텍스트 영역에서 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 allowedContent for html tag

답변

관련 문제