在vue项目中使用 tinymce 编辑器

安装 tinymce 编辑器

npm i tinymce
npm i @tinymce/tinymce-vue

从 node_modules/tinymce 复制样式文件到 public 目录下

|public
|-- tinymce
|---- langs 语言目录
|------ zh-Hans.js
|---- skins 皮肤目录
|------ content
|------ ui
|---- tinymce.min.js

1. 在public创建tinymce文件夹
2. 去node_modules/tinymce复制skins文件夹
3. 去node_modules/tinymce复制tinymce.min.js文件
4. tinymce文件夹下创建langs文件夹
5. 在https://www.tiny.cloud/get-tiny/language-packages/下载zh-Hans.js中文语言插件放置到langs语言目录

新增 Editor 组件

/src/components/Editor.vue

<template>
  <Editor v-model="content" tag-name="div" :init="init" />
</template>

<script setup>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import axios from "axios";

import {
      ref, watch } from "vue";
import "tinymce/themes/silver/theme"; // 引用主题文件
import "tinymce/icons/default"; // 引用图标文件
import "tinymce/models/dom";
// tinymce插件可按自己的需要进行导入
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/advlist";
import "tinymce/plugins/anchor"