TinyMCE 插件本地引入

1,383 阅读1分钟

前言:针对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 本地化开发