哦屋～如此完美的富文本编辑器你值得拥有-白红宇

效果图

Tinymce

前景：发布文章得有一个好看好用的富文本编辑器，这个文本编辑器得支持文字编辑，背景编辑，上传图片等等功能，这边富文本编辑器我按word的功能顺序排版。

Vue篇

下载tinymce

npm i tinymce -S复制代码

在node_module/tinymce复制到/static下

在自己的组件文件夹components创建TinyMce文件夹

/src/components/TinyMce/index.vue


    复制代码

/src/api/public.js

// 通用型apiimport axios from 'axios'// 文件上传 api 地址export const ossUpload = () => {  return axios.get(`http://localhost:3003/auth/ali`, {})}export const uploadImg = (data, file) => {  let ossConfig = data.data  let uploadUrl = data.data.url  let formData = new FormData()  formData.append('OSSAccessKeyId', ossConfig.OSSAccessKeyId)  formData.append('Signature', ossConfig.signature)  formData.append('key', ossConfig.key)  formData.append('policy', ossConfig.policy)  formData.append('Content-Type', file.type)  formData.append('file', file)  return axios.post(uploadUrl, formData).then(res => {    let res1 = {      code: 0,      data: {
   name: data.data.imgUrl},      msg: ''    }    return Promise.resolve(res1)  }).catch(err => {    return err  })}复制代码

页面引用此组件用法(这边有个坑，代码报错需要声明window.tinymce.baseURL)


    复制代码

Node篇

思路：node主要实现阿里的oss图片上传功能，node通过配置阿里的oss的key和密钥去换取签名，然后将key、签名、请求阿里路径等参数传给前端，前端通过这个路径加参数即可将本地图片上传到阿里oss平台。

const Koa  = require('koa')const app = new Koa()const Router = require('koa-router');const router = new Router();const OSS = require('ali-oss');const config = {  bucket: 'img-o-wu', // 你自己创建的命名空间  region: 'oss-cn-hangzhou',// 区域，你要填你在阿里云选的  accessKeyId: '你的accessKeyId',  accessKeySecret: '你的accessKeySecret',  expAfter: 300000, // 签名失效时间，毫秒  maxSize: 1048576000 // 文件最大的 size}const client = new OSS(config);// 处理跨域请求app.use(async (ctx, next) => {  ctx.set('Access-Control-Allow-Origin', 'http://localhost:8080'); // 需要跨域的地址  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');  if (ctx.method == 'OPTIONS') {    ctx.body = 200;  } else {    await next();  } });//子路由ali-osslet auth = new Router();auth.get('/ali',async(ctx)=>{  console.log('请求ali-oss服务',ctx);  const url = `https://${config.bucket}.${config.region}.aliyuncs.com`  const expireTime = new Date().getTime() + config.expAfter  const expiration = new Date(expireTime).toISOString()  const policyString = JSON.stringify({    expiration,    conditions: [      ['content-length-range', 0, config.maxSize]    ]  })  const policy = Buffer.from(policyString).toString('base64')  const signature = client.signature(policy)  ctx.body={    signature, // 签名    policy,    url, // 前端请求阿里oss地址    'OSSAccessKeyId': config.accessKeyId, // 你的accessKeyId    'key': expireTime, // 文件时间戳    'success_action_status': 201,    'imgUrl': client.signatureUrl(expireTime.toString()) // 访问图片全路径  };});// 二级路由router.use('/auth',auth.routes(),auth.allowedMethods());app.use(router.routes()).use(router.allowedMethods());app.listen(3003, () => {    console.log('myBlog is run')})复制代码

直接请求http://localhost:3003/auth/ali获取node服务端签好名的配置

注意：

有一个疑问就是获取上传图片前路径我本来以为是在前端请求阿里的上传接口时就跨域拿到了，too young too simple,别想当然了，服务端的ali-oss这个阿里的库已经帮我们实现了，拿来主义^_^，直接client.signatureUrl(expireTime.toString()),这时候把访问图片的全路径直接作为参数传到前端即可。