一个富文本编辑器quill 以Vue项目为例

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>
复制代码

转载于:https://juejin.im/post/5c9b830ee51d4501fa1f9b57