質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4163閲覧

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

soso0programmer

総合スコア35

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/18 04:07

実現したいこと: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引数1: 作成する場所の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引数1: 作成する場所のid 86引数2: 表示させる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引数2: 表示させる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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問