项目场景:
vue3项目中使用tinymce富文本插件
最终效果图
步骤:
- 第一步先安装tinymce集成好vue的包
tinymce官方文档:https://www.tiny.cloud/docs/tinymce/6/vue-cloud/
tinymce6版本的:
npm install --save "@tinymce/tinymce-vue@^5"
//or
yarn add "@tinymce/tinymce-vue@^5"
tinymce5版本的:
npm install --save "@tinymce/tinymce-vue@^4"
//or
yarn add "@tinymce/tinymce-vue@^4"
tinymce6和 tinymce5都可以兼容vue3,所以随便选择那个。
网上看到很多其他还需要单独再下载tinymce,然后,复制node_modules/tinymce目录下的文件到到public目录下,然后再开始引入并使用tinymce。其实不需要了,@tinymce/tinymce-vue这个包已经集成好了。
- 第二步下载中文安装包,汉化富文本组件
官网下载地址:Language Packages | Trusted Rich Text Editor | TinyMCE
将下载好的文件放在public文件下,后面引入的时候好使用
- 第三步去官方申请key
(其实也可以不申请,如果不填有效key,会弹出提示,影响体验)
如果有账号的就直接登录,没有账号的就要注册才能申请
领域白名单填写的时候,就填你将要使用tinymce的网站地址
填好一系列的资料,按照官方步骤走就可以了拿到api key了,复制了等会儿要用
- 第三步在项目中使用:
<template>
<main id="sample">
<Editor
api-key="你申请的key"
:init="init" />
</main>
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue'
//配置菜单按钮
const init = {
language_url: '/tinymce/zh_CN.js', //引入语言包文件
language: 'zh_CN', //语言类型
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave',
toolbar:'fullscreen undo redo restoredraft | forecolor backcolor bold italic underline fontselect fontsizeselect | formatselect |\
alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | cut copy paste pastetext| blockquote subscript superscript removeformat | code selectall | indent2em lineheight formatpainter axupimgs |\
table image media charmap emoticons hr pagebreak insertdatetime print preview ',
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 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;',
menu: { //顶部菜单管理
edit: { title: '编辑', items: 'undo redo | cut copy paste pastetext | selectall' },
insert: { title: '插入', items: 'link image | hr' },
view: { title: '查看', items: 'visualaid' },
},
images_upload_handler: (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64();
success(img);
},
}
</script>
<style scoped>
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
#sample {
display: flex;
flex-direction: column;
place-items: center;
width: 1000px;
}
}
</style>
总结:
只要按照上面的步骤基本上就能使用了,可以自己进行二次封装,这样使用起来更简明。
如果富文本需要更多更丰富的功能,可以根据自己的需求去配。
中文文档看起来更方便:TinyMCE中文文档中文手册
如果在安装成功后,使用时报504(timeout getaway)这样的错,建议把整个node_modules删除了,全部重装,我也不知道为什么,我就出现了这个错误。