HTML 편집기에서 img 태그가 캐럿 노드의 왼쪽에 있는지 알아 보는 방법은 무엇입니까?

html 편집기를 사용하여 콘텐츠를 편집하고 있습니다. 이제는 매우 특별한 요소가 삭제되지 않도록해야합니다 (특수 클래스가있는 이미지).HTML 편집기에서 img 태그가 캐럿 노드의 왼쪽에 있는지 알아 보는 방법은 무엇입니까?

BACKSPACE, DELETE, CTRL + X/CMD + X를 사용하여 축소되지 않은 선택/범위의 사용 사례에 대해 솔루션을 찾았지만 여전히 선택/범위가 솔루션 인 경우를 찾고 있습니다. 축소되지 않고 다음 Backspace에서 내 특수 이미지 중 하나를 삭제합니다.

다음 Backspace/Delete에서 해당 img 태그 중 하나를 제거 할 수 있습니까?

예 : CARET은 캐럿/커서 위치를 표시합니다. 다음에 Backspace를 누르면 이미지가 제거됩니다. 이 사건을 어떻게 탐지 할 수 있습니까?

<p>Some Text <b>here <img class="my class" src="..."/></b>CARET some text</p>

출처

2012-04-24 Thariama

당신은을 다루는 두 가지 사례를 갖고있는 것 같다 : 캐럿이 이미지의 오른쪽에, 때 당신은 비어 있지 않은 선택이있을 때. 둘 다 관심 있어요? –

아니요, 비어 있지 않은 선택을위한 작업 솔루션이 있습니다. 문제는 캐럿이 이미지의 왼쪽/오른쪽이고 백 스페이스/삭제가 푸시 될 수있는 경우입니다. – Thariama

아래 코드는 onkeyup (그리고 onselectionchange)와 캐럿 주위 요소를 감지하지만, 그것은 단지 IE를 위해입니다. 어쩌면 jQuery로 "번역"될 수 있습니다.

function detectClass(){ 
    var range, parentR, parentL; 
    range = document.selection.createRange(); 
    range.moveStart('character',1); 
    range.moveEnd('character',1); 
    parentR = range.parentElement(); 
    range.moveStart('character',-2); 
    range.moveEnd('character',-2); 
    parentL = range.parentElement(); 
    if (parentR.className == 'special'){/* special on right */} 
    if (parentL.className == 'special'){/* special on left */} 
    return; 
}

출처

2012-04-26 09:31:27 Teemu

은 매력처럼 작동합니다 - 받아들입니다. – Thariama

캐럿이 이미지 옆에 있는지 확인하는 경우 다음은 유사한 질문에 대한 답변입니다. Rangy에 IE < 9 지원을 의지하지만 Rangy에 의지하지 않을 수 있습니다.

답변은 백 스페이스 만 고려하지만 에도 마찬가지로 적용 할 수 있습니다.

https://stackoverflow.com/a/10020476/96100

출처

2012-04-24 14:32:08

감사합니다. 시도해 보겠습니다. – Thariama

흠, 정확히 무엇을해야할지 모르겠습니다. 그 img 태그 중 하나. 할 일을 조금 더 명확하게 설명해 주실 수 있습니까? – Thariama

@Thariama : 나중에 자세히 살펴 보겠습니다. 그런데 모든 상황에서 이미지가 삭제되는 것을 방지하지 못할 수도 있습니다. 일부 브라우저에는 편집 및 상황에 맞는 메뉴의 삭제 옵션이있어 너무 늦기 전에 감지 할 수 없습니다. –

HTML 편집기에서 img 태그가 캐럿 노드의 왼쪽에 있는지 알아 보는 방법은 무엇입니까?

답변

관련 문제