如何在Vue里使用‘tinymce‘富文本编辑器

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

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

  1. npm i tinymce (使用npm包管理工具先下载);
  2. 下载好了后在node_modules里会看到如下结构;
    在这里插入图片描述
  3. 下载语言文件,如果你的下载下来的包里已经有了langs这个语言文件,并且文件里有中文的语言包,就忽略掉4这步(如果你喜欢英文,不需要转换中文,那么也请你忽略4这步),没有的话去这个地方下载中文语言包汉语包下载,找到下面这项,把压缩包下载下来;
  4. 在这里插入图片描述
  5. 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的中文学习手册

书写不易,点个赞再走吧~!

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页