富文本的使用

` npm i tinymce @packy-tang/vue-tinymce

"dependencies": { "@packy-tang/vue-tinymce": "^1.1.2", "@tinymce/tinymce-vue": "^3.0.1", "core-js": "^3.6.5", "tinymce": "^5.10.3", "vue": "^2.6.11" }, `

从node_modules中把tinymce文件拷贝到public目录下
main.js

import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
import 'tinymce/skins/ui/oxide/skin.css'
Vue.use(VueTinymce)

<template>
  <div class="tinymce-editor">
    <div id="tinymceToolbar"></div>
    <vue-tinymce
      ref="editor"
      class="editor overflow-scroll"
      v-model="content"
      :setting="setting" 
      :setup="setup"
      @keyup.native="$emit('editorChange', content)"
    />
    <div @click="handleContent">富文本</div>
  </div>
</template>

<script>
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/table'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/template'
import 'tinymce/plugins/template'
import 'tinymce/plugins/template'
export default {
  name: 'tinymceEditor',
  components: {
  },
  data() {
    return {
      // 编辑器内容
      content: '',
      // 编辑器设置
      setting: {
        inline: true,  // 设置内敛模式
        menubar: false, // 隐藏菜单栏
        toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs | myUpload',
           // 工具栏，根据需要写对应的工具名称，顺序及分割线等等，这里的最后的 ‘myUpload’ 是下面setup里的自定义插件
        toolbar_mode: 'sliding', // 工具栏模式，这里是滑行模式（当屏幕过小时，多余的工具会隐藏，点击更多按钮会出现其他工具，这里配置出现的特效）
        plugins: 'preview searchreplace autolink visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN', // 语言，汉化
        // font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC, sans-serif",
        branding: false, // 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接
        resize: false, // 是否可以缩放编辑器
        elementpath: false, // 在编辑器底部的状态栏中禁用元素路径。
        fixed_toolbar_container: '#tinymceToolbar', // 可以设置元素选择器指定工具栏嵌套在哪个元素里面
        custom_ui_selector: 'body', // 聚焦的元素
        noneditable_noneditable_class: 'mceNonEditable', // 使用此选项，您可以指定TinyMCE将使用的类名称，以确定使用noneditable插件时可编辑哪些内容区域。主要用入你想以代码的形式添加某些内容，并给这些内容设置类名，使他们不可编辑，只能整个删除
        init_instance_callback: editor => {
          editor.focus() // 初始化聚焦，让内联模式的编辑器工具显示
        },
        images_upload_handler:(blobInfo, success)=> {
            console.log(blobInfo.base64());
            console.log(blobInfo.blob());
            success('https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100')
            // const formData = new FormData()
            // formData.append('file', blobInfo.blob())
            // console.log((formData.append('file', blobInfo.blob())));
        //   success('data:image' + blobInfo)
        }
      },
    }
  },
  methods: {
    /**
     * @description: 编辑器setup
     * @author: Depp_ck
     */
    setup(editor) {
        // 自定义插件实现自定义工具栏按钮功能
      editor.ui.registry.addButton('myUpload', {
        tooltip: '上传',
        icon: 'browse',
        onAction: () => {
          console.log('点击了上传')
        },
      })
    },
    handleContent() {
        console.log(this.content);
    }
  },
}
</script>

<style lang="scss" scoped>
.tinymce-editor {
  padding: 20px;
  position: relative;
  .editor {
    padding: 10px;
    border: 1px solid #ddd;
    height: 410px;
    font-size: 16px;
    line-height: 1.4;
    overflow-y: scroll;
  }
}
</style>

// 中文包下载地址[Language Packages | Trusted Rich Text Editor | TinyMCE](https://www.tiny.cloud/get-tiny/language-packages/)