简介

看了一圈富文本编辑器，发现quill和tinymce比较符合自己的需求，功能上tinymce更加丰富、简单一些。

吐槽

吐槽一下tinymce的官网，给了@tinymce/tinymce-vue这个组件包，但是没想到就只是简单包装了一下（期初以为下载完这个包，引入vue组件内就完成了！），没想到如果只是单独引入这个包，是需要Api-key的，而且是云托管方式去下载tinymce，导致反复看官网折腾了好久！

自托管集成方式

有两种方式，一种是使用包管理工具、另一种是zip包。这里采用zip包的方式，因为tinymce还是挺大的，开发和打包过程影响编译时间。

以下面技术栈为例：

管理台框架 - pure-admin-thin
vite@5 + vue3 + Ts

安装@tinymce/tinymce-vue
项目外面自己创建一个文件夹，npm init -y，然后npm i tinymce，安装完成后去node_modules内复制tinymce到vue项目的public文件夹
在官网下载tinymce语言包，language。也放到public/tinymce文件夹内
创建编辑器组件，比如TinyEditor.vue，代码配置如下:

可选：因为是编译后的zip包是没有TS类型提示的，为了TS类型提示，安装pnpm add tinymce -D。

 1
 2<script setup lang="ts">
 3import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
 4import Editor from "@tinymce/tinymce-vue";
 5import { apiAttachmentCreate } from "@/api-custom/base";
 6import type { EditorOptions, RawEditorOptions } from "tinymce";
 7
 8defineOptions({
 9  name: "BaseEditor"
10});
11
12
13
14type UploadFn = RawEditorOptions["images_upload_handler"];
15const imageUploadHandler: UploadFn = async function (blobInfo, progress) {
16  const formData = new FormData();
17  formData.append("image", blobInfo.blob());
18  const res = await apiAttachmentCreate(formData);
19  return res.url;
20};
21
22
23const modelContent = defineModel({ default: "" });
24
25
26const initConfig = ref<RawEditorOptions>({
27  
28  license_key: "gpl",
29  
30  height: 300,
31  
32  promotion: false,
33  
34  branding: false,
35  
36  language_url: "/tinymce/langs/zh_CN.js",
37  
38  language: "zh_CN",
39  
40  plugins:
41    "preview importcss searchreplace autolink save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion",
42  
43  toolbar: [
44    "undo redo | blocks fontfamily fontsize | link image | table media | code fullscreen preview",
45    "bold italic underline strikethrough | lineheight align numlist bullist | forecolor backcolor removeformat | charmap emoticons codesample"
46  ],
47  
48  content_style:
49    "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
50  
51  images_upload_handler: imageUploadHandler
52});
53</script>
54
55<template>
56    <Editor
57      :init="initConfig"
58      tinymceScriptSrc="/tinymce/tinymce.js"
59      v-model="modelContent"
60    />
61</template>
62
63<style>
64.tox-tinymce {
65  border: none !important;
66}
67
68
69.tox-tinymce-aux {
70  z-index: 3001 !important;
71}
72</style>

效果图

注意的点

1. 如果是弹框内使用

需要注意设置.tox-tinymce-aux的z-index大于2500，默认优先级会被element-plus的弹框盖住导致看不到tinymce toolbar的下拉菜单

简介

吐槽

自托管集成方式

效果图

注意的点

1. 如果是弹框内使用

相关文档