Quill ialah editor teks sumber terbuka dan percuma yang termasuk dalam kategori editor WYSIWYG dan digunakan terutamanya pada web moden yang kami gunakan hari ini. Ia ialah editor teks yang boleh disesuaikan dengan banyak API ekspresif. Quill sangat mudah digunakan dan menyediakan antara muka yang baik yang mudah difahami walaupun untuk orang yang hanya mempunyai pengalaman penandaan.
Dalam tutorial ini, kami akan menggunakan berbilang contoh untuk menerangkan cara membina editor teks menggunakan Quill.js.
Walaupun terdapat banyak editor teks kaya yang merupakan editor teks WYSIWYG, yang paling banyak digunakan ialah Quill, dan jurangnya sangat besar. Sekarang, mari belajar cara menggunakan Quill.
Langkah pertama dalam bekerja dengan Quill ialah dapat menggunakannya dalam editor pilihan kami, dan untuk melakukan ini, kami perlu meletakkan dua pautan CDN yang ditunjukkan di bawah dalam teg
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
Pautan CDN pertama ialah fail gaya CSS Quill, manakala pautan CDN kedua ialah fail JavaScript Quill. Kami perlu menambah dua baris kod yang ditunjukkan di atas pada teg
Tag
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quill Text Editor</title> <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script> </head>
<body> <div id="editor" style="height: 250px"></div> </body>
Pertimbangkan teg
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
index.html
Contoh
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quill Text Editor</title> <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script> </head> <script> var quill = new Quill('#editor', { theme: 'snow' }); </script>
Mari sesuaikan rupa editor teks kami
<script> let toolbarOptions = [ ['bold', 'italic', 'underline'] ] let quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' }); </script>
Dalam teg
Ditunjukkan di bawah ialah fail index.html yang dikemas kini.
Contoh
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quill Text Editor</title> <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script> </head> <script> var toolbarOptions = [ ['bold', 'italic', 'underline'] ] var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' }); </script>
Rakam kandungan editor teks dalam konsol
Pertimbangkan coretan kod yang ditunjukkan di bawah yang mencipta butang.
<button onclick="consoleHTMLContent()">Print in Console</button>
Sekarang mari kita fokus pada teg
Pertimbangkan teg
<script> let toolbarOptions = [ ['bold', 'italic', 'underline'],[{ 'size': ['small', false, 'large', 'huge'] }],[{ 'color': [] }, { 'background': [] }] ] let quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' }); function consoleHTMLContent() { console.log(quill.root.innerHTML); } </script>
Kod
index.htmlyang dikemas kini ditunjukkan di bawah. Contoh
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quill Text Editor</title> <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script> </head> <button onclick="consoleHTMLContent()">Print in Console</button> <script> let toolbarOptions = [ ['bold', 'italic', 'underline'],[{ 'size': ['small', false, 'large', 'huge'] }],[{ 'color': [] }, { 'background': [] }] ] let quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' }); function consoleHTMLContent() { console.log(quill.root.innerHTML); } </script>
Output
<p>Hi There <strong>Inside HTML </strong><em>Is this italic?</em></p>
Kesimpulan
Atas ialah kandungan terperinci Membina editor teks dengan Quill.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!