tinymce实现上传图片

 

 本人个人博客网站：http://www.dzyong.top(V2.0开发中)、https://www.dzyong.com（V1.0）

 

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

如何在VUE中使用

在vue中想要使用TinyMCE是非常容易的，比传统的安装插件要多几步

1.安装

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

2.找到这个路径下的文件./node_modules/tinymce/skins，然后复制到 ./public目录下

3.编辑器默认是英文的，如果需要中文的话可下载汉化包https://www.tiny.cloud/get-tiny/language-packages/

然后将中文包拷贝到如下的目录中

4.使用

在需要的地方引入(这里一定要注意路径问题)

......

editorInit: {
  language_url: require("../../../public/tinymce/zh_CN.js"),
  language: "zh_CN",
  skin_url: "/tinymce/skins/ui/oxide",
  height: 600,
},


....

mounted() {
  tinymce.init({});
}

    

到这里我们就可以看到一个编辑器了

但是可操作的内容很少，只有一些基本的设置，如果想要更多的设置，我们可以引入相应的模块

import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
export default {
components: {},
name: "tinymce",
props: {},
data() {
  return {
    editorInit: {
      language_url: require("../../../public/tinymce/zh_CN.js"),
      language: "zh_CN",
      skin_url: "/tinymce/skins/ui/oxide",
      height: 600,
      plugins:
        "link lists image code table colorpicker textcolor wordcount contextmenu",
      toolbar:
        "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
      branding: false,
      images_upload_handler: (blobInfo, success, failure) => {
        let formdata = new FormData();
        formdata.append("imgData", blobInfo.base64());
        formdata.append("name", blobInfo.blob().name);
        formdata.append("size", blobInfo.blob().size);
        formdata.append("type", blobInfo.blob().type);
        console.log(blobInfo.blob());
        this.$api.uploadImage(formdata).then(res => {
          console.log(res);
          success(res.info.path);
        });
      }
    },
    tinymceHtml: "",
  };
},
}

可以看到现在的内容就多了很多

但是是无法上传图片的

如何上传图片

 对于上传图片功能，tinymce提供了很多相关配置http://tinymce.ax-z.cn/configure/file-image-upload.php

这里我们对其中的自定义上传图片进行简单的讲解，也就是要用到   images_upload_handler（图片上传自定义实现）这个配置

此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供三个参数：blobInfo、成功回调和失败回调。

如果未使用此配置，TinyMCE将使用ajax每次上传一个图片，并在成功返回结果后调用成功回调函数。

blobInfo.blob()：包含了图片相关信息

将它写入一个formData中

formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());

然后发送到后端即可，这只是其中一种方式。

好奇的我想看看blobInfo还有哪些信息，于是我在控制台中打印了一下。

可以看到其中有一个base64，因此还可以以base64的数据来传输图片4

 

express如何保存图片

第一次搞express中保存图片，小白的我也只有去百度一下，其中看到的最多的是使用multer

具体使用方法如下：

const multer =require('multer')
const upload = multer({dest:__dirname +  '/upload'})//设置上传的目录文件夹

//file为自定义名字，一定要与前端所定义的名字相同
router.post('/uploadImage', upload.single('file'), function(req, res){
    res.json({info:req.file})
}）

但是这种方式保存下来是没有后缀名的一个文件，这并不是我想要的直接保存下来就可以看到图片的效果。

因此我就想到了传输base64来进行解码保存。具体代码如下：

var multiparty = require('multiparty');
var fs = require('fs');

router.post('/uploadImage', function(req, res){
  var form = new multiparty.Form();
  form.parse(req, function(err, fields, files){
      //将前台传来的base64数据去掉前缀
      var imgData = fields.imgData[0].replace(/^data:image\/\w+;base64,/, '');
      var dataBuffer = new Buffer(imgData, 'base64');
      //写入文件
      var time = (new Date()).getTime()
      var rename = time + '.'+ name.split('.')[1]
      fs.writeFile(__dirname + '/upload/images/' + rename, dataBuffer, function(err){
          if(err){
              res.json(err);
          }else{
              res.json({status: 1, info: {
                path: '....自定义路径....' + rename
              }});
          }
      });

  });

});