을 제거하의 크기를 조정 핸들러에 contentEditable div

StackOverflow https://stackoverflow.com/questions/1926525

문제

내가 만들어 contentEditable div 로 사용하는 풍부한 텍스트 영역.그것은 크기 처리기의 주위에 그것이 내가 제거하고 싶습니다.어떤 생각이 얼마나 나는 이렇게 할까요?

편집:이런 일이있을 나타나기 때문에 나는 절대적으로 위치 div,그래서 Firefox 추가 화 _moz_resize 요소에 속성을 수 없는 꺼집니다.

alt text

도움이 되었습니까?

해결책 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에?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top