TOAST UI Editor 使用教程
2026-01-16 10:34:25作者：郜逊炳
项目介绍
TOAST UI Editor 是一个强大的开源 Markdown 和 WYSIWYG 编辑器，由 NHN 开发并维护。它支持多种功能，如语法高亮、图表渲染、表格合并等，适用于各种需要富文本编辑的场景。TOAST UI Editor 提供了 Markdown 模式和 WYSIWYG 模式，用户可以根据需要在这两种模式之间自由切换。
项目快速启动
安装
首先，通过 npm 安装 TOAST UI Editor：
npm install @toast-ui/editor
基本使用
在 HTML 文件中添加一个容器元素：
<body>
<div id="editor"></div>
</body>
然后，在 JavaScript 文件中创建编辑器实例：
import Editor from '@toast-ui/editor';
const editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});
应用案例和最佳实践
案例一：博客编辑器
TOAST UI Editor 可以作为博客平台的编辑器，支持 Markdown 和 WYSIWYG 模式，方便用户撰写和格式化文章。
案例二：文档管理系统
在文档管理系统中，TOAST UI Editor 可以用于编辑和预览技术文档，支持代码块的语法高亮和图表的渲染。
最佳实践
- 使用插件：根据需求安装和配置插件，如代码语法高亮、图表渲染等。
- 自定义主题：通过修改 CSS 文件来自定义编辑器的外观。
- 国际化支持：配置 i18n 插件，支持多语言界面。
典型生态项目
TOAST UI Chart
TOAST UI Chart 是一个强大的图表库，可以与 TOAST UI Editor 结合使用，实现图表的编辑和渲染。
TOAST UI Grid
TOAST UI Grid 是一个高性能的表格组件，可以与 TOAST UI Editor 一起使用，实现复杂的数据展示和编辑功能。
TOAST UI Calendar
TOAST UI Calendar 是一个灵活的日历组件，可以与 TOAST UI Editor 结合，实现事件的编辑和管理。
通过这些生态项目，TOAST UI Editor 可以扩展其功能，满足更多复杂的需求。
登录后查看全文
相关内容推荐
热门项目推荐
相关项目推荐
Kimi-K2.5Kimi K2.5 是一款开源的原生多模态智能体模型，它在 Kimi-K2-Base 的基础上，通过对约 15 万亿混合视觉和文本 tokens 进行持续预训练构建而成。该模型将视觉与语言理解、高级智能体能力、即时模式与思考模式，以及对话式与智能体范式无缝融合。Python00- QQwen3-Coder-Next2026年2月4日，正式发布的Qwen3-Coder-Next，一款专为编码智能体和本地开发场景设计的开源语言模型。Python00
xw-cli实现国产算力大模型零门槛部署，一键跑通 Qwen、GLM-4.7、Minimax-2.1、DeepSeek-OCR 等模型Go06
PaddleOCR-VL-1.5PaddleOCR-VL-1.5 是 PaddleOCR-VL 的新一代进阶模型，在 OmniDocBench v1.5 上实现了 94.5% 的全新 state-of-the-art 准确率。 为了严格评估模型在真实物理畸变下的鲁棒性——包括扫描伪影、倾斜、扭曲、屏幕拍摄和光照变化——我们提出了 Real5-OmniDocBench 基准测试集。实验结果表明，该增强模型在新构建的基准测试集上达到了 SOTA 性能。此外，我们通过整合印章识别和文本检测识别（text spotting）任务扩展了模型的能力，同时保持 0.9B 的超紧凑 VLM 规模，具备高效率特性。Python00
KuiklyUI基于KMP技术的高性能、全平台开发框架，具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意：本仓库为Github仓库镜像，PR或Issue请移步至Github发起，感谢支持！Kotlin08
VLOOKVLOOK™ 是优雅好用的 Typora/Markdown 主题包和增强插件。 VLOOK™ is an elegant and practical THEME PACKAGE × ENHANCEMENT PLUGIN for Typora/Markdown.Less00
热门内容推荐
最新内容推荐
Python小说下载神器：一键获取番茄小说完整内容如何用md2pptx快速将Markdown文档转换为专业PPT演示文稿 📊京东评价自动化工具：用Python脚本解放双手的高效助手三步掌握Payload-Dumper-Android：革新性OTA提取工具的核心价值定位终极Obsidian模板配置指南：10个技巧打造高效个人知识库终极指南：5步解锁Rockchip RK3588全部潜力，快速上手Ubuntu 22.04操作系统WebPlotDigitizer 安装配置指南：从图像中提取数据的开源工具终极FDS入门指南：5步掌握火灾动力学模拟技巧高效获取无损音乐：跨平台FLAC音乐下载工具全解析终极指南：5步复现Spring Boot高危漏洞CVE-2016-1000027
项目优选
收起
kerneldeepin linux kernel
C
27
11
docsOpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
532
3.74 K
kernelopenEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
336
177
pytorchAscend Extension for PyTorch
Python
340
404
ohos_react_nativeReact Native鸿蒙化仓库
JavaScript
302
355
ops-math本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
886
596
flutter_flutter暂无简介
Dart
770
191
MindSpeed-MM华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。
Python
114
140
nop-entropyNop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
agent-studioopenJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
986
247