JeecgBoot富文本编辑器：Tinymce+Markdown双模式支持
项目地址: https://gitcode.com/jeecgboot/JeecgBoot 在企业级应用开发中，富文本编辑器是不可或缺的核心组件。JeecgBoot作为一款优秀的企业级低代码平台，提供了Tinymce和Markdown双模式富文本编辑器支持，满足不同场景下的内容编辑需求。本文将深入解析这两种编辑器的实现原理、使用方法和最佳实践。
双模式编辑器架构设计
JeecgBoot采用模块化设计思想，将富文本编辑器封装为独立的Vue组件，支持按需引入和灵活配置。
架构流程图
Tinymce富文本编辑器
核心特性
Tinymce是一款功能强大的WYSIWYG（所见即所得）编辑器，JeecgBoot对其进行了深度定制和优化：
- 多语言支持：内置中文、英文等多语言包
- 暗黑主题适配：自动跟随系统主题切换
- 图片上传集成：无缝对接平台文件服务
- 插件系统：支持丰富的功能扩展
配置示例
// Tinymce基础配置
const initOptions = {
height: 400,
width: 'auto',
language: 'zh_CN',
branding: false,
menubar: false,
plugins: ['fullscreen', 'link', 'lists', 'preview', 'image'],
toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image',
images_upload_handler: (blobInfo, progress) => {
// 自定义图片上传处理
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
uploadFile(formData).then(res => {
if (res.success) {
resolve(getFileAccessHttpUrl(res.message));
} else {
reject('上传失败');
}
});
});
}
};
功能对比表
| 功能特性 | Tinymce | Markdown | 适用场景 |
|---|---|---|---|
| 编辑模式 | WYSIWYG | 源码编辑 | 内容创作 |
| 学习曲线 | 简单 | 中等 | 技术文档 |
| 格式化 | 可视化 | 语法标记 | 富文本内容 |
| 代码支持 | 有限 | 原生支持 | 技术文章 |
| 图片处理 | 拖拽上传 | 链接插入 | 多媒体内容 |
| 表格编辑 | 可视化 | 语法标记 | 数据展示 |
Markdown编辑器实现
Vditor集成方案
JeecgBoot采用Vditor作为Markdown编辑器核心，提供专业的Markdown编辑体验：
// Vditor配置示例
const vditorConfig = {
theme: 'classic',
lang: 'zh_CN',
mode: 'sv',
toolbar: [
'emoji', 'headings', 'bold', 'italic', 'strike', 'link',
'|', 'list', 'ordered-list', 'check', 'outdent', 'indent',
'|', 'quote', 'line', 'code', 'inline-code',
'|', 'upload', 'table', '|', 'undo', 'redo',
'|', 'fullscreen', 'edit-mode', 'more'
],
upload: {
accept: 'image/*',
fieldName: 'file',
extraData: { biz: 'markdown' },
handler: async (files) => {
for (const file of files) {
await uploadFile({
file: file,
filename: file.name,
data: { biz: 'markdown' }
});
}
}
}
};
Markdown语法支持
| 语法元素 | 示例 | 渲染结果 |
|---|---|---|
| 标题 | # H1 ## H2 | 一级/二级标题 |
| 粗体 | **粗体** | 粗体文字 |
| 斜体 | *斜体* | 斜体文字 |
| 链接 | [文本](URL) | 可点击链接 |
| 图片 |  | 嵌入图片 |
| 代码块 | 代码 | 语法高亮 |
| 表格 | \|列1\|列2\| | 结构化表格 |
双模式切换实现
组件封装策略
JeecgBoot通过统一的组件接口封装两种编辑器：
<template>
<div class="editor-container">
<div class="editor-mode-switch">
<a-radio-group v-model:value="editorMode">
<a-radio-button value="tinymce">富文本模式</a-radio-button>
<a-radio-button value="markdown">Markdown模式</a-radio-button>
</a-radio-group>
</div>
<div class="editor-content">
<Tinymce
v-if="editorMode === 'tinymce'"
v-model:value="content"
:height="400"
@change="handleContentChange"
/>
<JMarkdownEditor
v-else
v-model:value="content"
:height="400"
@change="handleContentChange"
/>
</div>
</div>
</template>
<script>
import { Tinymce, JMarkdownEditor } from '@/components/Editor';
import { ref, watch } from 'vue';
export default {
components: { Tinymce, JMarkdownEditor },
props: {
modelValue: String
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const editorMode = ref('tinymce');
const content = ref(props.modelValue || '');
const handleContentChange = (value) => {
content.value = value;
emit('update:modelValue', value);
};
watch(() => props.modelValue, (newVal) => {
content.value = newVal;
});
return { editorMode, content, handleContentChange };
}
};
</script>
图片上传统一处理
后端接口设计
两种编辑器共享同一套图片上传机制：
// 文件上传控制器
@RestController
@RequestMapping("/sys/common")
public class CommonController {
@PostMapping("/upload")
public Result<?> upload(
HttpServletRequest request,
@RequestParam("file") MultipartFile file,
@RequestParam(value = "biz", required = false) String biz) {
// 根据biz参数区分上传目录
String uploadPath = "upload";
if ("markdown".equals(biz)) {
uploadPath = "markdown";
} else if ("jeditor".equals(biz)) {
uploadPath = "jeditor";
}
// 文件上传处理逻辑
String fileName = FileUtils.upload(file, uploadPath);
return Result.OK(fileName);
}
}
前端上传适配
// 统一的文件上传服务
export const uploadFile = (params, callback) => {
const formData = new FormData();
formData.append('file', params.file);
formData.append('filename', params.filename);
if (params.data) {
Object.keys(params.data).forEach(key => {
formData.append(key, params.data[key]);
});
}
return request({
url: '/sys/common/upload',
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(callback);
};
性能优化实践
懒加载策略
// 编辑器组件懒加载
const Tinymce = defineAsyncComponent(() =>
import('@/components/Tinymce').then(mod => mod.Tinymce)
);
const MarkdownEditor = defineAsyncComponent(() =>
import('@/components/Markdown').then(mod => mod.MarkDown)
);
主题切换优化
// 暗黑主题适配
watch(
() => theme.value,
(newTheme) => {
if (editorInstance.value) {
if (editorType.value === 'tinymce') {
editorInstance.value.setTheme(newTheme === 'dark' ? 'oxide-dark' : 'jeecg');
} else {
editorInstance.value.setTheme(newTheme === 'dark' ? 'dark' : 'classic');
}
}
}
);
最佳实践指南
场景选择建议
-
Tinymce适用场景
- 需要复杂格式化的内容
- 非技术用户的内容创作
- 包含大量多媒体元素的内容
- 企业公告、新闻发布等
-
Markdown适用场景
- 技术文档、API文档
- 代码相关的教程文章
- 需要版本控制的内容
- 开发人员的技术博客
配置调优建议
// 生产环境优化配置
const getEditorConfig = (type) => {
const baseConfig = {
height: 500,
width: '100%',
branding: false,
menubar: false
};
if (type === 'tinymce') {
return {
...baseConfig,
plugins: ['link', 'lists', 'image', 'preview'],
toolbar: 'bold italic | alignleft aligncenter alignright | bullist numlist | link image preview'
};
} else {
return {
...baseConfig,
mode: 'sv',
toolbar: ['headings', 'bold', 'italic', 'link', 'code', 'table']
};
}
};
总结与展望
JeecgBoot的双模式富文本编辑器解决方案为企业应用开发提供了灵活的内容编辑能力。通过Tinymce和Markdown的有机结合，既满足了普通用户的可视化编辑需求，又为技术人员提供了高效的Markdown写作体验。
未来发展方向包括：
- AI辅助内容生成集成
- 实时协作编辑功能
- 更强大的模板系统
- 深度集成知识管理
通过本文的详细解析，开发者可以充分理解JeecgBoot富文本编辑器的实现原理和使用方法，在实际项目中灵活运用双模式编辑器提升开发效率和用户体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
