vuecli3.x中轻松4步带你使用tinymce的步骤

前言

笔者在使用tinymce时发现跟着网上的方法去做，基本都会因为版本等一些问题报错，所以笔者总结了以下方案！可以收藏哦

第一步:

npm install @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 -S

第二步:

找到node_modules中的skins文件夹，然后在项目中的public下新建tinymce文件夹，然后将刚刚找到的整个skins文件夹拷贝到public的tinymce目录下。

接着去官网下载语言包，解压，将langs文件夹拷贝到public的tinymce文件夹下(和skins文件夹同级)

第三步:

在components文件夹下新建tinymce组件的文件夹，新建index.vue文件，复制以下代码进去:

第四步:

在要使用的组件中加入以下代码：

import TinymceEditor from '@/components/tinymce';

components: { //注册TinymceEditor组件
  TinymceEditor
},

data() {
  return {
    content: '', //富文本的内容
    baseUrl: window.baseUrl, //默认为'' 空字符串
  }
}

computed:{
  realHeight() {
   return (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 200
  }
}

methods:{
  async imgUpload(blobInfo, success, failure) {
   const formData = new FormData();
   formData.append('file', blobInfo.blob());
   try {
    const res = await uploadFile(formData);
    success(this.server + res);
    console.log(this.server + res);
   } catch (e) {
    console.log(e);
    failure('上传失败:' + e);
   }
  },
}
模板中使用:

然后就大功告成:

到此这篇关于vuecli3.x中轻松4步带你使用tinymce的步骤的文章就介绍到这了,更多相关vuecli3.x使用tinymce内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！