Vue3_tiny富文本编辑器的使用

---

一、全局引入

第一步，安装

npm install --save “@tinymce/tinymce-vue@^4”

第二部，引入

Vue

<template>
<div>this createBlog</div>
  <editor :init="init" v-model="form.content"></editor>
</template>

<script>
import './index.less'
import indexT from './indexT'

export default indexT
</script>

Ts

// ts
import { defineComponent, ref } from 'vue';
import Editor from "@tinymce/tinymce-vue";
export default defineComponent({
  name: 'creatBlog',
  data() {
    return {
      form:{
        content:''
      },
      init: {
        language: "zh_CN",
        height: 430,
        plugins: "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar: "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat",
        branding: false,
        images_upload_handler: (blobInfo, success, failure) => {
          success('data:image/jpeg;base64,' + blobInfo.base64())
        },
      },
    }
  },
  components: {
    "editor": Editor,
  },
  methods: {},
})