Vue tinymce富文本编辑器实现与图片保存至阿里云OSS

Vue tinymce富文本编辑器实现与图片保存至阿里云OSS前言安装tinymce-vue下载tinymce下载中文语言包tinymce组件编写(base64存储)tinymce组件编写(阿里云OSS存储)1.安装oss2.获取到访问oss的accessKeyId和accessKeySecret：3.跨域问题4.在项目中配置oss.js5.tinymce-editor(阿里云)完整代码tinym

小白wwj

3662人浏览 · 2021-06-30 22:47:25

小白wwj · 2021-06-30 22:47:25 发布

Vue tinymce富文本编辑器实现与图片保存至阿里云OSS

前言

最近在做后台的文章发布功能，选了一圈的编辑器最后选择tinymce，不仅因为界面优美、功能全面，最主要是使用教程和技术博客多，这样在遇到问题时能更快的解决。言归正传接下来给大家介绍下tinymce的实现以及图片上传阿里云oss。tinymce中文文档，tinymce官网

安装tinymce-vue

npm install @tinymce/tinymce-vue -S

下载tinymce

npm install tinymce -S

tinymce-vue与tinymce安装完毕后在static目录下新建一个tinymce文件夹，然后在node_modules 中找到 tinymce/skins目录，将其复制到static\tinymce目录下面。
在这里插入图片描述
static->tinymce整体目录结构如下

下载中文语言包

网址: https://www.tiny.cloud/get-tiny/downloads/
在这里插入图片描述选择中文语言包，下载后将zh_CN.js放置在刚才创建的static->langs下

tinymce组件编写(base64存储)

在src下components目录下创建一个tinymce文件夹，然后在tinymce文件夹下创建一个tinymce-editor.vue，tinymce-editor完整代码如下,这里图片存储以base64存储为例，下面会继续介绍阿里云OSS存储：

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick">
    </editor>
  </div>
</template>

<script>
//导入组件与扩展包
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
import 'tinymce/icons/default/icons.min.js'
export default {
  components: {
    Editor
  },
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists image media table textcolor wordcount contextmenu preview'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat preview'
    }
  },
  data () {
    return {
      // 初始化配置
      init: {
        language_url: '/static/tinymce/langs/zh_CN.js', // 这里是中文语言包的路径
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide', // 这里是skin的路径用于设置主题有亮与暗两种主题
        height: 380, // 设置编辑器的高度
        width: 940, // 设置编辑器的宽度
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: true,
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          // 这是将图片以base64存储在代码上
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        }
      },
      myValue: this.value
    }
  },
  mounted () {
    tinymce.init({
      selector: 'tinymce-editor'
    })
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}

</script>
<style scoped>
</style>

tinymce组件编写(阿里云OSS存储)

阿里云OSS存储就是将图片上传至OSS上然后返回图片链接，对图片链接进行存储。以Base64进行存储数据库优点是在提交前可以撤销图片从而不保存，缺点是一旦存储多了前端对页面的渲染会很慢。以OSS存储优点是，加载文章界面快，缺点是一旦上传只能覆盖无法撤销。代码上的差异主要在images_upload_handler中。

1.安装oss

npm install ali-oss --save

2.获取到访问oss的accessKeyId和accessKeySecret：

在这里插入图片描述

3.跨域问题

在这里插入图片描述设置如下
然后在RAM访问控制->用户->给创建的用户添加AliyunOSSFullAccess和AliyunSTSAssumeRoleAccess权限权限:

4.在项目中配置oss.js

在src下components目录下新建js文件夹，在其下创建oss.js,代码如下：

let OSS = require('ali-oss')
export let client = new OSS({
  region: '',  // 填你的oss所在区域，例如oss-cn-shenzhen
  accessKeyId: '', // 填你的oss的accessKeyId
  accessKeySecret: '', // 填你的oss的accessSecret
  bucket: 'wwj01' // 你创建的路径名称
})

5.tinymce-editor(阿里云)完整代码

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick">
    </editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
import 'tinymce/icons/default/icons.min.js'
import {client} from '../js/oss.js'
export default {
  components: {
    Editor
  },
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists image media table textcolor wordcount contextmenu preview'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat preview'
    }
  },
  data () {
    return {
      // 初始化配置
      init: {
        language_url: '/static/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide',
        height: 380,
        width: 940,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: true,
        // 此处为图片上传处理函数，这里以阿里云oss上传图片为例，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          var filename = blobInfo.filename()
          var index = filename.lastIndexOf('.')
          var suffix = filename.substring(index + 1, filename.length)
          // 重构文件名 加上时间序列防止重名
          filename = this.$md5(blobInfo.base64()) + this.getTime() + '.' + suffix
          client.multipartUpload(filename, blobInfo.blob()).then(function (result) {
            if (result.res.requestUrls) {
              console.log('返回结果', result)
              success(result.res.requestUrls[0].split('?')[0])
            }
          }).catch(function (err) {
            console.log(err)
          })
        }
      },
      myValue: this.value
    }
  },
  mounted () {
    tinymce.init({
      selector: 'tinymce-editor'
    })
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    },
    getTime () {
      var Time = new Date()
      var year = Time.getFullYear()
      var month = Time.getMonth() + 1
      var date = Time.getDate()
      var hours = Time.getHours()
      var minute = Time.getMinutes()
      var seconds = Time.getSeconds()
      var time = year + month + date + hours + minute + seconds
      return time
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}

</script>

tinymce组件使用

HTML部分

// 实现文本双向绑定msg
<template>
  <div class="release_tinymce">
    <tinymce-editor v-model="msg" :disabled="disabled" @onClick="onClick" ref="editor"></tinymce-editor>
  </div>
</template>

JS部分

<script>
// 组件引入
import TinymceEditor from '../tinymce/tinymce-editor'
export default {
  name: 'releasepage',
  components: {
    TinymceEditor
  },
  data () {
    return {
      msg: 'Welcome to Use Huaweintel Editor',
      disabled: false,
    }
  },
  mounted: function () {
  },
  watch: {
  },
  methods: {
    // 鼠标单击的事件
    onClick (e, editor) {
      console.log('Element clicked')
      console.log(e)
      console.log(editor)
    },
    // 清空内容
    clear () {
      this.$refs.editor.clear()
    }
  }
}
</script>

结果展示

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^