【vue】vue-element-admin

最新推荐文章于 2023-02-11 14:18:59 发布

yuyan_yan

最新推荐文章于 2023-02-11 14:18:59 发布

阅读量247

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yuyan_yan/article/details/103176844

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用vue-element-admin遇到的问题！

computed

方法传参：采用闭包进行传参

router

利用addRoutes添加路由后，页面跳转需要跳转到通用的路由，才能看到动态加载的路由！

tinymce 富文本编辑器的封装（tinymce版本为5.2.2）

有注册或购买过服务的话，直接通过组件配置api-key直接使用，我没有注册购买，而且比较急，所以直接利用下载的方式使用了，这样的话，就需要做一层封装了。

安装tinymce-vue

npm install @tinymce/tinymce-vue -S

下载tinymce

npm install tinymce -S

将node_modules文件中的tinymce的skins文件复制下来，放到public文件中，我这里建一个tinymce为文件夹进行存放，方便管理

在这里插入图片描述

下载语言包

可以在tinymce官网下载中文语言包下载链接。然后将下载好的语言包文件放到public文件的tinymce中。
在这里插入图片描述
封装的前期准备到这里就结束了，接下来就是组件封装了。

组件封装

考虑到组件可能会在大多数场景进行使用的问题，所以将组件封装到全局components文件中

导入tinymce组件

导入tinymce组件和主题
在这里插入图片描述
在组件模板中使用tinymce组件

export default {
  components: { Editor },
  name: 'Tinymce',
  props: {
    id: {
      type: String,
      default: function() {
        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    toolbar: {
      type: Array,
      default() {
        return ['bold italic underline alignleft aligncenter alignright']
      }
    },
    plugins:{
      type: Array,
      default() {
        return ['advlist anchor autolink autosave code']
      }
    }
    height: {
      type: [Number, String],
      required: false,
      default: 360
    },
    width: {
      type: [Number, String],
      required: false,
      default: 'auto'
    }
  },
  data() {
    return {
      content: this.value,
      init: {
        selector: `#${this.tinymceId}`,
        skin_url: 'tinymce/skins/ui/oxide', // 一定要指定一套ui风格
        language_url: 'tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        height: this.height,
        plugins: this.plugins, // 插件
        toolbar: this.toolbar, // 工具栏
        branding: false,
        images_upload_handler: (blobInfo, success, failure) => {
          this.handleImgUpload(blobInfo, success, failure)
        }
      }
    }
  },
  mounted() {
    /* 如果在这里传入上面的 init 对象，并不能生效，
    但什么参数都不传也会报错，所以这里传入一个空对象 */
    tinymce.init({})
  },
  watch: {
    value(newValue) {
      this.content = newValue
    },
    content(newValue) {
      this.$emit('getValue', newValue)
    }
  },
  methods: {
    //自定义图片上传方式
    handleImgUpload(blobInfo, success, failure) {
      const imageData = new FormData()
      // formdata.set('upload_file', blobInfo.blob())
      // axios.post('/api/upload', formdata).then(res => {
      //   success(res.data.data.src)
      // }).catch(res => {
      //   failure('error')
      // })
    }
  }
}