element-ui+vue 2.x 集成tinymce自闭指南

迷南。 2022-11-19 04:27 368阅读 0赞

### element-ui+vue 2.x 集成tinymce自闭指南 ###

*  tinymce介绍
 *   *  集成
     *  问题汇总

# tinymce介绍 #

选型啥的屁话我就不提了，重点是解决问题，事先声明，本人后端开发。如有不专业敬请海涵

## 集成 ##

\*\* 此处直接引用别人写的，我就不cv了\*\*  
Vue CLI 3+tinymce 5富文本编辑器整合: [link][].

## 问题汇总 ##

**1. 一堆Warinng ./Editor.js xx not found;**

成因：产生这个错的原因是我们安装时使用的npm安装的 tinymce-vue控件仅仅支持vue3.0以上。  
而element-ui的框架一般使用的是vue2.0.So,是我们用的版本过高  
解决方案：简单的一句话降版本。（说的简单，我直接贴我的降低的版本号）  
修改 page.json（这个是记录我们版本号的文件，改之前先问问其他人，备个份）

//修改这两个版本就好了
        "@tinymce/tinymce-vue": "^3.2.0",
        "tinymce": "^5.5.1",

修改完后，若果我们有page-lock.json文件，请删除，再清空node\_modules下的东西。  
执行

npm install

**2.降低版本后我们编译就无任何warning了，但是当我们运行时，我们可能会看到如  
Uncaught SyntaxError: Unexpected token ‘＜‘或者缺少各种JS.CSS的错**  
类似：  
![在这里插入图片描述][20210414163441923.png]  
成因：缺少这类文件除了首先检查组件引用地址外，还可能是我们将tinycme的js和css放在了src路径下引起的，正确的放置npm路径如下  
请放置在public路径下，此处解释可自行百度，我就不水字数了  
![在这里插入图片描述][20210414163946953.png]  
**3.提示zh\_CN包出问题了，同上，检查您的语言包路径是否正确，正确的话同2处理**

language_url: `/tinymce/zh_CN.js`,

好了，这便是我折腾一天遇到的成果，好在最后还是集成完成了。

好了发表下我今天得感想  
![在这里插入图片描述][20210414164625215.png]

我是和弦，一名网络苟且者，希望能帮你解决问题

[link]: https://www.cnblogs.com/zhongchao666/p/11142537.html
[20210414163441923.png]: /images/20221022/492af39d1f454737884461907ed692cc.png
[20210414163946953.png]: /images/20221022/0b4bc5de860d40eeb9a49b202541a1b3.png
[20210414164625215.png]: /images/20221022/1474f539cb234993ae00413c1a9cd0a6.png