Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，提供了丰富的UI组件。而vue-quill-editor是Vue的一个插件，用于集成强大的Quill富文本编辑器。 要使用vue-quill-editor，我们需要通过npm安装它： ```bash npm install vue-quill-editor --save ``` 接下来，在项目的`main.js`文件中引入编辑器及其样式： ```javascript import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' // 或者 'quill/dist/quill.bubble.css'，根据你选择的主题 import 'quill/dist/quill.speech.css' // 如果需要语音输入支持 Vue.use(VueQuillEditor); ``` 在Vue组件的模板中，我们可以设置一个编辑器区域和一个图片上传组件。`el-upload`是Element UI中的上传组件，用于处理图片上传。注意，我们需要定义`action`属性为图片上传的服务器接口地址，`headers`用于设置请求头，`on-success`和`on-error`处理成功或失败的回调，`before-upload`是上传前的验证函数： ```html <template> <div> <el-upload class="avatar-uploader" :action="serverUrl" :headers="header" :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload" ></el-upload> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" ></quill-editor> </div> </template> ``` 在JS部分，我们定义了编辑器的选项`editorOption`，包括工具栏配置`toolbarOptions`，以及图片按钮的处理函数。当点击“图片”按钮时，触发输入框选择图片文件： ```javascript <script> export default { data() { return { quillUpdateImg: false, content: null, editorOption: { placeholder: '', theme: 'snow', modules: { toolbar: { container: toolbarOptions, handlers: { image: function(value) { if (value) { document.querySelector('.avatar-uploader input').click() } else { this.quill.format('image', false); } } } } } }, serverUrl: '/manager/com', // 你的图片上传接口地址 header: { Authorization: 'your-token' } // 你的请求头信息 }; }, methods: { uploadSuccess(response, file) { // 上传成功后的处理，将返回的图片URL插入到编辑器中 const imgLink = response.data.url; this.quill.editor.insertEmbed(this.quill.getSelection().index, 'image', imgLink); }, uploadError(err, file) { // 处理上传错误 console.error('图片上传失败:', err); }, beforeUpload(file) { // 在上传前进行文件类型和大小的验证 return file.type.startsWith('image') && file.size / 1024 < 500; // 例如限制图片大小不超过500KB }, onEditorChange(event) { // 编辑器内容变化时的回调 console.log('编辑器内容变化:', event); } } }; </script> ``` 以上代码实现了一个基本的富文本编辑器，用户可以编辑文本，同时支持插入图片。图片上传过程中，可以添加自定义验证和错误处理。记得替换`serverUrl`和`header`为你自己的服务端接口和认证信息。通过这种方式，你可以创建一个功能强大的富文本编辑器，满足项目的需求。