Quill でリッチテキストを編集する方法のメモ。
toolbar で表示するメニューを指定することができます。
■HTML
■リッチテキストのデータ形式
getContents() でリッチテキストのデータを取得すできます。
■HTML での表示
getSemanticHTML() で入力内容をHTML化できます。
toolbar で表示するメニューを指定することができます。
■HTML
<!DOCTYPE html><html><head><link href="https://cdn.jsdelivr.net/npm/quill@2.0.1/dist/quill.snow.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/quill@2.0.1/dist/quill.js"></script><title>Quill</title></head><body><form></form><button onclick="show_contents()">submit</button>
<script type="text/javascript">function show_contents() {document.getElementById('editor-contents').innerHTML = quill.getSemanticHTML();console.log(JSON.stringify(quill.getContents()));}const options = {theme: 'snow',placeholder: '本文を入力してください',modules: {toolbar: [['bold', 'italic', 'link']],},};const quill = new Quill('#editor', options);</script></body></html>
■リッチテキストのデータ形式
getContents() でリッチテキストのデータを取得すできます。
{"ops": [{"insert":"aaa\n"},{"attributes":{"bold":true},"insert":"bbb"},{"insert":"\n"},{"attributes":{"italic":true,"bold":true}, "insert":"ccc"},{"insert":"\n"},{"attributes":{"link":"https://www.goo.ne.jp/"},"insert":"ddd"},{"insert":"\neee\n"}]}■HTML での表示
getSemanticHTML() で入力内容をHTML化できます。
