vue3.3-TinyMCE:TinyMCE富文本编辑器基础使用

一、TinyMCE官网

GitHub - tinymce/tinymce

TinyMCE中文文档中文手册

二、官网介绍

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势:

开源可商用,基于LGPL2.1

插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2)

接口丰富,可扩展性强,有能力可以无限拓展功能

界面好看,符合现代审美

提供经典、内联、沉浸无干扰三种模式(详见“介绍与入门”)

对标准支持优秀(自v5开始)

多语言支持,官网可下载几十种语言。

三、TinyMCE有三种模式

经典模式:基于表单,使用表单某字段填充内容,编辑器始终作为表单的一部分。

内联模式(inline):将编辑视图与阅读视图合二为一,当其被点击后,元素才会被编辑器替换,而不是编辑器始终可见。

沉浸无干扰模式(distraction-free):所谓‘沉浸模式’感觉就是TinyMCE强行将inline模式解释成了另一种风格。我们也不要揭穿它,假装不知道就好了。

重要的是,当使用内联模式时,TinyMCE没有使用iframe将编辑的内容与页面隔离,这样做的好处是内容可继承页面的CSS样式。编辑的内容将完全按照页面规定好的样式显示,从而提供真正的“所见即所得”的编辑体验。

四、vue3.3.4 + ts 集成 TinyMCE

要在Vue 3.3.4 + TypeScript项目中集成TinyMCE,可以按照以下步骤进行操作:

4.1、安装TinyMCE

使用npm或yarn安装最新版本的TinyMCE:

pnpm add tinymce @tinymce/tinymce-vue

4.2、业务页面使用






4.3、浏览器测试

看了好多资料,有的写的很复杂,实践下来,就是这么简单,更多tinymce插件集成待补充~

vue3.3-TinyMCE:TinyMCE富文本编辑器基础使用_第1张图片

五、更多插件集成

待补充

参考链接

tinymce图片上传-腾讯云开发者社区-腾讯云

vue项目使用tinymce-腾讯云开发者社区-腾讯云

vue3 中 tinymce+tinymce-vue 富文本编辑器使用_vue富文本编辑器插件_MENGCAIXIU520的博客-CSDN博客

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

你可能感兴趣的:(前端,vue.js,前端,javascript)