ckeditor에서 선택한 텍스트의 html 소스를 얻는 방법

Question

ckeditor에서 5 줄을 작성했다고 가정하고 2 줄과 3 줄을 선택했습니다. 선택한 텍스트의 HTML 소스를 얻는 방법. 코드를 계속 선택하면 항상 연속으로 선택됩니다.

Answer 1

선택한 모든 HTML 노드 - CKEditor

참고 : 그것은 모두 당신의 ckeditor에서 데이터의 현재 구조에 따라 달라집니다. 태그 안에있는 텍스트를 선택하고 텍스트를 부분적으로 선택하면 완료 태그가 반환됩니다.

참고 예를 들면 : 당신이 "편집기 테"당신은 당신이 HTML 선택하지 않은 텍스트를 필요 말했듯이 다음 완료 P-태그가 수익을 얻을 것이다를 선택한 경우

<p>my ckeditor text</p> enclosed in a p-tag 

.

코드 :

var range = editor.getSelection().getRanges()[0] //editor is instance of your ck-editor 
var selectedHTML = []; 
console.log(range.startPath().elements[0].$, 'first') 
selectedHTML.push(range.startPath().elements[0].$) 
var selectedSibling = ""; 
if(range.startPath().elements[0].$ != range.endPath().elements[0].$) { 
    selectedSibling = range.startContainer.$.parentNode.nextElementSibling 
    while(selectedSibling && (selectedSibling != range.endPath().elements[0].$)) { 
     console.log(selectedSibling, 'next') 
     selectedHTML.push(selectedSibling) 
     selectedSibling = selectedSibling.nextElementSibling 
    } 
    console.log(range.endPath().elements[0].$, 'last') 
    selectedHTML.push(range.endPath().elements[0].$) 
} 
console.log(selectedHTML, 'selected HTML Tags') 

Answer 2

당신은 당신이 선택한 HTML 변수 text에 저장됩니다

var sel = window.getSelection(); 
if (sel.rangeCount) { 
    var container = document.createElement("div"); 
    for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
     container.appendChild(sel.getRangeAt(i).cloneContents()); 
    } 
    text = container.innerHTML; 
} 

하여 활성 선택을받을 수 있습니다.

Answer 3

function getSelectionHtml() 
{ 
editor=CKEDITOR.instances.editor1; 
var sel = editor.getSelection(); 
var ranges = sel.getRanges(); 
var el = new CKEDITOR.dom.element("div"); 
for (var i = 0, len = ranges.length; i < len; ++i) { 
    el.append(ranges[i].cloneContents()); 
} 
    console.log("OrgHtml:\n"+el.getHtml()); 
    return el.getHtml(); 
} 

이 함수를 사용하여 선택한 텍스트의 InnerHtml 값을 가져옵니다.이 함수도 사용하고 있습니다.