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

news2024/9/19 11:45:49

一、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、业务页面使用

<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>