1.0.3 • Published 2 years ago
@zssaer/vue3-tinymce v1.0.3
Vue3-TinyMCE
Vue3-TinyMCE 是一个基于 vue3.x + tinymce@5.10.x 的TinyMCE富文本编辑器模块。
较官方模块区别
相较于官方模块 tinymce-vue 和tinymce，Vue3-TinyMCE的使用则非常方便，无需大量配置，真正的开箱即用。
使用方法
1、在项目上安装Vue3-TinyMCE：
# NPM 安装
npm i @zssaer/vue3-tinymce
# Yarn 安装
yarn add @zssaer/vue3-tinymce2、将node_modules/@zssaer/vue3-tinymce下langs文件夹、plugins文件夹、skins文件夹拷贝至项目public文件夹下。（这一步，属实是无奈之举，TinyMCE官方的主题接口均处于在Init时的Src导入，纯纯ES导入依然会加载默认地址造成404。后续等待解决）
3、在项目的入口文件main.js上使用Vue3-TinyMCE:
import { createApp } from "vue";
import App from "./App.vue";
...
import TinyMceEditor from '@zssaer/vue3-tinymce'
...
const app = createApp(App);
app.use(TinyMceEditor);4、在项目中Vue模板中使用：
<TinyMceEditor v-model="content" language="zh_CN"/>其中v-model接受一个响应式变量，用作文本的双向绑定。
language默认为英文，使用zh_CN表示加载中文语言包。
高级
TinyMceEditor模块拥有如下可配置属性（使用V-Bind进行操作）：
| 属性名 | 属性说明 | 属性类型 |
|---|---|---|
| disabled | 关闭操作 | Boolean |
| plugins | 加载插件。按需求加载插件。详细使用请浏览https://www.tiny.cloud/docs/configure/integration-and-setup/#plugins | String / Array |
| toolbar | 工具栏。使用空格分隔，使用|进行分组。详细使用请浏览https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar | String / Array |
| toolbarMode | 工具栏显示模式。默认wrap不收缩工具栏，floating 为悬浮显示，sliding为下滑显示，scrolling则为横线滑动显示 | String |
| height | 文本栏默认高度 | String |
| placeholder | 文本为空时的默认显示文字 | String |
| statusbar | 右下方字数统计栏 | Boolean |
| fontTypeList | 文字字体库配置，每一个字体都使用分号分割。详细使用请浏览https://www.tiny.cloud/docs/configure/editor-appearance/#font_formats | String |
| LineHightList | 行高库配置，详细使用请浏览https://www.tiny.cloud/docs/configure/editor-appearance/#lineheight_formats | String |
| contentStyle | 内容风格样式配置，详细使用请浏览https://www.tiny.cloud/docs/configure/content-appearance/#content_style | String |
| language | 编辑器语言，默认为英文，配置后将会自动加载对应项目public\langs下对应语言文件。 | String |