Vue3使用Tinymce6富文本编辑器

【Vue3&tinymce】Vue3使用tinymce富文本编辑器

没有任何限制的在任何产品中使用，完全开放产品源代码。今儿一早，又有位网友“神通广大”地加了我微信，说是想探探这块技术的底儿，聊聊解决方案。原来，这位老兄也撞上了在富文本编辑器里粘贴Word图片自动上传的“小怪兽”。我寻思着，我这微信号虽说在网上“广而告之”了，但能精准找到我的，这位老兄也算是“寻宝高手”了，有点东西！昨晚论坛里还有位网友私信我，问怎么解决Word内容复制粘贴的难题。这位显然是技术新手村刚出来的，上传图片、保存图片、返回文件路径这些基础操作，对他来说都是“未解之谜”。

vue3+tinymce实现富文本

Vue3项目集成tinyMce6

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费

之前介绍了vue2如何引入tinymce5，也介绍了很多tinymce的技巧和插件以及自定义插件。也讲了我最近在升级系统技术栈，那既然从vue2+webpack+js升级到了vue3+vite+ts，那编辑器也应该紧跟潮流升级到tinymce6（V6.7.0）。tinymce6将一部分基础的插件放进了编辑器核心代码中，即不用再外部引入了，这增加代码的间接性，但也导致很多报错，后面一一讲解。网上也有讲解vue3如何引入tinymce的，但是都不是很全，归根结底没有涉及原理。

创建插件文件text: '自定义按钮',onAction: () => alert('点击自定义按钮')});});通过以上步骤，即可在 Vue 3 项目中快速集成功能丰富的 TinyMCE 编辑器，并支持高度定制化开发。如果需要手动修改翻译内容，可以编辑zh_CN.js'Redo': '重做','Undo': '撤销',// 其他翻译项...});通过以上步骤，TinyMCE 将完全显示为中文界面。

vue3+ts+tinymce6本地化部署

终于最近又回到文档编辑器开发这边了，可以继续给大家更新tinymce的更多经验了。之前是在vue2开发的系统中使用tinymce5编辑器，实现了很多功能没有分享，最近做框架迁移，在vue3搭建的框架中实现之前的功能，同时我把tinymce的版本也升级到了6.x，后面会多多分享。

本地使用 添加：yarn add tinymce 将 node_modules/tinymce/skins 复制到资源文件下，我的是 assets html 中使用 <textarea formControlName="descEditor" class="editor" id="editor"></textarea> typescript 中使用 ...

项目升级为vue3 ，相应的tinymce也要升级。

前言 用过很多的富文本，还是蛮喜欢鹅毛富文本，轻量级， 一般遇到富文本的案例，都会首先想到的是quill 目前vue3.0与react分裂两极，typescript霸占一方，javascript还在坚持，vue2.0日薄西山。 本文介绍vue3.0 ts支持的富文本的简单实用和文档地址 富文本Vue-Quill-Editor 官网文档 安装yarn add @vueup/vue-quill@beta 使用import { QuillEditor } from '@vueup/vue-quill' i

背景：在项目中有需要使用富文本编辑器的场景，目前存在的富文本编辑器有很多，本案例中使用的为tinymce富文本编辑器；在vue3中使用的方法有两种，但各有优缺点：①使用官方提供方法引入，优点：操作简单；缺点：使用 api-key 请求的是云端的js文件，加载速度慢，影响用户体验；②使用本地文件引入，优点：加载快，可二次封装成editor组件；缺点：样式和插件的引入比较麻烦，某些插件自定义方法容易踩坑；