vue3 使用富文本tinymce-vue

一、安装
npm install @tinymce/tinymce-vue -S

二、封装建一个组件

<template>
  <div>
    <Editor
      api-key="xxxxx"
      tinymceScriptSrc="/tinymce/tinymce.min.js"
      :init="{
        language: 'zh_CN',
        height: 500,
        paste_data_images: true, // 允许粘贴图像
        paste_webkit_styles: 'all',
        automatic_uploads: true,
        convert_urls: false,
        image_caption: true,
        content_style: `
        *{
            margin:0;
            padding:0;
          }
          body{
            font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
              Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
              Microsoft Yahei, sans-serif !important;
          }
          h1,h2,h3,h4,h5,h6,h7{
            font-size: 18px;
          }
          p,font{
            font-size: 16px;
            font-weight: 400;
            color: #262626;
            line-height: 24px;
            text-align: justify;
            word-break: break-all;
            letter-spacing: 1.5px;
          }
          p{
            text-indent:0;
            margin:0;
          }
          strong span{
            display: block;
          }
          div img,p img,img,span img{
            width:50% !important;
            height:auto;
            text-align:center;
            border-radius: 4px;
            display: block;
            margin: 15px auto 0 auto;
          }
          figcaption{
            text-align:center !important;
            margin: 20px 0 !important;
          }
          figure{
            margin: 0 auto !important;
          }
          `,
        toolbar: [
          'image media video bold fontsize forecolor backcolor italic underline strikethrough styleselect fontsizeselect alignleft aligncenter alignright alignjustify outdent indent lineheight cut copy outdent indent undo redo  blockquote table preview fullscreen',
        ],
        menubar: false,
        branding: false,
        fontsize_formats: '11px 12px 14px 16px 17px 18px 24px 36px 48px',
        lineheight_formats: '10px 20px 30px 40px 50px 60px',
        imagetools_toolbar: 'imageoptions',
        file_picker_callback: file_picker_callback,
        paste_preprocess: paste_preprocess,
        init_instance_callback: init_instance_callback,
        images_upload_handler: example_image_upload_handle,
        urlconverter_callback: urlconverter_callback,
      }"
      v-model="content"
      :plugins="['image', 'fullscreen', 'media', 'preview', 'paste']"
      @change="handleChange"
    ></Editor>
  </div>
</template>
<script lang="ts" setup<