TinyEditor 간단하고 사용하기 쉬운 HTML Wysiwyg 편집기

며칠 전, 나는 당신에게 국내 XHTML 편집자를 소개했습니다. 오늘은 TinyEditor를 추천하고 싶습니다. 잘 알려진 외국 웹 디자인 블로그 인 Leigeber.com에서 방금 출시 한 간단하고 사용하기 쉬운 HTML Wysiwyg 편집기입니다.

• JavaScript로 작성되었으며 다른 라이브러리에 의존하지 않습니다.
• 이것은 가벼운 편집기이며 호출되는 파일은 8KB에 불과합니다.
• 대부분의 HTML 서식 요구 사항을 처리 할 수 ​​있으며 내장 기능은 생성 된 태그를 가능한 한 간단하게 만듭니다.
• 편집기에 사용되는 작은 아이콘은 CSS 스프라이트 기술을 사용하여 HTTP 연결을 줄입니다.
• 주류 브라우저에서 테스트 패스
• Creative Commons 라이센스에 따라 개인 또는 상업 프로젝트에서 사용할 수 있습니다.

1. 웹 페이지 파일에서 TinyEditor가 제공 한 JS 및 CSS 파일을 참조하십시오.
2. 편집자가 웹 페이지 파일에 필요한 태그를 추가하는 것은 실제로 다음과 같이 TextArea입니다.

    <TextArea id = 입력 스타일 = 너비 : 400px; 높이 : 200px> </textarea>

   Textarea에 정의 된 길이와 너비는 편집기의 크기입니다.

3. 스크립트를 통해 편집기를 초기화하고 다음과 같이 다양한 매개 변수를 구성하십시오.

    new tiny.editor.edit ( '편집기', {id : 'input', // (필수) 위의 두 번째 단계에서 정의 된 TextRea의 idwidth : 584, // 편집기 너비 높이 : 175, // (옵션) 편집기 CSSclass : 'te', // (옵션) 편집기 클래스 : 컨트롤 스타일 Control Class : 'tecontral', (옵션) 편집기 클래스 : ClassRowClass : // (선택 사항) 편집기 라인 라인 클래스 디버 클래스 : 'TEDIVIDER', // (선택 사항) 편집기 버튼 스타일 컨트롤 : [ 'bold', 'itallic', 'underline', 'strikethrough', '|', 'superscript', '|'orderedList ',' ','| '들여 쓰기', '|', 'leftalign', 'centerign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'hr', 'link', '' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ', // (필수) 필요에 따라 편집기에 버튼 컨트롤을 추가합니다. 여기서 '|'는 기능 버튼 사이의 수직 분할 선을 나타냅니다. 'n' // (선택 사항) 편집기는 XHTML 또는 HTML 태그 cssfile을 생성합니다. // (옵션) 편집 영역 설정 IDFOOLERCLASS : 'tefooter', // (옵션) 편집기 설정 하단 ClasStoggle : {텍스트 : '소스 코드', '시각화', '시각화', CSSclass : 'Togggle'}, // (선택 사항) 소스 브라우징 토글 텍스트 및 {cssclass '// // // // // // 옵션). 편집기 크기 조정 버튼 클래스});

   구성 가능성이 높으며 구성 항목은 비교적 명확하다고 말할 수 있습니다.

TinyEditor의 실제 응용 프로그램에서 편집 영역의 최신 시각적 컨텐츠가 태그 텍스트로 변환되도록 instance.post () 함수를 호출해야합니다.

예 : http://sandbox.leigeber.com/tinyeeditor/