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 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的中文学习手册
书写不易，点个赞再走吧~！
展开阅读全文
