tinymce-rui

介绍

• 基于tinymce-vue封装的富文本编辑器
• 官方文档：链接
• 中文文档：链接

安装

npm install timynce-rui

使用

下载资源包

• 资源包：下载
• 将tinymce文件夹放在项目静态文件目录下

引入项目

全局注册

// main.js
import Editor from 'tinymce-rui'
Vue.use(Editor)

// main.js
import Editor from 'tinymce-rui'
Vue.use(Editor)

本地注册

import Editor from 'tinymce-rui'

export default = {
    name: '',
    components: { Editor }
}

组件内使用

<editor v-model="content"></editor>

参数

| 参数 | 类型 | 描述 | 默认值 | | ---------------------------------------- | ----------------- | ---------------------------------------------- | --------------------------- | | id | String | 编辑器的id | vue-tinymce-时间戳-随机数 | | baseUrl | String | 资源包路径，相对于index.html的路径 | | | width | Number/String | 编辑器的宽度 | 'auto' | | Height | Number/String | 编辑器的高度 | 560 | | uploadFile(blobInfo, success, failure) | Function | 自定义文件上传方法，Promise，返回文件的url | | | uploadImg(file) | Function | 自定义图片上传 | |

### 自定义上传

​ upload()为自己的上传接口，需要返回绝对路径

uoloadImg

uploadImg(blobInfo, success, failure) {
      const params = new FormData()
      params.append('file', blobInfo.blob())
      upload(params).then(res => {
        const subUrl = res.data.url.split('../')[1]
        console.log(subUrl)
        success('http://nr-pms-dbs.mepxns.info/' + subUrl)
      }).catch(err => {
        failure(err)
      })
    },

####uploadFile

uploadFile(file) {
      return new Promise(resolve => {
        const params = new FormData()
        params.append('file', file)
        upload(params).then(res => {
          const subUrl = res.data.url.split('../')[1]
          resolve('http://nr-pms-dbs.mepxns.info/' + subUrl)
        })
      })
    }