一個富文字編輯器quill 以Vue專案為例

PsChina發表於2019-03-27
UIVue

vue-quill-editor 將 quill 封裝成了vue 外掛，贊?。

如何整合：

npm i vue-quill-editor -S
複製程式碼
import VueQuillEditor from 'vue-quill-editor'

// 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)
複製程式碼

如何使用:

 <quill-editor ref="QuillEditor" v-model="formItem.content" />
複製程式碼

如何將base64圖片轉換成url

（參考 quill github issuse 1089）

TaylorPzreal 的答案滿分有木有 附上鍊接： github.com/quilljs/qui…

        mounted(){
            const { quill } = this.$refs.QuillEditor
            quill.container.style.minHeight = '500px'
            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 {
                        app.toast('僅支援圖片')
                    }
                };
            }

            /**
             * Step2. save to server
             *
             * @param {File} file
             */
            function saveToServer(file) {
            const fd = new FormData();
            fd.append('file', file);// 引數根據後端介面自行更改

            const xhr = new XMLHttpRequest();
            xhr.open('POST', `${app.serverAddr}/p/file/upload_file?token=${app.token}`, true);
            xhr.onload = () => {
                if (xhr.status === 200) {
                // this is callback data: url
                const url = JSON.parse(xhr.responseText).file_path;
                    insertToEditor(url)
                }
            };
            xhr.send(fd);
            }

            /**
             * Step3. insert image url to rich editor.
             *
             * @param {string} url
             */
            function insertToEditor(url) {
            // push image url to rich editor.
            const range = quill.getSelection();
                quill.insertEmbed(range.index, 'image', `${app.serverAddr}${url}`);
            }

            // quill editor add image handler
            quill.getModule('toolbar').addHandler('image', () => {
                selectLocalImage();
            });
        }
複製程式碼

如何預覽及展示：

在顯示被富文字編輯器 quill 編輯過的文章時，一定要用 quill 的 class 包裹不然沒有居中等效果。 如下：

content 是富文字字串。

    <div class="preview-box ql-container ql-snow">
        <h1 v-text="title"></h1>
        <div class="ql-editor" v-html="content"></div>
    </div>
複製程式碼

相關文章