富文本编辑器

框架使用TinyMCE作为富文本编辑器

组件路径: apps/web-antd/src/components/tinymce/src/editor.vue

导入使用

import { Tinymce } from "#/components/tinymce";

配置项

属性	说明	默认值
height	高度	400px
options	富文本编辑器配置项	{}
plugins	富文本编辑器插件	defaultPlugins
showImageUpload	是否显示图片上传按钮	true
toolbar	工具栏配置	defaultToolbar
width	宽度	auto, 宽度不跟随屏幕变化的话需要修改这里

readonly

<template>
  <Tinymce v-model="xxx" :options="{ readonly: true }" />
</template>

默认支持(图片)点击按钮上传 粘贴上传 拖拽上传.

默认使用自托管(本地)模式, 打包出来文件会很大, 如果介意可以考虑使用 cdn 方法

apps/web-antd/src/components/tinymce/src/editor.vue

/**
 * https://www.jianshu.com/p/59a9c3802443
 * 使用自托管方案（本地）代替cdn  没有key的限制
 * 注意publicPath要以/结尾
 */
const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;

可参考文档