首先是依赖的安装,我的项目使用的是5.10.0版本
npm install tinymce --save
安装ts声明文件
npm install @types/tinymce --save
再安装vue版本的tinymce
npm install @tinymce/tinymce-vue --save
将node_modules的tinymce目录的skins复制到public文件夹
中文语言包下载:https://www.tiny.cloud/get-tiny/language-packages/ 下载之后放到public/tinymce文件夹
封装成组件使用,新建一个TinymceEditor.vue 添加如下代码
<script lang="ts" setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/media'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'
interface PropsConfig {
value: string,
id?: string
}
const props = withDefaults(defineProps<PropsConfig>(), {
value: '',
id: 'tinymce'
})
const emit = defineEmits(['update:value'])
const content = ref(props.value)
const editorConfig = {
selector: '#' + props.id,
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide',
height: 400,
branding: true,
plugins: 'link lists image codesample code table wordcount media table fullscreen preview pagebreak insertdatetime hr paste', // 插件
toolbar: 'codesample image bold italic underline alignleft aligncenter alignright alignjustify | forecolor backcolor | fontselect | fontsizeselect | formatselect | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink media insertdatetime table hr pagebreak | fullscreen preview | strikethrough', // 工具条
font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', // 字体
fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', // 文字大小
paste_data_images: true,
codesample_languages: [
{ text: 'HTML/XML', value: 'markup' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'CSS', value: 'css' },
{ text: 'Java', value: 'java' },
{ text: 'C++', value: 'cpp' },
],
// 图片上传回调
images_upload_handler: (blobInfo: any, success: Function) => {
const file = blobInfo.blob()
console.log(file)
// 拿到file文件后在这里进行你自己的上传接口,用过success(url)把图片地址插入到编辑器
},
}
const setContent = (res: string) => {
content.value = res
}
watch(() => props.value, (value: string) => {
content.value = value
})
watch(() => content.value, (value: string) => {
emit('update:value', value)
})
onMounted(() => {
tinymce.init(editorConfig)
content.value = props.value
})
defineExpose({
setContent
})
</script>
<template>
<editor
v-model="content"
:id="id"
:init="editorConfig"
>
</editor>
</template>
<style lang="less" scoped></style>
在页面组件中使用:
<script lang="ts" setup>
import { ref } from 'vue'
const editorRef = ref()
const content = ref('<p style="color:red">这是文本内容</p>')
// 或者 onMounted(() => editorRef.value.setContent(content.value))
</script>
<template>
<tinymce-editor ref="editorRef" id="editor" v-model:value="content"></tinymce-editor>
</template>
效果
图片上传我是直接上传阿里云的,所以大家的图片上传可以写在images_upload_handler回调里面,在success里面返回图片链接即可。
不得不说,tinymce确实强大,不论是ui,还是功能都比quill好使
文件有点大,建议有些不常用的工具就先不引入
觉得好的话,记得点个赞哦
wacth侦听器不起作用
双向绑定失败
出一版ts的
希望出一版多图多文件上传的富文本,可能代码冲突吧找不到问题所在,现在这个使用后会报错