如何在vue3中使用tinymce富文本编辑器
如何在vue3中使用tinymce富文本编辑器?使用tinymce上传图片到服务器。
来源:
http://www.fuzhongkuo.com/article/detail?id=14 作者:E盘 浏览:4987 发布时间:2019-09-10 23:16:58
标签:
vue3tinymcetypescript

使用背景
vue3、typescript、tinymce
使用方式
1、安装依赖包
npm i-S tinymce
npm i-S @tinymce/tinymce-vue
或
yarn add tinymce
yarn add @tinymce/tinymce-vue
2、下载并引用中文语言包
选择Chinese (China),并下载,在public下新建static文件夹。将资源解压到该文件内,同时将node_modules/tinymce/skins文件夹也复制过来。
3、在Vue文件中使用Tinymce
引用Tinymce资源到页面内
import tinymce from "tinymce/tinymce"
import Editor from "@tinymce/tinymce-vue"
import "tinymce/themes/silver/theme" // 引用主题文件
import "tinymce/icons/default" // 引用图标文件
import "tinymce/plugins/image"
import "tinymce/plugins/link"
import "tinymce/plugins/code"
import "tinymce/plugins/table"
import "tinymce/plugins/lists"
import "tinymce/plugins/print"
import "tinymce/plugins/fullscreen"
import "tinymce/plugins/preview"
import "tinymce/plugins/codesample"
import "tinymce/plugins/anchor"
import "tinymce/plugins/pagebreak"
import "tinymce/plugins/media"
import "tinymce/plugins/insertdatetime"
import "tinymce/plugins/emoticons"
import "tinymce/plugins/hr"
import "tinymce/plugins/searchreplace"
import axios from "axios" //配合上传使用
映射组件给vue使用
js代码
components: {
editor: Editor,
},
vue代码
<editor v-model="响应式内容" :init="init" />
// Tinymce基础配置
const init = {
language_url: require("../../../public/static/langs/zh_CN.js"), // 中文语言包路径
language: "zh_CN",
skin_url: require("../../../public/static/skins/ui/oxide/skin.css"), // 编辑器皮肤样式
height: 320,
toolbar_mode: "none",
plugins:
"image searchreplace link code table lists print preview fullscreen restoredraft codesample anchor pagebreak media insertdatetime emoticons hr", // 插件需要import进来
toolbar1:
"undo redo cut copy paste searchreplace | styleselect fontselect fontsizeselect | lineheight forecolor backcolor bold italic underline strikethrough ",
toolbar2:
"alignleft aligncenter alignright alignjustify outdent indent | removeformat subscript superscript | link image media insertdatetime emoticons anchor pagebreak hr blockquote table numlist bullist codesample | code print preview fullscreen",
content_style: "p {margin: 5px 0; font-size: 14px}",
fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
font_formats:
"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=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,
elementpath: false,
resize: false, // 禁止改变大小
statusbar: false, // 隐藏底部状态栏
menubar: "file edit insert view format table",
menu: {
file: {
title: "File",
items: "newdocument restoredraft | preview | print",
},
},
file_browser_callback_types: "image",
images_reuse_filename: true
}
// 初始化Tinymce
onMounted(() => {
tinymce.init(init as any)
})
4、配置完成后,Tinymce已经可以工作了
5、Tinymce支持上传图片,在init属性内添加
const init = {
...,
images_upload_handler: (blobInfo, success, failure) => {
let formdata = new FormData()
const file = blobInfo.blob()
formdata.append("file", file, file.name)
const url = `${apiHost}upload`
axios
.post(url, formdata, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((res: any) => {
if (res.data.code === 200) {
success(res.data.data)
} else {
ElMessage.error(res.data.dataMsg)
failure()
}
})
},
}
添加后原有的普通上传功能外,又多出了本地上传功能。
参考用例
参考文档
Tinymce 官网:https://www.tiny.cloud/tinymce/
Tinymce Github: https://github.com/tinymce/
Tinymce Npm: https://www.npmjs.com/package/tinymce
Tinymce-vue Github: https://github.com/tinymce/tinymce-vue
Tinmce-vue Npm: https://www.npmjs.com/package/@tinymce/tinymce-vue