2
JavaScript로 작은 HTML 편집기를 만들고 싶습니다. 선택한 텍스트의 font-size를 특정 CSS 값으로 설정할 수 있습니다. 설명서에 의하면, 폰트 크기는이 같은 폰트 크기 명령으로 설정된다contenteditable 요소에서 CSS 글꼴 크기를 설정하는 방법은 무엇입니까?
document.execCommand("FontSize", false, x);
x는 결과가 상기 선택된 콘텐트가 <font size="x" /> 소자 래핑되는 1 내지 7의 폰트 크기이어야한다. 7보다 많은 폰트 크기로 드롭 다운 상자를 만들고 글꼴 크기 단위로 픽셀을 사용하고 싶기 때문에 매우 유용하지는 않습니다. 결국 선택한 텍스트를 <span style="font-size:25px" />과 같은 요소로 묶고 싶습니다. . 어떻게해야합니까?
이미 존재하는 HTML 편집기 구성 요소를 검색했지만 두 가지 유형의 라이브러리 만 찾았습니다 : CKEditor과 같은 큰 것들은 원하는대로 할 수는 있지만 큰 목적은이 목적을 위해 많고 작은 라이브러리는이 7 가지 글꼴 만 지원합니다 크기.
그래서 contenteditable HTML 요소에서 맞춤 글꼴 크기를 어떻게 설정할 수 있습니까? 최신 Firefox 및 Chromium 및 IE7-9에서 작동해야합니다.
. 선택한 텍스트를 가져 와서 삭제하고, 새 스팬을 만들고, 텍스트를 넣고, 스팬에 원하는 스타일을 지정하고, 문서에 스팬을 삽입합니다. 그건 그렇고,'font-size = "25px"'는 올바른 속성이 아닙니다. 당신은'style = "font-size : 25px"'또는 js에서'theElement.style [ 'fontSize'] = '25px'; ' –
@Mr Lister : 그냥 두뇌 오타였습니다. 고쳐 주셔서 감사합니다. 수동으로 수행하는 것은 사용자가 설명하는 것 이상을 포함합니다. 가능한 경우, 쓸모없는 래퍼 스팬의 끝없는 스태킹을 방지하기 위해 font-size를 모든 자식 요소에서 제거해야하며 새로 도입 된 span을 부모 요소와 병합해야합니다. 그리고 나서 전체 단락을 선택하면 span이'p'와 같은 블록 요소를 감싸기 때문에 충분하지 않습니다. 이렇게 완전히 수동으로하는 것은 매우 복잡하며 더 쉬운 해결책을 원합니다. 그러나 나는 아무 것도 없기를 두려워합니다 ... – kayahr
더 간단한 편집자가이 옵션을 제공하지 않는다고 생각합니까? CKEditor와 같이 복잡한 것들은 왜 그렇게 생각합니까? 당신이 말했듯이, 복잡하고 많은 코드가 필요하기 때문에 쓸 수 있거나 기존 편집기를 필요에 따라 구성하고 필요하지 않은 부분을 제거 할 수 있습니다. – AlfonsoML