Vite构建工具下Tinymce踩坑指南
解决方案是在路劲前面增加/
,这个跟上面链接有些区别,区别原因应该是如果路由采用的是createWebHashHistory
则应该去掉/
,如果是createWebHistory
则应该加上/
页面引用,一种异步加载,一种同步加载,两种方式都可以。
import {ref,defineAsyncComponent} from 'vue'
// import scEditor from '@/components/scEditor/index.vue'
const scEditor = defineAsyncComponent(() => import('@/components/scEditor/index.vue'));
现在插件显示出来了,但是无法插入表格
提示的异常信息如下
3tinymce.js:2420 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': 'map:not(svg map),canvas:not(svg canvas),del:not(svg del),ins:not(svg ins),a:not(svg a)' is not a valid selector.
at updateBlockStateOnChildren (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:2347:31)
at updateChildren (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:2414:35)
at Object.parse (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:17139:11)
at insertHtmlAtCaret (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:12854:33)
at Object.insertContent (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:17944:47)
at insertContent$1 (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:18113:102)
at http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:28952:37
at Object.each (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:6296:13)
at insertAtCaret (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:28951:14)
at mceInsertContent (http://localhost:3004/node_modules/.vite/deps/tinymce_tinymce.js?v=f2a2b8b4:28978:13)
出现的原因是应该是不同的tinymce
导致的配置问题,tinymce对应的版本如下即可,因为是应用旧没有再深究,当前最新版本为什么会出现上面的问题
"@tinymce/tinymce-vue": "5.0.0",
"tinymce": "6.3.2",