現在、とあるサービスの開発をしております。
記事の作成機能を追加しようとしているのですが、画像のアップロードが出来るリッチテキストエディタが見つかりません。
ご存知でしたら教えて下さい。
現状、画像のアップロード用のAPIは作成したのですが、
現在試しているQuillで挿入した画像を取得、ajax経由でポスト出来ずにおります。
Quillでそれが出来ることが一番なのですが、
同様に画像の挿入と、それをファイル形式でPOSTが可能なリッチテキストエディタをご存知でしたら教えて下さい。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
Allow images to be normal URLs not data URIs? #863
Extending default Quill handler for image to upload base64 data. #1400
でも同じような議論がされているようです。
手順としては
- エディタのimageを取得 => 動作はQiitaのイメージがわかりやすいと思います。
- サーバーに取得したimageをPOST
- 2が終了後エディタのプレビューに画像を表示
といった感じだと思います。
以下は上記の参考URLにあったベストとされた回答のうちの一つです。
const editor = new Quill('#quill-editor', { bounds: '#quill-editor', modules: { toolbar: this.toolbarOptions }, placeholder: 'Free Write...', theme: 'snow' }); /** * Step1. select local image * */ function selectLocalImage() { const input = document.createElement('input'); input.setAttribute('type', 'file'); input.click(); // Listen upload local image and save to server input.onchange = () => { const file = input.files[0]; // file type is only image. if (/^image//.test(file.type)) { saveToServer(file); } else { console.warn('You could only upload images.'); } }; } /** * Step2. save to server * * @param {File} file */ function saveToServer(file: File) { const fd = new FormData(); fd.append('image', file); const xhr = new XMLHttpRequest(); xhr.open('POST', 'http://localhost:3000/upload/image', true); xhr.onload = () => { if (xhr.status === 200) { // this is callback data: url const url = JSON.parse(xhr.responseText).data; insertToEditor(url); } }; xhr.send(fd); } /** * Step3. insert image url to rich editor. * * @param {string} url */ function insertToEditor(url: string) { // push image url to rich editor. const range = editor.getSelection(); editor.insertEmbed(range.index, 'image', `http://localhost:9000${url}`); } // quill editor add image handler editor.getModule('toolbar').addHandler('image', () => { selectLocalImage(); });
投稿2018/01/14 08:52
総合スコア96
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/15 08:38