vue2中tinymce富文本编辑器插入图片后取消默认选择

### Vue2 中使用 TinyMCE 实现插入图片和视频功能 在 Vue2 项目中实现 TinyMCE 富文本编辑器的图片和视频插入功能，可以通过配置插件以及自定义逻辑完成。以下是详细的解决方案： #### 配置 TinyMCE 插件 为了支持图片和视频插入功能，需要加载对应的插件 `image` 和 `media`。这些插件分别用于处理图片上传和嵌入媒体资源。 ```javascript import tinymce from 'tinymce/tinymce'; // 引入 tinymce 主包 import 'tinymce/themes/silver/theme'; // 引入主题样式 import 'tinymce/icons/default/icons'; // 引入图标库 import 'tinymce/plugins/image/plugin'; // 图片插件 import 'tinymce/plugins/media/plugin'; // 媒体插件 import 'tinymce/plugins/paste/plugin'; // 粘贴插件 import 'tinymce/plugins/link/plugin'; // 超链接插件 ``` #### 初始化 Tinymce 编辑器 通过 `init()` 方法初始化编辑器，并设置工具栏按钮和插件列表。 ```javascript export default { name: 'TinymceEditor', props: ['value'], data() { return { tinymceId: 'editor-' + Math.random().toString(36).substr(2, 9), }; }, watch: { value(newValue) { const content = tinymce.get(this.tinyMceId); if (content && newValue !== content.getContent()) { content.setContent(newValue); // 同步外部数据到编辑器 } }, }, mounted() { this.initTinymce(); }, beforeDestroy() { tinymce.remove(`#${this.tinymceId}`); }, methods: { initTinymce() { tinymce.init({ selector: `#${this.tinymceId}`, plugins: [ 'image media paste link' ], toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | image media link', images_upload_handler: async function(blobInfo, success, failure) { try { const formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); // 自定义图片上传接口 const response = await fetch('/upload-image-endpoint', { method: 'POST', body: formData }); const result = await response.json(); if (!response.ok || !result.url) throw new Error(result.message); success(result.url); // 返回成功后的 URL 地址 } catch (error) { failure(error.message); // 处理失败情况 } }, media_live_embeds: true, setup(editor) { editor.on('change keyup undo redo', () => { this.$emit('input', editor.getContent()); // 双向绑定更新父组件的数据 }); } }).then((editor) => { if (this.value) { editor.setContent(this.value); // 初始值同步到编辑器 } }); } } }; ``` #### 解决 Media 插件中的视频播放问题 如果发现 `media_live_embeds` 属性无法正常工作[^1]，可以尝试替换官方的 `media` 插件为社区改进版本。具体操作如下： 1. 下载修复版的 `media` 插件源码。 2. 替换默认插件路径下的文件。 3. 确保新插件已正确加载至项目中。 #### 组件调用示例 将上述封装好的组件引入到目标页面中使用。 ```html <template> <div> <tinymce-editor v-model="content"></tinymce-editor> </div> </template> <script> import TinymceEditor from './path/to/TinymceEditor'; export default { components: { TinymceEditor }, data() { return { content: '' }; } }; </script> ``` --- ### 注意事项 - **图片上传接口**：需自行搭建服务器端接收图片并返回存储地址。 - **跨域问题**：确保前后端通信无跨域限制。 - **性能优化**：对于大型项目建议按需加载模块减少打包体积。 ---

### TinyMCE 富文本编辑器使用指南 #### 安装与引入 为了在项目中集成 TinyMCE 编辑器，需先安装对应的 npm 包。通过命令行工具执行如下指令完成安装： ```bash npm install @tinymce/tinymce-vue --save ``` 接着，在 Vue 组件内导入并注册该组件。 #### 基本配置 创建一个简单的单文件 Vue 组件来承载 TinyMCE 实例。此实例允许用户编写 HTML 文档，并支持多种格式化选项[^1]。 ```html <template> <div> <h1>我的文章</h1> <!-- 使用 v-model 双向绑定数据 --> <TinymceEditor v-model="articleContent"/> </div> </template> <script> import TinymceEditor from '@tinymce/tinymce-vue'; export default { name: 'MyArticle', components: { TinymceEditor }, data() { return { articleContent: '<p>在此撰写您的文章...</p>' }; } }; </script> ``` 上述代码展示了如何在一个 Vue 应用程序中嵌入 TinyMCE 编辑器，并初始化其默认内容为一段提示文字。 #### 插件增强功能 除了基础的功能外，还可以利用官方提供的插件进一步提升用户体验。例如，`image`, `link`, 或者自定义开发的插件都可以被加载进来以满足特定需求[^2]。 要启用这些附加特性，可以在初始化时传递相应的配置参数给编辑器实例: ```javascript data() { return { initOptions: { plugins: ['advlist autolink lists link image charmap print preview'], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help' }, articleContent: '' }; } ``` 这段 JavaScript 配置使得编辑区域具备更多实用按钮，如撤销重做、加粗斜体等常用样式设置以及链接和图片插入等功能。 #### 图片处理能力 对于经常涉及图文混排场景的应用来说，良好的图像管理机制不可或缺。TinyMCE 支持直接拖拽上传图片到编辑区内；同时也可通过 API 接口实现更复杂的逻辑控制，比如裁剪压缩后再保存至服务器端[^3]。 ```html <!-- 添加对本地资源的支持 --> <input type="file" id="uploadImage"> <button onclick="insertImage()">插入图片</button> ``` 配合后台服务端脚本可以轻松构建完整的多媒体素材管理系统。