vue中如何使用富文本编辑器（TinyMce）

英文官网：https://www.tiny.cloud/
中文官网：http://tinymce.ax-z.cn/

安装

使用npm install tinymce --save命令下载完整的包

npm install tinymce --save

下载完成之后，在node_modules下找到tinymce包下的资源拷贝到项目本地

由于tinymce默认是英文界面，自己项目需要中文界面，所以需要下载中文的语言包。还可以下载自己需要的语言包

在static/tinymce目录下新建一个lang目录存放语言包

使用

首先在组件中引入下载好的包

ps: 强烈建议封装成组件使用

import Editor from "@tinymce/tinymce-vue";

在components下注册富文本组件

components: {
  "tinymce": Editor
},

在data里定义一个init变量来初始化我们的编辑器

props:{
  //传入的默认值
  value: {
    type: String,
    default: ''
  },
  //插件
  plugins: {
    type: [String, Array],
    default: 'lists fullscreen emoticons autosave image table colorpicker textcolor wordcount contextmenu emoticons'
  },
  //工具
  toolbar: {
    type: [String, Array],
    //如果显示的内容和配置的不符，表明插件未引入。需要去引入插件；
    default: 'bold italic underline strikethrough restoredraft image fullscreen emoticons | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | removeformat'
  },
}
init: {
   branding:false, // 去水印
   language_url: '/static/tinymce/lang/zh_CN.js',  //语言包路径地址
   language: 'zh_CN',
   height: 700,//编辑器高度
   width: '90%',//编辑器宽度
   plugins: this.plugins,  // 插件
   toolbar: this.toolbar,  // 工具栏
   // menubar:false,//顶部菜单是否显示
   content_style:'div,p{margin:5px 0;}'+'img{max-width:100%;}'+'*::-webkit-scrollbar{width:6px;height:6px;background:transparent;}'+'*::-webkit-scrollbar-thumb{border-radius: 3px;background: #bac3d9;}',
   // 此处为图片上传处理函数，这里就没用base64的图片形式上传图片
   // 因为base64存储到服务器数据库太庞大了
   images_upload_handler: (blobInfo, success, failure) => {
// 自定义上传逻辑
     let formdata = new FormData();
     formdata.append("file", blobInfo.blob(),blobInfo.filename());

// 改为自己接口路径
     axios.post(url, formdata)
     .then(res => {
       // 我的接口返回数据格式
       //{code: 0,data: {url: ....},message: ""}
       if(res.data.code === 200){
         success(res.data.data.url)
       }else{
         failure('上传失败！'+res.data.code)
       }
     })
   },
   init_instance_callback : function(editor) {
     // 富文本初始化回调
   }
 },

我贴一些常用的配置属性值。列表来自tinymce中文文档。

newdocument（新文档）
bold（加粗）
italic（斜体）
underline（下划线）
strikethrough（删除线）
alignleft（左对齐）
aligncenter（居中对齐）
alignright（右对齐）
alignjustify（两端对齐）
styleselect（格式设置）
formatselect（段落格式）
fontselect（字体选择）
fontsizeselect（字号选择）
cut（剪切）
copy（复制）
paste（粘贴）
bullist（项目列表UL）
numlist（编号列表OL）
outdent（减少缩进）
indent（增加缩进）
blockquote（引用）
undo（撤销）
redo（重做/重复）
removeformat（清除格式）
subscript（下角标）
superscript（上角标）

使用toolbar来配置工具栏上可用的按钮，多个控件使用空格分隔，使用|来创建分组。

HTML 内容

<div>
    <tinymce :init="init" v-model="myValue"></tinymce>
</div>

tinymce组件直接支持v-model指令，直接双向绑定数据。

在watch里接收传过来的value值

watch: {
 value (newValue) {
     this.myValue= newValue
   }
 }

本文源码

<template>
  <div class="tinymce-editor">
    <editor 
      v-model="myValue"
      :init="init">
    </editor>
  </div>
</template>

<script>
import axios from 'axios'
import Editor from '@tinymce/tinymce-vue';

  export default {
    components: {
      Editor
    },
    props: {
      //传入的默认值
      value: {
        type: String,
        default: ''
      },
      //插件
      plugins: {
        type: [String, Array],
        default: 'lists fullscreen emoticons autosave image table colorpicker textcolor wordcount contextmenu emoticons'
      },
      //工具
      toolbar: {
        type: [String, Array],
        //如果显示的内容和配置的不符，表明插件未引入。需要去引入插件；
        default: 'bold italic underline strikethrough restoredraft image fullscreen emoticons | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | removeformat'
      },
      //编辑器高度
      height:{
        default:400
      },
      // 上传文件地址
      mediaUrl:{
        type: String,
        default: 'http://.......'
      }
    },
    data () {
      return {
        // 初始化富文本
        init: {
          branding:false,
          language_url: '/static/tinymce/lang/zh_CN.js',  //语言包路径地址
          language: 'zh_CN',
          height: this.height,//编辑器高度
          width: '90%',//编辑器宽度
          plugins: this.plugins,  // 插件
          toolbar: this.toolbar,  // 工具栏
          // images_upload_url: this.mediaUrl, //上传路径
          elementpath:false,//标签路径是否显示
          // menubar:false,//顶部菜单是否显示
          paste_data_images: true,//可以粘贴图片，需要引入paste插件
          content_style:'div,p{margin:5px 0;}'+'img{max-width:100%;}'+'*::-webkit-scrollbar{width:6px;height:6px;background:transparent;}'+'*::-webkit-scrollbar-thumb{border-radius: 3px;background: #bac3d9;}',
          // 此处为图片上传处理函数，这里就没用base64的图片形式上传图片
          // 因为base64存储到服务器数据库太庞大了
          images_upload_handler: (blobInfo, success, failure) => {
          
          },
          init_instance_callback : function(editor) {

          }
        },
        myValue: '',
      }
    },
    mounted () {
      tinymce.init({})
    },
    methods: {
 
    },
    watch: {
      value (newValue) {
        this.myValue = newValue
      }
    }
  }

</script>

效果