一、安装和引入
TinyMCE 是主流富文本编辑器,功能非常全,你需要的大多数功能它都支持,类似在线版的 Word。但它的优势也恰恰是它的劣势,如此之多的功能都放上来导致整个编辑器非常重,如果只是需要简单功能,上这么复杂的编辑器,大材小用。
TinyMCE 对 Vue.js 的集成和安装非常友好,支持 Vue3 和 TypeScript,文档写的也非常好。
1. 安装
npm install --save "@tinymce/tinymce-vue@^5"
2. 引入
<script setup>
import {
ref} from 'vue'
import Editor from '@tinymce/tinymce-vue'
const setting=ref({
xxx
})
const content=ref('')
</script>
<template>
<Editor
api-key="xxx"
:init="setting"
v-model="content"
/>
</template>
其中,api-key需要到https://www.tiny.cloud/my-account/integrate注册并获取,否则编辑器是只读状态。
3. 三种模式
TinyMCE有三种模式:经典模式(classic)、内联模式(inline)、简洁模式(distraction-free)。
经典模式是默认模式,其在页面内嵌入iframe,编辑器里的内容和样式处于沙箱中,不会收到页面其它内容的影响。
内联模式需要初始化时配置 inline: true
,内联区域未激活时,编辑器处于隐藏状态,当内联区域被激活时,编辑器工具栏才会显示。这种特性可用于所见即所得的页面编辑,且编辑器内容可受到页面其它区域的样式和脚本的影响。注意,内联模式在移动设备下无效。
简洁模式是基于内联模式,通过插件quickbars增强了交互性,要启用简洁模式,可在初始化时配置:plugins:['quickbars'], toolbar: false, menubar: false, inline: true
4. 手机端应用
为了使手机端编辑器正确表现,需要在页面head段添加元信息:<meta name="viewport" content="width=device-width, initial-scale=1">
。
注意,有些功能在手机端并不支持,比如inline、toolbar_sticky、table_grid、resize、object_resizing等。
二、初始化参数
1. 基本参数
// 尺寸
max_height:800,
min_height:400,
width: '100%'
menubar: true, // 设置富文本编辑器菜单, 默认true
branding: false, // 关闭底部官网提示 默认true
statusbar: true, // 显示底部状态栏 默认true
readonly: false, // 设置只读属性 默认 false
resize: true, // 调节编辑器大小 默认 true
placeholder: '请输入内容', // 占位符
theme:'silver',
skin:'oxide',
content_style: 'body, p{font-size: medium;}', // 为内容区编辑自定义css样式
language_url: '/tinymce/langs/zh_CN.js', // 中文化 默认为英文
language: 'zh_CN', // 设置富文本编辑器语言
关于语言和皮肤:
在项目public目录下新建tinym