https://quilljs.com/docs/quickstart/
Quickstart - Quill
Quickstart The best way to get started is try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. Hello World! Some initial bold text var quill = new Quill
quilljs.com
빠르게 사용해보기
npm install quill@1.3.6
일단 설치 !
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
<!-- //https://sorrow16.tistory.com/223 -->
Quill is a popular open-source WYSIWYG text editor that allows users to input formatted text content into web applications. To use Quill editor on your homepage, you can follow these general steps:
Include Quill library in your webpage:
Add the following script and style tags to your HTML file's head section:
html
Copy code
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
Add an element to contain the editor:
Create a div element where you want to add the editor. This element will later be used to initialize the Quill editor.
html
Copy code
<div id="editor"></div>
Initialize Quill editor:
In your JavaScript file, initialize the Quill editor by passing the container element and other options as parameters.
javascript
Copy code
var quill = new Quill('#editor', {
theme: 'snow'
});
The above code initializes the editor using the snow theme. You can change the theme and other options to suit your needs.
Retrieve content from the editor:
To get the content entered by the user, you can use the quill.getContents() method. This returns the content in Delta format. You can then convert the Delta format to HTML or other formats using appropriate libraries.
javascript
Copy code
var delta = quill.getContents();
var html = quill.root.innerHTML; // Get HTML content
With the above steps, you can use the Quill editor on your homepage to allow users to enter formatted text content.
이렇게 에디터가 바로 생성된다 ,
Quill은 웹 기반의 텍스트 편집기 라이브러리 중 하나입니다. Node.js를 사용하여 Quill을 사용하려면 먼저 Node.js 프로젝트를 설정해야합니다. 다음은 Node.js에서 Quill을 사용하는 방법입니다.
- Node.js 프로젝트 만들기
먼저 Node.js를 사용하여 새 프로젝트를 만듭니다. 이를 위해 프로젝트 디렉토리를 만들고 다음과 같이 명령을 실행합니다.
mkdir my-quill-app cd my-quill-app npm init -y- Quill 라이브러리 설치
다음으로 Quill 라이브러리를 설치합니다. 이를 위해 다음과 같이 명령을 실행합니다.
npm install quill- Quill 에디터 사용
Quill을 사용하여 에디터를 만들려면 HTML 파일에 Quill을 로드하고 에디터를 초기화해야합니다. 다음은 Quill 에디터를 만드는 예입니다.
phpCopy code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quill Editor</title>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
</head>
<body> <div id="editor">
</div>
<script>
var quill = new Quill('#editor', { theme: 'snow' });
</script>
</body>
</html>
위의 예제는 Quill 라이브러리와 CSS 파일을 로드하고 #editor ID를 가진 div 요소에서 Quill을 초기화합니다. 초기화 구성 옵션으로는 테마가 'snow'로 설정되어 있습니다.
- Node.js 서버에서 Quill 사용
Node.js 서버에서 Quill을 사용하려면 다음과 같이 Quill 모듈을 로드하고 사용하면 됩니다.
var Quill = require('quill'); var quill = new Quill('#editor', { theme: 'snow' });
위의 예제는 Quill 라이브러리를 로드하고 Quill 에디터를 초기화합니다. 초기화 구성 옵션으로는 테마가 'snow'로 설정되어 있습니다.
'Web Dev > Javascript' 카테고리의 다른 글
| [Javascript] 코드 작동에 시간 제약을 걸어 둘 수 있는 코드 개발 하기 (2) | 2023.10.23 |
|---|---|
| [Javascript] 웹페이지에 현재 날짜 제공하는 Date() 생성자 toLocaleDateString 함수 (2) | 2023.10.19 |
| JavaScript 배열에서 요소 추가, 삭제 및 교체: splice 함수 사용법 (0) | 2023.10.18 |
| [Javascript] 블록 레벨 스코프 (let, const) 와 함수 레벨 스코프(var) 의 차이점과 예시 코드 (1) | 2023.09.16 |
| JavaScript 브라우저 인쇄 기능 사용 시 Print 페이지 범위 설정 방법 (0) | 2023.08.17 |
| Javascript - 업로드 파일 용량 제한 하여 값 반환하는 코드 (0) | 2023.07.27 |
