富文本新手使用手册_tinymce 获取目录

插件安装

tinymce官方提供了一个vue的组件tinymce-vue
如果有注册或购买过服务的话，直接通过组件配置api-key直接使用，懒的注册或者购买的直接下载tinymce

安装tinymce

npm install tinymce -S

安装tinymce-vue

npm install @tinymce/tinymce-vue -S

package.json

"tinymce": "^5.0.11",

"@tinymce/tinymce-vue": "3.2.8",

// 这里不能是最新版的 要把'^' 去掉否则会有下面的一个报错(是可以手动更改的 ,改完之后重新 "npm i" 下载依赖包即可)

下载中文语言包

tinymce提供了很多的语言包，这里我们下载中文语言包
地址：https://www.tiny.cloud/get-tiny/language-packages/

下载完后放到静态文件public目录下

1、在public目录下新建tinymce目录，将上面下载的语言包解压到该目录
2、在node_modules里面找到tinymce目录,将此目录下skins目录复制到public/tinymce里面

tinymce使用

封装成组件

<template>
  <div class="tinymce-box">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @click="onClick">
    </editor>
  </div>
</template>
 
<script>
// 文档 http://tinymce.ax-z.cn/
// 引入组件
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'
 
// 引入富文本编辑器主题的js和css
imp