vue 可使用的富文本

1.引入

cnpm install --save tinymce@5.7.1 "@tinymce/tinymce-vue@^3"

2.页面调用

<template>
  <div>
    <a-card class="mt-15" >
      <h2>富文本测试</h2>
      <a-button type="primary" @click="save">
        保存
      </a-button>
      <editor
          :init=init
          v-model="myValue"
      />
    </a-card>
  </div>
</template>

<script>

import Editor from '@tinymce/tinymce-vue'
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN"
import {upload} from "../../api/api";
export default {
  name: "Information",
  components: {
    'editor': Editor,
  },
  data(){
    return{
      init: {
        language: "zh_CN",
        plugins: 'lists link image table code help wordcount powerpaste',
        height:800,
        branding: true, // 去水印
        paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
        // 上传图片
        images_upload_handler: (blobInfo, success) => {
          console.log('blobInfo',blobInfo)
          console.log('success',success)
          this.uploadImg(blobInfo,(e)=>{
            success(e)
          })
        },


      },
      myValue:'',

    }
  },
  created() {

  },
  methods:{
    uploadImg(blobInfo,fn) {
      let formData = new FormData()
      formData.append('file', blobInfo.blob())
      //这里为自己的上传接口调用方法
      upload(formData).then((res) => {
        const { code, data } = res;
        fn && fn(data.url)
        this.$emit("update:imageUrl", data.url);
      })

    },
    save(){
      console.log('val:',this.myValue)
    },


  },
  computed:{
   
  }
}
</script>

<style scoped lang="less">

</style>