Vue tinymce 实现图片点击放大

### Vue 中集成 TinyMCE 并实现图片点击放大功能 为了使在 TinyMCE 编辑器中插入的图片能够支持点击预览和放大的功能，在配置 `init` 方法时可以自定义插件并设置相应的事件监听。下面是一个完整的解决方案。 #### 安装依赖包 首先，确保已经安装了必要的依赖项[^3]： ```bash npm install tinymce @tinymce/tinymce-vue ``` #### 创建 TinyMce 组件 创建一个新的 Vue 单文件组件 `TinyMce.vue` 来封装 TinyMCE 的初始化逻辑以及图片处理的功能[^2]。 #### HTML 部分 模板结构保持简单，仅需放置一个 `<editor>` 标签用于渲染 TinyMCE 编辑区域。 ```html <template> <div class="editor-container"> <!-- 将 editor 组件绑定到 myValue 变量 --> <Editor v-model="myValue" :init="init"/> </div> </template> ``` #### JavaScript 部分 通过脚本导入所需的模块，并配置初始化参数来启用图片管理特性。特别注意的是要添加对图片点击事件的支持以便触发弹窗显示大图[^1]。 ```javascript <script setup> import { ref } from 'vue'; import tinymce from 'tinymce/tinymce'; // 导入 TinyMCE 库 import Editor from '@tinymce/tinymce-vue'; // 导入 Vue 版本的编辑器组件 import 'tinymce/themes/silver/theme.min.js'; // 初始化配置对象 const init = { height: 500, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help', images_upload_handler(blobInfo, success, failure) { const xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', '/api/upload'); // 替换成实际的服务端接口地址 xhr.onload = () => { if (xhr.status === 200 || xhr.status === 201) { success(JSON.parse(xhr.responseText).location); } else { failure(`HTTP Error: ${xhr.status}`); } }; const formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); xhr.send(formData); }, // 自定义图片加载完成后的钩子函数 content_style: "img {max-width:100%;height:auto;} .magnify{cursor:pointer}", setup(editor) { editor.on('NodeChange', function(e){ let imgElms = e.target.selection.getSelectedNodes().filter(node=>node.nodeName==='IMG'); Array.from(imgElms).forEach((el)=>{ el.classList.add('magnify'); el.addEventListener('click',(ev)=>{ ev.preventDefault(); var lightboxContainer = document.createElement("DIV"); lightboxContainer.style.position='fixed'; lightboxContainer.style.top=lightboxContainer.style.left='0px'; lightboxContainer.style.width=lightboxContainer.style.height='100%'; lightboxContainer.style.backgroundColor='rgba(0,0,0,.7)'; lightboxContainer.style.display='flex'; lightboxContainer.style.justifyContent='center'; lightboxContainer.style.alignItems='center'; var lightBoxImg=document.createElement("IMG"); lightBoxImg.src=el.getAttribute('src'); lightBoxImg.style.maxWidth='90vw'; lightBoxImg.style.maxHeight='80vh'; lightBoxImg.style.cursor='pointer'; lightboxContainer.appendChild(lightBoxImg); document.body.appendChild(lightboxContainer); lightBoxImg.onclick=function(){ document.body.removeChild(lightboxContainer); } }); }) }); } }; export default { components: { Editor }, data() { return { myValue: '' }; } }; </script> <style scoped> .editor-container { margin-bottom: 2rem; } </style> ``` 此代码片段实现了当用户单击 TinyMCE 编辑框内的任何图像时会弹出全屏查看的效果。同时为每张图片添加了一个 CSS 类 `.magnify` ，使得鼠标悬停其上时指针变为手型图标提示可交互操作。