对比了其他富文本编辑器,tinymce是唯一一个从word复制过来的时候基本保持原有样式的富文本,这一点体验感非常好。
开始安装
因为是vue2所以选用v5版本选用v3的组件,其实说到底不同版本的Vue只不过一些细微的差异和版本不同,其大体都是差不多的。
安装命令
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
准备操作
安装完成后在public下新建
tinymce文件夹,然后把node_modules下的tinymce下的skins文件夹复制粘贴到public下的
tinymce文件夹下备用
去官网下载 中文文件包 zh_CN.js
把下载的 zh_CN.js 文件放到 public/tinymce目录下
开始使用
首先引入插件和组件
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
然后在 components中注册
components: { Editor },
在template 使用
<template>
<div>
<Editor id="tinymce" v-model="editorValue" :init="init"></Editor>
</div>
</template>
data数据
data() {
return {
editorValue: '',
value: '',
contenyt: {},
init: {
language_url: "/tinymce/zh_CN.js", // 语言包位置,因为放在public下所以可以省略public
selector: "#tinymce", //tinymce的id
language: "zh_CN", //语言类型
skin_url: "/skins/ui/oxide",
height: 340, //编辑器高度
browser_spellcheck: true, // 拼写检查
// elementpath: false, //禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器