最近做项目涉及到上传文件，于是便想用tinyMCE的文本编辑器，官网地址如下

tinyMCE官网地址

我比较了几个编辑器，最终选用这个，因为功能比较强大，能够实现代码编写，图片上传，插入连接等功能。今天就来说说图片上传。（本地图片上传）

一： 大致介绍

我们的需求是允许用户在文章编写过程中插入图片并将图片保存到服务器下的一个文件夹（WEBROOT/upImage）。

最终效果是这样的，如图

点击工具栏的图片按钮，弹出如图的模态框：

普通： 插入网站的图片

上传： 插入本地图片

插入图片后tinyMCE会把图片转换为img标签，比如我这里插入一个图片，tinyMCE转换后长成这样：

<img src="../uploadImage/fec76649e2354069b0f2fe50e8205e9d.jpeg" alt="照片" width="307" height="425" />

src——地址中的内容

alt——图片描述的内容

width,height——大小中的内容

大致介绍完毕之后，我们说说具体该怎么做吧（是不是废话有点多，请见谅啦(*^▽^*)）

二： tinyMCE图片上传的原理

（对不起，现在还不是实现，请耐心等待，把tinyMCE本地图片上传的原理看完再向下看哦，如果你知道这个，可以直接看实现，Thanks♪(･ω･)ﾉ）

我在网上没有找到tinyMCE的汉化文档，所以都是一下内容均来自tinyMCE的官网，因为我英语水平还是有点渣，所以

最近做项目涉及到上传文件，于是便想用tinyMCE的文本编辑器，官网地址如下tinyMCE官网地址我比较了几个编辑器，最终选用这个，因为功能比较强大，能够实现代码编写，图片上传，插入连接等功能。今天就来说说图片上传。（本地图片上传）一： 大致介绍我们的需求是允许用户在文章编写过程中插入图片并将图片保存到服务器下的一个文件夹（WEBROOT/upImage）。最终效果是这样的，如... 2.把node_modules\ tinymce 里面的文件 包括 tinymce 文件夹 全部复制到static文件夹下面 3.在mian.js中引入 tinymce （也可以在组件中引入） import Tinymce from ' tinymce ' Vue.prototype.$ tinymce = Tinymce ; 4.完整代码 <template> <div class="SEditor">