2012-08-13 2 views
6

방금 ​​contentEditable을 사용하기 시작했으며 관련 정보가 많지 않습니다. BCTRL - - IcontentEditable, CTRL-B CTRL-I 및 저장

나는 크롬에, 나는 CTRL를 눌러 단어를 굵게/기울임 할 수 있습니다 것으로 나타났습니다.

다른 브라우저에서 의도 한 동작 일 수 있습니까? 이것은 예를 들어, 크롬에서 작동 : 나는 사용자의 편집 내용을 저장하기 위해이 형식을 읽을 수 있는지 궁금 해요

<div class="container" id="typer" onclick="this.contentEditable='true';"> 

http://jsfiddle.net/uk6DA/15/

? BCTRL - - I을 또한, 나는 CTRL 트리거 굵은 버튼을 기울임 버튼을 만들 수 있습니까? CTRLB- - 아니면 내가 CTRL을 눌러 사용자에 의존 할 필요가 을 나는 (그들에게 메모를 이야기를 제공하는 의미)?

답변

16

모든 주요 브라우저에서 표준입니다. 모든 주요 브라우저에서 document.execCommand()을 통해 사용할 수있는 키보드 단축키와 프로그래밍 방식으로 동일한 기능을 제공합니다. 예를 들어 굵게 및 기울임 꼴 명령은 다음과 같이 실행될 수 있습니다.

document.execCommand("Bold", false, null); 
document.execCommand("Italic", false, null); 

그러나 마크 업은 브라우저마다 다릅니다. 예를 들어 굵은 글꼴의 변형은 <b>foo</b>, <strong>foo</strong><span style="font-weight: bold">foo</span>입니다.

참고 문헌 :

+0

감사합니다. 매우 도움이됩니다.하지만이 예제 (http://jsfiddle.net/uk6DA/15/)가 IE9에서 작동하지 않는 이유를 알고 있습니까? 최소한 Ctrl-B 및 Ctrl-I는 아닙니다. 임원 명령이 효과가 있습니까? – Dave

+0

Nevermind. 내 페이지가 작동합니다. JSFiddle 페이지는 어떤 이유로 든 않습니다. – Dave

+0

@Dave : 예, JSFiddle 문제라고 생각합니다. –

2

짧은 대답은 '예'입니다. 이 article이 재미있을 것입니다. 많은 개발자가이 경로를 따라갔습니다. 멋진 편집기를 원한다면 선택해야 할 것이 많습니다.

질문에 : 예. 서식을 읽을 수 있습니다. 요소에 innerHTML을 사용하면 굵은 글꼴 주위에 <b> 태그가 있고 기울임 꼴은 <i>입니다. 또한 - 내가 공유 한 기사에서 굵게 표시하는 버튼을 만드는 방법을 알아 보겠습니다. 희망이 도움이!

+0

덕분에, 나는 모두 답변을 받아 들일 수 있었으면 좋겠어하지만 난 하나를 받아 들일 수 있습니다. : – Dave

+0

Dave! 어쨌든 그는 더 완벽 했어. 정직하게도 나는 contentEditable을 가지고 하루를 보냈지 만, 성공적이고 호환성있는 WYSIWYG 편집자가 너무 많아서 - 바퀴를 다시 만들 이유가별로 없다. 자신 만의 가벼운 경험은 재미 있고 흥미롭고 도움이 필요할 때 유용 할 수 있습니다. 대부분의 WYSIWYG 편집자가 겪고있는 또 다른 문제점은 IE5 + 6에 대한 해킹이 합병 된 것입니다.) –

+0

고유 한 UI를 만들려고합니다. 도와 주셔서 다시 한 번 감사드립니다! – Dave