tiny editor

작은 편집자

바닐라 JavaScript로 작성된 작은 HTML 리치 텍스트 편집기

목표

HTML 요소를 평범한 오래된 바닐라 JavaScript에서 풍부한 텍스트 편집기로 사용할 수있는 5KB (압축) 라이브러리를 만듭니다.

지원하다

이 라이브러리를 사용하고 좋아하는 경우 오픈 소스 프로젝트를 자유롭게 지원하십시오.

설치 방법

 npm install tiny-editor

또는 HTML 문서의 끝에 번들 파일을 직접로드하십시오.

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

사용 방법

1. HTML 문서에서 편집기 라이브러리를 참조하십시오
2. 편집기로 변환하려는 HTML 요소에 data-tiny-editor 속성 추가

편집기를 동적으로 만드는 방법

내보내는 기능 window.__tinyEditor.transformToEditor() 사용하여 편집기로 변환하려는 첫 번째 인수 (일반적으로 <div> )를 사용합니다. 예를 들어, /public/index.html 을 참조하십시오.

형식화 된 텍스트를 추출하는 방법

편집기 HTML 요소에서 input 이벤트를 듣습니다.

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

사용자 정의하는 방법

작은 편집기의 렌더링 방법을 사용자 정의하는 데 사용할 수있는 다양한 옵션이 있습니다. 기본적으로 모든 옵션이 활성화됩니다. 데이터 속성을 사용하여 옵션을 비활성화 할 수 있습니다.

예를 들어 다음 속성을 사용하여 Bold Format 버튼을 제거 할 수 있습니다.

 <div data-tiny-editor data-bold="no"></div>

옵션

• data-formatblock="no" : 스타일 드롭 다운 목록을 제거합니다
• data-bold="no" : 굵은 버튼을 제거하십시오
• data-italic="no" : : 이탤릭체 버튼을 제거합니다
• data-underline="no" : 밑줄 버튼을 제거합니다
• data-fontname="no" : 글꼴 드롭 다운 목록을 제거합니다
• data-forecolor="no" : : 텍스트 색상 버튼을 제거합니다
• data-justifyleft="no" : 왼쪽 정렬 버튼을 제거합니다
• data-justifycenter="no" : 중앙 정렬 버튼을 제거합니다
• data-justifyright="no" : 오른쪽 정렬 버튼을 제거하십시오
• data-insertorderedlist="no" : 번호가 매겨진 목록 버튼을 제거하십시오
• data-insertunorderedlist="no" : Bulleted List 버튼을 제거하십시오
• data-outdent="no" : 삭감 버튼 감소 버튼을 제거하십시오
• data-indent="no" : yal indent 버튼을 제거하십시오
• data-remove-format="no" : 명확한 서식 버튼을 제거합니다
• data-autofocus="no" : 편집기에서 자동 초점을 제거합니다

지원되는 브라우저

최신 브라우저 (Chrome, Firefox, Edge, ...)가 지원됩니다. Tiny Editor는 Internet Explorer에서 작동하지 않습니다.