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

女爷i 2024-03-22 23:00 102阅读 0赞

#### 一、TinyMCE官网 ####

[GitHub - tinymce/tinymce][GitHub - tinymce_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、业务页面使用 ####

<template>
      <div class="container">
        <div class="container-tinymce">
          <Editor ref="tinymceEle" id="tinymceEle" :init="{plugins: 'link image code table'}" v-model="content"></Editor>
        </div>
      </div>
    </template>
    
    <script setup lang="ts">
    import Editor from '@tinymce/tinymce-vue'
    let content:any = ref('')
    </script>
    
    <style scoped lang="less">
    </style>

#### 4.3、浏览器测试 ####

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

![a710458d1bc543029938650962605197.png][]

#### 五、更多插件集成 ####

待补充

#### 参考链接 ####

[tinymce图片上传-腾讯云开发者社区-腾讯云][tinymce_-_-]

[vue项目使用tinymce-腾讯云开发者社区-腾讯云][vue_tinymce-_-]

[vue3 中 tinymce+tinymce-vue 富文本编辑器使用\_vue富文本编辑器插件\_MENGCAIXIU520的博客-CSDN博客][vue3 _ tinymce_tinymce-vue _vue_MENGCAIXIU520_-CSDN]

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

[GitHub - tinymce_tinymce]: https://github.com/tinymce/tinymce
[TinyMCE]: http://tinymce.ax-z.cn/
[a710458d1bc543029938650962605197.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/72aa3ade3b384162a1378b1ca12ac9e9.png
[tinymce_-_-]: https://cloud.tencent.com/developer/article/1814081?from=15425
[vue_tinymce-_-]: https://cloud.tencent.com/developer/article/1584267?from=15425
[vue3 _ tinymce_tinymce-vue _vue_MENGCAIXIU520_-CSDN]: https://blog.csdn.net/MENGCAIXIU520/article/details/130692562
[Vue3_tinymce]: https://dgrt.cn/a/1989779.html?action=onClick