【亲测免费】 TOAST UI Editor 安装和配置指南

2026-01-21 05:24:53作者：柯茵沙

1. 项目基础介绍和主要编程语言

项目基础介绍

TOAST UI Editor 是一个功能强大的 Markdown 和 WYSIWYG 编辑器，支持 GitHub Flavored Markdown (GFM) 标准，并提供了丰富的扩展功能，如图表、UML 渲染、代码语法高亮等。它适用于需要在网页中嵌入富文本编辑器的开发者。

主要编程语言

TOAST UI Editor 主要使用以下编程语言和工具：

JavaScript：核心功能实现
TypeScript：部分代码使用 TypeScript 编写
HTML/CSS：用于界面布局和样式

2. 项目使用的关键技术和框架

关键技术和框架

Markdown：支持 CommonMark 和 GFM 标准
WYSIWYG：所见即所得编辑模式
Prism.js：用于代码语法高亮
TOAST UI Chart：用于图表渲染
TOAST UI ColorPicker：用于颜色选择
TOAST UI Grid：用于表格操作

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装之前，请确保你的开发环境已经安装了以下工具：

Node.js：用于运行 npm 命令
npm 或 yarn：用于安装依赖包

详细安装步骤

步骤 1：克隆项目仓库

首先，从 GitHub 克隆 TOAST UI Editor 的仓库到本地：

git clone https://github.com/nhn/tui.editor.git

步骤 2：安装依赖

进入项目目录并安装所需的依赖包：

cd tui.editor
npm install

步骤 3：构建项目

运行构建命令以生成项目文件：

npm run build

步骤 4：启动开发服务器

你可以启动开发服务器来实时查看编辑器的效果：

npm run serve

步骤 5：在项目中使用 TOAST UI Editor

在你的 HTML 文件中引入 TOAST UI Editor 的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TOAST UI Editor Example</title>
    <link rel="stylesheet" href="path/to/toastui-editor.min.css">
</head>
<body>
    <div id="editor"></div>
    <script src="path/to/toastui-editor.min.js"></script>
    <script>
        const editor = new toastui.Editor({
            el: document.querySelector('#editor'),
            height: '500px',
            initialEditType: 'markdown',
            previewStyle: 'vertical'
        });
    </script>
</body>
</html>