2012-06-25 1 views
1

나는 html5 contentEditable="true" 기능으로 놀고 있습니다. 가장 좋은 예는 여기 HTML5 Demo: ContentEditable입니다. 이제이 기능은 IE 9.0 (충격적이고 뭔가 IE에서 가장 잘 작동합니다.)에서 가장 잘 작동합니다. 그리고 모든 HTML 요소 위에이 멋진 크기 조정 상자가 표시됩니다 (버튼이나 링크를 클릭 할 수 없기 때문에 매우 재미 있습니다)^(잘 wokring 최고의 이야기 ...)).HTML5 ContentEditable :이 크기 조정 상자는 IE에서 제공되는 곳입니다.

데모를 복사하여 콘텐츠 편집 가능 부분 으로 데치기했지만 요소에 대한 크기 조정 상자를 만드는 방법을 찾을 수 없습니다.. 내가 뭘 놓치고 있니?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset=utf-8> 
     <title>HTML5 Demo: ContentEditable</title> 
    </head> 
    <body> 
     <section contenteditable="true"> 
      <h2>Go ahead, edit away!</h2> 
      <p> 
       Here's a typical paragraph element 
      </p> 
      <ol> 
       <li> 
        and now a list 
       </li> 
      </ol> 
     </section> 
    </body> 
</html> 

출처 : HTML5 Demo: ContentEditable

+1

"놀랍군, IE에서 가장 잘 작동하는 제품은 전혀 문제가되지 않았습니다 ... IE에서 IE가 똑같은 * 충격을주는 것과 비슷했습니다" – spender

+0

이 크기 조정 기능은 다른 브라우저에서는 작동하지 않습니다. IE는 현재 "최고의"contentEditable 구현을 가지고 있으며 afaik는 사양을 작성했습니다. 이제는 아무도 볼 수없는 추가 기능을 만들었는지 모르겠다. (설명서를 찾지 못했다.) 아니면 그냥 표준을 준수하지 않는 방식으로 확장했다. ..... – Stefan

+0

IE는'contenteditable'을 적어도 다른 브라우저보다 3 년 앞서 더 철저한 작업을 수행했습니다. 다른 브라우저는 IE의 기능을 더 크게 또는 덜 복사했으며 사양은 소급하여 작성되었습니다 (Microsoft가 아니더라도). –

답변

1

모질라는 또한 유사한 resize handles for tables and images있다

여기에 내 코드 간단한 HTML이다. WebKit과 Opera에는 편집 가능한 내용을위한 UI가 내장되어 있습니다. IE는 나아가서 have layout 인 모든 요소에 대해 크기 조정 핸들을 제공합니다. 또한이 모드에있는 편집 가능한 요소를 처리하기 위해 IE에는 different type of selection object이 있습니다.

+0

이 흥미로운 링크에 감사드립니다. 내가 놓친 것은 'ie'의 'document.designMode = "on"속성입니다. 이것은 찾고 있던이 크기 조정 상자를 만듭니다. 내 예제를 확장하면 'document.designMode = "on"'을 설정하므로 답변을 수락합니다 : P (나 자신을 직접 작성해야합니다 ^^) – Stefan