Quill.jsを使ったテキストエディターのデータをデータベースに追加し、表示する方法を教えてください。

実現したいこと：Quillというライブラリのエディタを使ってデータを取得して、その情報をデータベースに追加し表示したい。

具体的には、formタグを使ってQuillというライブラリのエディタから入力したデータ(JSON?)をデータベースにVARCHAR型で追加し、そのデータをJavaを使って取得し、jspファイルに表示したいです。
表示するときには、quillの関数を使って表示すると考えています。
データベースはMySQLを使っています。
JavaScriptの知識が全くなく、どのようにすればデータベースに追加すればいいかわかりません。
参考にしたサイトも仕組みが理解できていないので、データがどこに保存されているのかも分かりません。

参考にしたサイト：http://sashimistudio.site/quilljs/
https://quilljs.com/playground/#form-submit
https://quilljs.com/
現在の状況：JSPとServletの基本的な使い方が理解できている程度です。
Quill.jsというライブラリを使ったことがある人などわかる方がいれば教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <!-- テキストエディタ「Quilljs」のライブラリ -->
6    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
7    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
8    <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
9    <!-- Quillカスタマイズjs -->
10    <script type="text/javascript" src="quillcustom.js"></script>
11</head>
12
13<body>
14    <form>
15        <div id="quill-editor_1">
16            <textarea>テキスト</textarea>
17        </div>
18    </form>
19
20    <div id="quill-editor_2"></div>
21    <div id="quill-editor_3"></div>
22    <script>
23        // 通常のエディタ
24        var quill_1 = QuillEditorMake("quill-editor_1")
25        // 通常のエディタ（文章あり）
26        var quill_2 = QuillUpdateEditorMake("quill-editor_2", quill_1.getContent)
27        // 編集不可エディタ（記事表示用）
28        var quill_3 = QuillPageMake("quill-editor_1", quill_1.getContent)
29    </script>
30</body>
31
32</html>

JavaScript
1/* 拡張テキストエディタ「Quill」に関する処理 */
2
3
4/**
5テキストエディタの生成(中身空)
6引数１： 作成する場所のid
7戻り値： Quillエディタの生成情報
8*/
9function QuillEditorMake(make_id) {
10
11    var toolbarOptions; // ツールバーの機能設定
12    var quill; // エディタ情報
13    var themes = set_themes(); // エディタのテーマ（snow , bubble）
14
15    // ツールバー機能の設定
16    toolbarOptions = [
17        //見出し
18        [{
19            'header': [1, 2, 3, 4, 5, 6, false]
20        }],
21        //フォント種類
22        [{
23            'font': []
24        }],
25        //文字寄せ
26        [{
27            'align': []
28        }],
29        //太字、斜め、アンダーバー
30        ['bold', 'italic', 'underline'],
31        //文字色
32        [{
33            'color': []
34        },
35        //文字背景色
36        {
37            'background': []
38        }
39        ],
40        // リスト
41        [{
42            'list': 'ordered'
43        },
44        {
45            'list': 'bullet'
46        }
47        ],
48        //インデント
49        [{
50            'indent': '-1'
51        }, {
52            'indent': '+1'
53        }],
54        //画像挿入
55        ['image'],
56        //動画
57        ['video'],
58        //数式
59        ['formula'],
60        //URLリンク
61        ['link']
62    ];
63
64    //渡ってきたID名に「#」をくっつける
65    make_id = '#' + make_id;
66
67    //エディタの情報を生成
68    quill = new Quill(make_id, {
69        modules: {
70            //ツールバーの設定
71            toolbar: toolbarOptions
72        },
73        placeholder: '入力してください',
74        //ツールバーのあるデザイン
75        theme: themes //'snow' or 'bubble'
76    });
77
78    return quill;
79}
80
81
82
83/**
84テキストエディタの生成(中身有り)
85引数１： 作成する場所のid
86引数２： 表示させるJSONテキスト
87戻り値： Quillエディタの生成情報
88*/
89function QuillUpdateEditorMake(make_id, json_text) {
90
91    var toolbarOptions // ツールバーの機能設定
92    var quill // エディタ情報
93    var themes = set_themes(); // エディタのテーマ（snow , bubble）
94
95    // ツールバー機能の設定
96    toolbarOptions = [
97        //見出し
98        [{
99            'header': [1, 2, 3, 4, 5, 6, false]
100        }],
101        //フォント種類
102        [{
103            'font': []
104        }],
105        //文字寄せ
106        [{
107            'align': []
108        }],
109        //太字、斜め、アンダーバー
110        ['bold', 'italic', 'underline'],
111        //文字色
112        [{
113            'color': []
114        },
115        //文字背景色
116        {
117            'background': []
118        }
119        ],
120        // リスト
121        [{
122            'list': 'ordered'
123        },
124        {
125            'list': 'bullet'
126        }
127        ],
128        //インデント
129        [{
130            'indent': '-1'
131        }, {
132            'indent': '+1'
133        }],
134        //画像挿入
135        ['image'],
136        //動画
137        ['video'],
138        //数式
139        ['formula'],
140        //URLリンク
141        ['link']
142    ];
143
144    //渡ってきたID名に「#」をくっつける
145    make_id = '#' + make_id;
146
147    //エディタの情報を生成
148    quill = new Quill(make_id, {
149        modules: {
150            //ツールバーの設定
151            toolbar: toolbarOptions
152        },
153        placeholder: '入力してください',
154        //ツールバーのあるデザイン
155        theme: themes //'snow' or 'bubble'
156    });
157
158    //表示させる文章データを取得
159    json_data = JSON.parse(json_text);
160
161    //データを表示
162    quill.setContents(json_data);
163
164    // brが失われる場合の補完
165    make_id = make_id + ' .ql-editor';
166    var htmlstr = String($(make_id).html());
167    $(make_id).html(set_quill_br(htmlstr));
168
169    return quill;
170}
171
172
173/**
174テキストページ生成
175エディタで作ったデータを表示させる側（編集不可）の設定
176引数： 作成する場所のid
177引数２： 表示させるJSONテキスト
178戻り値： Quillエディタの生成情報
179*/
180function QuillPageMake(make_id, json_text) {
181
182    var quill; //エディタ情報
183    var json_data; //エディタに表示させるデータ（json形式）
184
185    //渡ってきたID名に「#」をくっつける
186    make_id = '#' + make_id;
187
188    //エディタの情報を生成
189    quill = new Quill(make_id, {
190        //ツールバー無デザイン
191        theme: 'bubble'
192    });
193    //エディタを入力不可にする
194    quill.disable();
195
196    //表示させる文章データを取得
197    json_data = JSON.parse(json_text);
198
199    //データを表示
200    quill.setContents(json_data);
201
202    $(make_id).html = set_quill_br(String($(make_id).html));
203
204    // brが失われる場合の補完
205    var htmlstr = String($(make_id).html());
206    $(make_id).html(set_quill_br(htmlstr));
207
208    return quill;
209}
210
211// テーマ設定（PCとスマホで切り替える画面幅で判定）
212function set_themes() {
213    var themes;
214    if (window.parent.screen.width > 800) {
215        themes = "snow";
216    } else {
217        themes = "bubble";
218    }
219    return themes;
220}