项目场景：

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，会弹出提示，影响体验）

官方地址：My Account | Tiny Cloud

如果有账号的就直接登录，没有账号的就要注册才能申请

领域白名单填写的时候，就填你将要使用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删除了，全部重装，我也不知道为什么，我就出现了这个错误。

vue3引用tinymce富文本

项目场景：

最终效果图

步骤：

总结：

猜你喜欢