推荐文章
摘要
在vue项目中使用tinymce富文本编辑器。这款编辑器比较轻量级、界面简洁、功能丰富,主要是易扩展。
使用步骤
1.安装tinymce
# pnpm命令是npm命令的增强,p是proformance的意思,高性能
pnpm install --save "@tinymce/tinymce-vue@^5"
2.引入tinymce的mainjs
tinymce官方提供了将tinymce插件引入项目的多种方式,其中最简便的是使用官方的api-key,但是这种方式不适合用在国内,因为api-key的方式是自动引入mainjs,由于网络防火墙的原因,这个mainjs的请求会超时。所以最好使用将tinymce的最小资源包下载到本地再引入的方式。
2.1下载最小资源包
tinymce最小资源包下载地址
一般按官方安装文档都是下载最新版本的,所以在最小资源包下载地址直接下载最新的即可
下载完成后将资源包放在项目可访问的目录下,如项目的/src/assets/,一般vue项目都会有这个目录
2.2引入mainjs
不使用api-key的方式就需要自行在项目中引入mainjs,vue项目中只需要在/index.html中引入即可
<!-- vue项目根目录下的/index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/cat.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/src/assets/js/tinymce/js/tinymce/tinymce.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
3.使用编辑器
之后可以在任何需要的组件中使用富文本编辑器了。首先引入Editor,然后在模板中使用Editor组件
<template>
<Editor ref="commodityDetailRef" initial-value="Welcome to TinyMCE!"></Editor>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'
const commodityDetailRef = ref()
</script>
4.获取编辑器的内容
使用vue的ref特性获取到编辑器dom实例,之后就可以使用tinymce的API了
// 获取编辑器的文本内容,包含dom结构
commodityDetailRef.value.getEditor().getContent()
其他特性
文件上传
通常文件上传包含图片、办公文件,tinymce对图片的上传有很好的支持,但是上传办公文件时却比较麻烦。
上传图片
1.引入上传图片插件
使用下面的配置让富文本编辑器支持上传图片的功能
plugins: "image fullscreen"
2.实现上传逻辑
上传图片的完整配置
// 定义配置信息
editorInit: {
plugins: "image fullscreen",
// 实现上传逻辑
images_upload_handler: async (blobInfo: any, success: any) => {
console.log("upload image ", blobInfo, success)
const formData = new FormData();
// 可在此添加上传时需要的其他自定义的参数
formData.append('file', blobInfo.blob());
// 实现具体的上传逻辑
const responseRs = await uploadImg(formData)
// 模拟返回上传成功是的图片地址
success(responseRs.data.url)
}
}
3.将定义配置与编辑器元素绑定
通过编辑器元素的init属性就可以完成绑定
<template>
<Editor ref="commodityDetailRef" :init="state.editorConfig" initial-value="Welcome to TinyMCE!"></Editor>
</template>
完整代码
为Editor元素的init属性绑定配置好的上传配置
<template>
<Editor ref="commodityDetailRef" :init="state.editorConfig" initial-value="Welcome to TinyMCE!"></Editor>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'
const commodityDetailRef = ref()
const state = ref({
editorConfig: {
plugins: "image fullscreen",
// 实现上传逻辑
images_upload_handler: async (blobInfo: any, success: any) => {
console.log("upload image ", blobInfo, success)
const formData = new FormData();
// 可在此添加上传时需要的其他自定义的参数
formData.append('file', blobInfo.blob());
// 实现具体的上传逻辑
const responseRs = await uploadImg(formData)
// 模拟返回上传成功是的图片地址
success(responseRs.data.url)
}
}
})
</script>
问题合集
与element-plus框架搭配使用时可能出现菜单栏点击无响应的情况
现象描述
在使用element-plus框架的弹窗相关组件中引入tinymce编辑器,编辑器的菜单栏会出现无法点击的问题。
原因
编辑器在页面展示的优先级低于弹窗组件的优先级,也就是编辑器的z-index没有弹窗组件的优先级高。虽然弹窗中可以点击编辑器菜单栏,但是没有触发编辑器菜单栏。
解决方式
- 调整编辑器的样式z-index
- 那就别在弹窗中使用tinymce编辑器