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.使用

在需要的地方引入(這裏一定要注意路徑問題)

<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" ref="editor"></Editor>

......

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
              }});
          }
      });

  });

});