前言:针对tinymce-vue,在vue2环境时用不了tinymce4.0以上版本问题;tips:官方开源的tinymce-vue 4.0以下支持vue2,tinymce-vue 4.0以上支持vue3 而项目环境是vue2需求是TinyMCE V5 的优秀功能,转而使用官方的TinyMCE本地化方案。
项目环境:vue2.6.1+@vue/cli 4.5.13+webpack: 5.74.0 webpack-cli: 4.10.0 webpack-dev-server 4.10.1
1. 到官网下载TinyMCE本地插件包
附本地包下载地址:https://www.tiny.cloud/get-tiny/self-hosted/ (注意prod包和dev包)
本文以TinyMCE 中文文档的 V5 版本为准下载了5.10.5 Dev版本。
下载后解压得到tinymce文件夹,整个文件夹移动至项目Public目录下。
tips:参考上图目录结构层级。
2. 初始化TinyMCE
任意.vue文件,按下方路径指向tinymce.min.js文件
const tinymceUrl = window.location.origin + '/tinymce/tinymce.min.js' // tinymce.min.js 文件的路径
tips:loadJS载入tinymce.min.js文件用
const loadJs = (src /*须加载js文件路径*/) => { return new Promise((resolve, reject) => { const script = document.createElement('script') script.type = 'text/javascript' script.src = src document.body.appendChild(script) script.onload = () => { resolve(1) } script.onerror = () => { reject('load tinymce.js error!') } })}
----------------------------------- 一条随意的分割线 --------------------------------------
下方完整实例代码及注释快速理解tinymce初始化过程;
tips:请结合TinyMCE中文文档 V5版本
#TinyMCE 本地化开发