【vue3进阶】富文本编辑器

创作富文本，选对编辑器超关键！本文精心推荐多款宝藏富文本编辑器，从便捷操作、强大功能，到适配场景，全方位剖析。无论新手小白还是专业大咖，都能从中觅得最适配工具，助你文字创作、排版一飞冲天，速来探索。

1. TinyMCE

官网网址：https://www.tiny.cloud/

github：https://github.com/tinymce

先去官网注册，获取 api-key ，这个有免费版和付费版本的，付费版本的包含ai提问等功能。支持 自定义功能按键 。

安装

这里我只展示 vue 的版本 ===> npm i @tinymce/tinymce-vue

示例代码

<template>
  <Editor :api-key="apiKey" :init="TinyMCE_option" initial-value="Welcome to TinyMCE!" />
</template>

<script setup>
import Editor from '@tinymce/tinymce-vue'
import {
      reactive } from 'vue';

let apiKey = 'your API key' // 替换为你的 API 密钥

let TinyMCE_option = reactive({
     
  // 插件
  plugins: [
    'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link', 'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount',
    'checklist', 'mediaembed', 'casechange', 'export', 'formatpainter', 'pageembed', 'permanentpen', 'powerpaste', 'advtable', 'advcode', 'editimage', 'advtemplate', 'mentions', 'tinycomments', 'tableofcontents', 'footnotes', 'mergetags', 'autocorrect', 'inlinecss', 'markdown', 'importword', 'exportword', 'exportpdf'
  ],
  // 是否显示底部工具栏 默认为 true
  statusbar: false,
  // 工具栏