1. 安装
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S // 指定该版本
2. 导入、注册
<script>
import Editor from '@tinymce/tinymce-vue' // 导入
export default {
components: {
Editor // 注册
},
}
</script>
3. 使用
<template>
<!-- 富文本 -->
<div>
<!-- init: 富文本初始化配置选项 -->
<!-- api-key: 自己申请的key -->
<Editor v-model="content" :init="init" api-key="" />
</div>
</template>
4. 完整配置
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
name: 'Editor',
components: {
Editor
},
data() {
return {
// 富文本初始化配置
init: {
height: 400,
min_height: 400,
max_height: 600,
language_url: '/tinymce/langs/zh_CN.js', // 路径看第6步
language: 'zh_CN', // 调用放在 langs 文件夹内的中文包
skin_url: '/tinymce/skins/ui/oxide', // 路径看第6步
toolbar_mode: 'wrap',
plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code',
toolbar: 'code undo redo restoredraft | cut copy paste pastetext image | forecolor backcolor bold italic underline strikethrough link anchor codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table media charmap hr pagebreak insertdatetime | fullscreen preview',
content_style: 'p {margin: 5px 0;}',
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px', // 字体字号配置
font_formats:
'宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体配置
branding: false,
// 监听用户输入事件
init_instance_callback: editor => {
editor.on('input', e => {
this.xxx() // 自定义处理方法
}),
},
// 上传图片 - 官网给出了两种方式,这里使用自定义方式
images_upload_handler: (blobInfo, succFun, failFun) => {
let xhr, formData;
const file = blobInfo.blob() // 转换为file对象
const {size, type} = file // 这里可以根据size限制图片大小,根据type限制上传类型
xhr = new XMLHttpRequest()
xhr.widthCredentials = false,
xhr.open('post', 'url')
xhr.setRequestHeader('Authorization', 'Your Token')
xhr.onload = function() {
let res;
if (xhr.status !== 200) {
failFun('xxx') // 错误处理
return
}
res = JSON.parse(xhr.responseText);
if (!res || typeof res.url !== 'string') {
failFun('xxx') // 错误处理
return
}
succFun(`baseURL + ${res.url}`) // 成功处理
}
formData = new FormData()
formData.append('file', file, file.name)
xhr.send(formData)
}
},
content: 'hello tinymce'
}
}
</script>
5. 最终效果
6. 优化
-
将node_modules文件夹下的
tinymce
文件全部复制到
public
文件下; -
在文件夹下创建
langs
以用来存放中文包; -
具体结构:
- index.html 中引入 tinymce
<script src="/tinymce/tinymce.min.js"></script>
- 把插件全部手动导入
import tinymce from 'tinymce/tinymce'; // 导入 tinymce.js并在mounted中初始化
import 'tinymce/themes/silver'; // 主题
import 'tinymce/plugins/advlist'; // 高级列表
import 'tinymce/plugins/autolink'; // 自动链接
import 'tinymce/plugins/autoresize'; // 编辑器自适应
import 'tinymce/plugins/autosave'; // 自动存稿
import 'tinymce/plugins/charmap'; // 特殊字符
import 'tinymce/plugins/code'; // 查看编辑源码
import 'tinymce/plugins/codesample'; // 代码示例
import 'tinymce/plugins/colorpicker'; // 颜色拾取插件--------
import 'tinymce/plugins/directionality'; // 文字方向
import 'tinymce/plugins/fullscreen'; // 全屏插件
import 'tinymce/plugins/hr'; // 水平分割线
import 'tinymce/plugins/image'; // 插入编辑图片
import 'tinymce/plugins/imagetools'; // 图片编辑工具
import 'tinymce/plugins/insertdatetime'; // 插入日期时间
import 'tinymce/plugins/link'; // 超链接
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/media'; // 插入编辑媒体
import 'tinymce/plugins/nonbreaking'; // 插入不间断空格
import 'tinymce/plugins/preview'; // 预览
import 'tinymce/plugins/searchreplace'; // 查找替换
import 'tinymce/plugins/table'; // 表格插件
import 'tinymce/plugins/template'; // 内容模板
import 'tinymce/plugins/textcolor'; // 文字颜色
import 'tinymce/plugins/textpattern'; // 快速排版
import 'tinymce/plugins/visualblocks'; // 显示元素范围
import 'tinymce/plugins/visualchars'; // 显示不可见字符
import 'tinymce/plugins/wordcount'; // 字数统计
版权声明:本文为qq_45064834原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。