을 제거하의 크기를 조정 핸들러에 contentEditable div
-
20-09-2019 - |
문제
내가 만들어 contentEditable div 로 사용하는 풍부한 텍스트 영역.그것은 크기 처리기의 주위에 그것이 내가 제거하고 싶습니다.어떤 생각이 얼마나 나는 이렇게 할까요?
편집:이런 일이있을 나타나기 때문에 나는 절대적으로 위치 div,그래서 Firefox 추가 화 _moz_resize 요소에 속성을 수 없는 꺼집니다.
해결책 2
래퍼 디브를 추가하고 래퍼를 절대적으로 배치 한 다음 내부 분할을 만족 시켜서이 작업을 수행 할 수있을 것 같습니다.
다른 팁
그냥 주석으로 해제할 수 있습니다 Firefox 자동 크기 조정 처리 기능을 통해 보내(매트리스-문서화) enableObjectResizing
명령을 document:
document.execCommand("enableObjectResizing", false, false);
AFAIK,이 안전하게 수행하면 문서로드,그리고 방법이 없어 난 의 사용하지 않래버는 별도의 기능입니다.
Chrome 39에서는이 손잡이가 원하더라도 존재하지 않는 것 같습니다.
Firefox에서는 단순히 사용할 수 있습니다 execCommand
, Zoogiezork가 대답 한 것처럼.
그러나 인터넷 익스플로러에서는 이것이 꺼질 수 없습니다. 주변에서 일해야합니다.
~ 안에 wymeditor 개발, 여기 내가 찾은 것입니다.
다음 결과 :
- IE에서는 Resize UI가 1 초 동안 나타난 다음 사라집니다. 사용자가 사용할 수있는 방법이없는 것 같습니다.
- 이미지는 텍스트로 선택되었습니다
mouseup
- 이미지를 드래그하는 능력. 일부 브라우저에서는 드래그하기 전에 선택해야 할 수도 있습니다. 이전 항목에 작성된대로 간단합니다
mouseup
이미지가 선택됩니다. - 이미지는 "제어 선택"(크기 조정 UI를 제공하는)이 아닌 텍스트 선택을 사용하여 선택됩니다.
이것은 몇 시간 동안 심호흡을 한 후에 내가 생각해 낼 수있는 최고입니다. 당신이 그 손잡이를 정말로 제거하고 싶다면 충분하다고 생각합니다.
즉, 설정 oncontrolselect
돌려 주다 false
이미지에서, 실제로 핸들이 나타나는 것을 방지하고, 다음 핸들러를 다음에 첨부하여 영리하게 할 수 있습니다. mousedown
이벤트:
function (evt) {
var img;
function returnFalse() {
return false;
}
if (evt.tagName.toLowerCase() === "img") {
img = evt.target;
img.oncontrolselect = returnFalse;
}
}
실제로 완전히 잘 작동하지 않습니다. 그것이 잘 작동하지 않는 이유는 이미지에서 드래그 앤 드롭 작동을 시작하기 위해서는 마우스를 눌러서 눌러서 잠시 동안 눌러야했기 때문입니다. 드래그. 마우스를 누르고 즉시 드래그를 시작하면 이미지가 그 자리에 남아 드래그되지 않습니다.
그래서 나는 그렇게하지 않았다.
내가 한 일은 다음과 같습니다. 모든 브라우저에서 나는 사용했습니다 mouseup
텍스트하려면 대상 이미지를 독점적으로 선택하십시오. Nonie 및 IE11에서 동기식으로 :
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
selectSingleNode(img); // In my case, I used Rangy
}
}
IE 7-10에서 비동기 적으로 :
function (evt) {
if (evt.target.tagName.toLowerCase() !== "img") {
return;
}
window.setTimeout(function () {
selectSingleNode(img); // In my case, I used Rangy
}, 0);
}
이를 통해 핸들이 나타나면 이미지가 "제어 선택"을 잃어 버리기 때문에 최대한 빨리 사라집니다.이 선택은 정기적 인 텍스트 선택으로 대체되기 때문입니다.
Internet Explorer 7 ~ 11에서 나는 핸들러를 dragend
모든 선택을 제거합니다.
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
deselect(); // I use Rangy for this, as well
}
}
이것은 드래그 앤 드롭 후 나타나는 핸들이 사라집니다.
나는 이것이 도움이되기를 바랍니다. 그리고 당신이 그것을 더 좋게 만들 수 있기를 바랍니다.
IE11의 경우 (이전 버전의 IE를 테스트하지는 않았지만 작동한다고 생각합니다) IMG 태그에 ContentEdable = "False"속성을 추가 할 수 있습니다. 이렇게하면 드래그 앤 드롭을 제자리에 유지하면서 재조정이 수행되는 것을 방지합니다.
... 최고의 수정 사항입니다
<div contenteditable="true">
<label contenteditable="false"><input/></label>
</div>
또는 입력/IMG를 감싸는 HTML 요소
IE11에서 매력처럼 작동합니다
나는 그 문제에 직면합니다. 나는 시도했다 document.execCommand("enableObjectResizing", false, false);
그러나 이동 아이콘이 여전히 나타났습니다. 내 문제를 해결 한 것은 단지 정지였습니다 e.preventDefault()
언제 onmousedown
이벤트가 발생합니다.
element.onmousedown = function(e){
e.preventDefault();
}
스타일을 추가해 보셨습니까?
border: none;
Div에?