Vue里使用功能强大的‘tinymce’富文本编辑器 --所看即所得

tinymce是国外的一款富文本编辑器，开源可商用，免费免费免费！！！插件丰富、可扩展性强、界面好看、提供经典、内联、沉浸无干扰三种模式、对标准支持优秀（自v5开始）、多语言支持都是对他的描述！
一、废话不多说，关于其他对tinymce的介绍大家自行查询，下面直接开始使用。

npm i tinymce (使用npm包管理工具先下载)；
下载好了后在node_modules里会看到如下结构；
下载语言文件，如果你的下载下来的包里已经有了langs这个语言文件，并且文件里有中文的语言包，就忽略掉4这步（如果你喜欢英文，不需要转换中文，那么也请你忽略4这步），没有的话去这个地方下载中文语言包汉语包下载，找到下面这项，把压缩包下载下来；
OK，tinymce已经下载了，语言包也OK了，下面开始使用；

二、我们自己创建一个vue的项目，一般都直接使用脚手架创建，创建好了后在src目录创建一个名称为TinymceEdit的文件夹，名称自取，并且在该文件夹创建Index.vue文件，这个TinymceEdit文件夹主要用来放所有tinymce的东西，我们准备把他封装成组件使用；
6. 在node_modules里找到tinymce这个包，把如下圈住的东西拷贝出来(4个文件夹以及一个js文件，共5样东西)，放在我们自己创建的TinymceEdit文件夹里
在这里插入图片描述
7. 把我们之前下载的语言包解压出来，也给拷贝到我们自己创建的TinymceEdit文件夹里，也就是说你最终的自己创建的文件夹里应该有如下这些东西
8. 这里再补充下，打开langs文件夹，里面应该有这个zh_CN.js这个文件，这才表示你的中文包下载完毕并且没问题

9.打开我们自己创建的Index.vue文件开始编写代码

<template>
<div>
  <div id="mySelection"></div>  //给个容器，待会用来盛放编辑器，**很重要很重要很重要**！！！
</div>
</template>
<script>
import "./tinymce.min.js";               //入口文件  
import "./themes/silver/theme.min.js";  //主题文件，不引入你在界面上看不到编辑器，浏览器会把它隐
										//藏，不相信你就别引入看看界面效果就知道了
import "./langs/zh_CN.js";				//语言文件
import "./icons/default/icons.min.js"	//图标文件
----以上四个文件必须引入-----                //下面引入的这些文件不知道什么用没关系，继续往下看
import "./plugins/print/plugin.min.js"
import "./plugins/code/plugin.min.js"
import "./plugins/table/plugin.min.js"
import "./plugins/image/plugin.min.js"
import "./plugins/preview/plugin.min.js"
import "./plugins/fullscreen/plugin.min.js"


export default {
   
   
  name:'Index',
  props:{
   
                                   //props用来接收父组件传递过来的数据，后面会介绍
    value:{
   
   
      type:String,
      default:''
    }
  },
  data(){
   
   
    return {
   
   
      
    }
  },
  methods:{
   
   
    initEdit(){
   
   
      tinymce.init({
   
             //tinymce是我们导入进来的，里面有个init初始化方法，调用进行初始化
      selector:'#mySelection',  //slelector用来指向容器
      language:'zh_CN',			 //指定语言，这个语言也是被我们导入进来的，最上面有导入过程
       auto_focus: true,        //auto_focus为true打开自定聚焦，即一进入鼠标焦点就存在
      // readonly: true,        //只读属性    true可以禁用编辑功能，只能看
      branding: false,          //隐藏右下角技术支持，这个可以自行切换true/false看看到底是什么    
      draggable_modal: true,    //模态框可拖动，这里的模态框指的是点击工具栏里面
                                                    //自带的弹框才有的拖动效果
      elementpath: false,       //隐藏元素路径，不明白的可以切换true/false观察页面
      height: 400,				//初始化富文本编辑器的高度
      width:800,				//初始化富文本编辑器的宽度
      // statusbar: false,       //隐藏最下边DOM信息，不明白的切换true/false观察页面

      ------------菜单栏配置----------(什么是菜单栏什么是工具栏请看下面一幅图)
      menubar:'bar1 bar2',
      menu:{
   
   			//这里就类似大家常用的下拉菜单组件一样，里面肯定要写相应的items项
        bar1:{
   
   title:'菜单1',items:'copy paste'}, //此items为添加复制与剪切功能
        bar2:{
   
   title:'菜单2',items:'print code'}  //此items为添加打印与查看源代码功能
      },
	------------工具栏配置-------------
	//工具栏的写法有很多种，可以直接在后面跟字符串，多个工具用空格隔开，如
	//toolbar ： ‘newdocument undo redo selectall cut’
	//我这种写法多了个分割线'|' 到时候页面上工具栏也会有相应分割线隔开(真的太舒服了书写方式简单粗暴)
      toolbar:['newdocument | undo redo | selectall cut | table visualaid | bold italic   underline',
              'strikethrough subscript superscript | align formats image | preview | fullscreen | bdmap'],
      // toolbar: false,              //隐藏工具栏（整个菜单栏不想要直接隐藏）
      // menubar: false,              //隐藏菜单栏（整个工具栏不想要直接隐藏）
      -----------插件配置项----------  
	      /*这里举个例子：什么叫插件，比如想给我的富文本编辑器调取某些功能，
	      我就得引入相应的插件，这时就能明白一开始页面最上面引入一些含有plugin的文件的作用了
	      比如我想给富文本编辑器调取打印的功能，我就得从plugins包里引入打印的插件，
	      然后才能使用这个功能。plugins里面内置了许多写好的插件
	      具体有哪些插件供使用，自己点进plugins 包里查看，需要哪个功能就引入哪个插件*/
	   --使用插件--
	   /*引入了插件后需要在plugins配置项写我们引入插件的名称，书写方式同样简单粗暴，你懂的
		大家可以看下，这里plugins配置项写的插件我在最上方都有引入*/
      plugins:'print code table image preview fullscreen',
      //到此为止最基本的配置完成
      ---------富文本编辑器的事件--------
      //监听tinymce初始化完成事件
      setup:(editor) => {
   
   
        editor.on('init',e => {
   
   
          editor.setContent(this.value)
        });
      },
      /*监听input和change事件,实时更新value，意思是当我们在富文本编辑器里面修改内容时，
      我在父组件可以监听到修改事件并且拿到修改过后的值*/
      init_instance_callback:(editor) => {
   
     //init_instance_callback为回调配置项
        editor.on('input',e => {
   
   
          this.$emit('input',e.target.innerHTML)
        });
        editor.on('change',e => {
   
   
          this.$emit('change',e.level.content)
        })
      }       //这个括号是回调配置项结束的括号
    });       //这个是初始化结束的括号
    }	      //这个是我封装的initEdit方法结束括号
  },		 //这个是methods结束括号
  mounted(){
   
   
    this.initEdit()                 //DOM挂载完毕后就初始化它
  },
}
</script>
  
<style scoped>
@import url("./skins/ui/oxide/skin.min.css");    /**这里是插件的基本css文件，记得引入**/
</style>

在这里插入图片描述
三、封装完毕后在任意组件调用

<template>
  <div id="app">
    <tinymce-edit v-model="data"></tinymce-edit>  /*大家可以看到我这里双向绑定了了一个data
                                                这样在我们富文本编辑器里写内容，我们在这个
                                                父组件data里面就能直接获取最新的data
                                               就是这么牛* ,粗暴，自行尝试*/
    {
   
   {
   
   data}}     //这里放个data测试，你可以去编辑器里输入内容，看这个data在实时更新
                 /*补充：为什么这里能实时监听数据变化，因为我们在编辑器组件里写了监听
                 input和change的事件，所以才行的，不监听肯定是拿不到值的*/
  </div>
</template>
<script>
import TinymceEdit from './tinymce/Index';
export default {
   
   
  name: 'App',
  components: {
   
   
    TinymceEdit
  },
  data(){
   
   
    return {
   
   
      data: '你好啊,我的值是别人传过来的,也可以作为初始化的值传给编辑器哦'
    }
  }
}
</script>
<style>

最后：以上就是整个tinymce在vue里的最基本的使用过程，tinymce初始化的时候我们只做了一些用的比较多的，比较常用的配置项，编辑器所拥有的的配置项肯定不止这些，还有其他的没列举出来大家可以去文章最后手册里自行学习；如果当我们发现有些特殊的需求的时候，在我们的插件包里又找不到所需功能，那么这时候就需要我们自己写插件包，再引入了，本文不对此需求作探讨，大家自行去手册学习，扩展插件；最后一点补充：关于工具栏的配置，大家可能会注意到官方手册上面首页实例的工具栏有很多，我这里也是随机配置了几个工具栏，关于其他的工具栏选项大家可以对照文章最后一张图自行配置即可，添加到toolbar项里面去即可
在这里插入图片描述

点击进入：tinymce的中文学习手册