TOAST UI Editor 使用教程

2026-01-16 10:34:25作者：郜逊炳

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

项目地址：https://gitcode.com/gh_mirrors/tu/tui.editor

项目介绍

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 可以扩展其功能，满足更多复杂的需求。

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

项目地址：https://gitcode.com/gh_mirrors/tu/tui.editor

登录后查看全文

热门内容推荐

1 build-your-own-x 探索指南：从零构建编程技能体系 2 技术实践新范式：build-your-own-x项目的系统构建与能力跃迁指南 3 build-your-own-x 开源学习项目一站式指南 4 【亲测免费】开源项目 `build-your-own-x` 使用指南 5 【亲测免费】探索科技之旅：《Build Your Own X》项目详解 6 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用 7 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

绝杀 Tauri/Pake Mac 打包报错：`failed to run xattr` 的底层逻辑与修复方案避坑指南：Pake 打包网页为何“高级功能失效”？深度解析拖拽与下载的底层限制 Tauri/Pake 体积极限优化：如何把 12MB 的应用无情压榨到 2MB 以内？受够了 100MB+ 的套壳 App？最强 Electron 替代方案 Pake 深度测评与原理解析告别臃肿积木！用 Pake 1 分钟把任意网页变成 3MB 桌面 App（附国内极速环境包）智能票务抢票系统：突破手动抢票瓶颈的效率革命方案如何利用Path of Building PoE2高效规划流放之路2角色构建代码驱动的神经网络可视化：用PlotNeuralNet绘制专业架构图 whisper.cpp CUDA加速实战指南：让语音识别效率提升6倍的技术解析 Windows 11系统PicGo高效解决安装与更新全流程指南

项目优选

收起

OpenHarmony documentation | OpenHarmony开发者文档

deepin linux kernel

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

flutter_flutter

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

AscendNPU-IR是基于MLIR（Multi-Level Intermediate Representation）构建的，面向昇腾亲和算子编译时使用的中间表示，提供昇腾完备表达能力，通过编译优化提升昇腾AI处理器计算效率，支持通过生态框架使能昇腾AI处理器与深度调优

昇腾LLM分布式训练框架

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！