vue2富文本编辑器，图片粘贴，可调整大小

Vue2 中使用 TinyMCE 富文本编辑器确实支持粘贴图片功能。TinyMCE 提供了丰富的文本处理能力，包括图片上传、粘贴等。要在 Vue 组件中集成 TinyMCE 并允许用户粘贴图片，你可以按照以下步骤操作： 1. 安装依赖：首先需要安装 tiny-mce-vue 包，可以通过 npm 或者 yarn 进行安装： ```bash npm install @tinymce/tinymce-vue ``` 2. 配置 TinyMCE：在 Vue 文件中初始化 TinyMCE，设置插件配置，包括图片相关选项： ```html <template> <div ref="tinymce"> <!-- 你的富文本编辑区域 --> </div> </template> <script> import { createTinymce } from '@tinymce/tinymce-vue' export default { setup() { const editorOptions = { plugins: 'image', // 必须包含 image 插件 images_upload_url: '/api/upload-image', // 图片上传的服务器端地址 image_insertion_allow_types: ['image/png', 'image/jpeg'], // 允许的图片类型 paste_data_images: true, // 允许粘贴数据图片 } const editor = createTinymce(editorOptions) return { editor } }, } </script> ``` 3. 注册组件事件监听：为了让用户能在组件外部触发粘贴事件，你需要监听浏览器的 `paste` 事件，并将粘贴的内容传递给 TinyMCE 的 `insertContent` 方法，以便插入图片。 4. 监听粘贴并处理图片： ```javascript mounted() { document.addEventListener('paste', (event) => { if (!event.clipboardData || !event.clipboardData.items) { return; } event.preventDefault(); event.stopPropagation(); const items = event.clipboardData.items; for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.type === 'text/html') { // 解析 HTML 获取图片数据 let imageData = item.getAsHTML(); this.editor.insertContent(imageData); break; } } }); }, ``` 现在，当用户在 TinyMCE 编辑区域粘贴图片时，它会被正确地插入到编辑器中。

`vue-quill-editor` 是基于 Quill.js 的富文本编辑器组件，在 Vue 中使用非常方便。当涉及到将用户粘贴的图片上传到服务器并显示时，我们需要做些额外的工作。 ### 实现步骤 #### 1. 安装依赖库 首先需要安装 `vue-quill-editor` 和相关的样式文件： ```bash npm install vue-quill-editor quill --save ``` #### 2. 引入配置 然后在项目中引入此插件，并进行一些基础设置： ```javascript import { quillEditor } from 'vue-quill-editor' // 或者按需加载 const Quill = require('quill') ``` 接着你可以根据官方文档对 editor 进行进一步定制化。 #### 3. 添加自定义处理函数 - 图片上传功能 为了支持从剪切板直接粘贴图片的功能，你需要监听富文本框内的 paste 事件，并在此基础上添加用于上传图像的数据传输逻辑。以下是简化版示例代码片段: ```html <template> <div id="editor-container"> <!-- 使用 v-model 绑定内容 --> <quill-editor ref="myQuillEditor" :options="editorOption"/> </div> </template> <script> export default { data() { return { content: '', // 编辑区初始值 editorOption: {} } }, methods:{ handleImageAdded(file, Editor) { const formData = new FormData(); formData.append("image", file); this.$axios({ url: '/your-server-url/upload', // 替换为实际的服务端地址 method: 'POST', data: formData, headers:{ "Content-Type": "multipart/form-data"} }).then((response) => { let url=response.data.url; // 获取返回的结果url路径 Editor.insertEmbed(selection.range.index,'image', url); }) .catch(err=>{ console.error('Upload failed:',err) }); }, onPaste(e){ var items=e.clipboardData.items; for (var i=0;i<items.length;++i){ if(items[i].type.indexOf("image") != -1 && items[i].getAsFile()){ e.preventDefault(); this.handleImageAdded(items[i].getAsFile(),this.$refs.myQuillEditor.quill); } } } }, mounted(){ this.editorOption.modules.toolbar.handlers ={ image:value=>{if(value)this.fileInput.click()}, }; document.addEventListener('paste',this.onPaste); } beforeDestroy(){ document.removeEventListener('paste',this.onPaste); } }; </script> ``` 以上代码展示了如何捕捉用户的粘贴操作、检查是否有图片存在以及通过 AJAX 请求向后端发送数据的过程。需要注意的是，这只是一个简单的例子，生产环境中还需要考虑更多因素如错误提示、进度条展示等用户体验优化措施。 最后别忘了修改 `/your-server-url/upload` 成你自己的服务端 API 地址！