Quill.js로 텍스트 편집기 만들기-JS 튜토리얼-php.cn

Quill.js로 텍스트 편집기 만들기

WBOY

풀어 주다： 2023-08-23 23:29:02

앞으로

1313명이 탐색했습니다.

Quill.js로 텍스트 편집기 만들기

Quill은 WYSIWYG 편집기 범주에 속하며 오늘날 우리가 사용하는 최신 웹에서 주로 사용되는 무료 오픈 소스 텍스트 편집기입니다. 다양한 표현 API를 갖춘 고도로 사용자 정의 가능한 텍스트 편집기입니다. Quill은 사용하기 매우 쉽고 마크업 경험만 있는 사람이라도 이해하기 쉬운 좋은 인터페이스를 제공합니다.

이 튜토리얼에서는 여러 예제를 사용하여 Quill.js를 사용하여 텍스트 편집기를 구축하는 방법을 설명합니다.

WYSIWYG 텍스트 편집기인 리치 텍스트 편집기가 많이 있지만 가장 널리 사용되는 것은 Quill이며 그 격차가 매우 큽니다. 이제 Quill의 사용법을 배워보겠습니다.

Quill을 사용하여 기본 텍스트 편집기를 만들어 보겠습니다

Quill 작업의 첫 번째 단계는 선택한 편집기에서 Quill을 사용할 수 있도록 하는 것입니다. 이를 위해서는 HTML 코드의

태그에 아래에 표시된 두 개의 CDN 링크를 배치해야 합니다. 으아악

첫 번째 CDN 링크는 Quill의 CSS 스타일 파일이고, 두 번째 CDN 링크는 Quill의 JavaScript 파일입니다. 위에 표시된 두 줄의 코드를 HTML 코드의

태그에 추가해야 합니다.

우리의 태그 는 다음과 같습니다.

으아악

태그에 CDN을 추가했으므로 이제 태그 작업을 시작할 차례입니다. 태그 안에 id="editor"를 사용하여

태그를 만들고 높이를 지정하는 몇 가지 간단한 스타일을 추가해 보겠습니다. 아래의 태그를 참조하세요. 으아악 위 코드에서는 ID가 "editor"인

태그를 생성하고 지정된 높이 250px의 간단한 스타일을 제공합니다.

이제 남은 것은 Quill 클래스의 인스턴스를 생성할 <script> 태그를 생성한 다음 기본적으로 우리가 생성한 <div>의 ID를 첫 번째 매개변수로 전달하는 것입니다. 는 객체이며 텍스트 편집기에서 객체의 속성을 지정합니다. </script>

아래 표시된 <script> 태그 </script>를 고려하세요.

으아악

위의 <script> 태그는 <body> 태그의 끝, 즉 <body> 태그가 닫히기 전에 배치되어야 합니다. </script>

index.html

전체 HTML 코드는 아래와 같습니다.

예

으아악

위 HTML 파일을 브라우저에서 열면 브라우저에 텍스트 편집기 출력이 표시됩니다. 보게 될 텍스트 편집기에는 마음대로 사용할 수 있는 다양한 도구 모음 옵션이 있으며, 그 중 하나를 텍스트 편집기에서 사용할 수 있습니다.

텍스트 편집기의 모양을 맞춤설정해 보겠습니다

이제 일반 텍스트 편집기에서 기본적으로 제공되는 모든 옵션 대신 두 개의 기본 도구 모음 옵션만 제공한다고 가정해 보겠습니다. 이 경우 아래 표시된 <script> 태그를 사용할 수 있습니다. </script>

으아악

위의 <script> 태그에서는 툴바에 굵게, 기울임꼴, 밑줄이라는 세 가지 옵션만 제공했으므로 텍스트 편집기에서는 이 옵션만 사용할 수 있습니다. </script>

index.html

아래는 업데이트된 index.html 파일입니다.

예

으아악

위 파일을 브라우저에서 실행하면 텍스트 편집기에 굵게 옵션, 기울임꼴 옵션, 밑줄 옵션의 세 가지 도구 모음 옵션만 표시됩니다.

콘솔에 텍스트 편집기 내용 기록

이제 텍스트 편집기에서 작성한 내용을 콘솔에 기록하려고 한다고 가정해 보겠습니다. 이를 위해서는 먼저

태그 안에 버튼을 만들어야 합니다.

버튼을 생성하는 아래 표시된 코드 조각을 고려해보세요.

으아악

이제 다른 도구 모음 옵션과 함께 퀼 텍스트 편집기의 내용을 실제로 기록하는 함수를 생성해야 하는 <script> 태그에 중점을 두겠습니다. </script>

아래에 표시된 업데이트된 <script> 태그를 살펴보세요. </script>

으아악 위의 <script> 태그에는 퀼 개체의 루트 속성에 있는 콘텐츠를 인쇄하는 consoleHTMLContent라는 함수가 있습니다. <p><b>index.html <p>업데이트된 <b>index.html코드는 아래와 같습니다. <h3>예 으아악 <p>위 코드를 브라우저에서 실행하면 텍스트 편집기가 표시되고 편집기에 텍스트를 입력하고 버튼을 클릭하면 퀼 텍스트 편집기의 루트 개체가 콘솔에 인쇄됩니다. <h3>출력 <p>편집기에서 간단한 코드 한 줄을 작성해 본 다음 버튼을 클릭했는데 이것이 브라우저 콘솔에 표시된 출력입니다. 으아악 <h2>결론 <p>이 튜토리얼에서는 Quill.js를 사용하여 다양한 도구 모음 옵션이 있는 텍스트 편집기를 만드는 방법을 보여줍니다. 여러 예를 통해 도구 모음을 추가하거나 제거하는 방법과 Quill 텍스트 편집기에서 루트 요소를 제어하는 방법을 설명합니다. </script>

위 내용은 Quill.js로 텍스트 편집기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!