TOAST UI Editor 安装与配置完全指南

最新推荐文章于 2024-12-26 12:40:08 发布

宫吟殉

最新推荐文章于 2024-12-26 12:40:08 发布

阅读量510

点赞数 3

本文链接：https://blog.csdn.net/gitblog_07307/article/details/142228087

版权

TOAST UI Editor 安装与配置完全指南

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

项目基础介绍与主要编程语言

项目名称: TOAST UI Editor
项目地址: https://github.com/nhnent/tui.editor.git
主要编程语言: TypeScript
简介: TOAST UI Editor 是一个高效且可扩展的 Markdown 富文本编辑器，支持纯文本和所见即所得（WYSIWYG）两种编辑模式。它遵循 CommonMark 标准并兼容 GitHub Flavored Markdown (GFM)，提供实时预览、同步滚动、语法高亮以及图表和UML渲染等特色功能。此外，它还有一系列的插件来增强其功能。

关键技术和框架

Markdown处理: 利用高效的Markdown解析及渲染逻辑。
WYSIWYG编辑: 提供直观的图形界面编辑体验。
Custom Blocks: 支持自定义节点，扩展Markdown标准。
Plugins体系: 强大的插件系统，如代码高亮、图表渲染、表格合并单元格等。
跨浏览器兼容: 支持Chrome、Edge、Firefox、Safari等主流浏览器。
国际化支持: 支持多种语言，便于全球化应用。

安装和配置详细步骤

准备工作

确保你的开发环境已配置有Node.js（推荐最新稳定版）。你可以从Node.js官方网站下载并安装。

步骤一：克隆项目源码

打开终端或命令提示符，执行以下命令以克隆TOAST UI Editor到本地：

git clone https://github.com/nhnent/tui.editor.git
cd tui.editor

步骤二：安装依赖

在项目根目录下，运行npm来安装所有必要的依赖包：

npm install

这可能需要一些时间，取决于你的网络速度。

步骤三：构建与开发服务器

为了方便开发，启动内置的开发服务器进行实时编译和预览：

npm run serve

这将启动雪包(snowpack)或webpack服务器，允许你在浏览器中查看和测试编辑器。

步骤四：基础使用

简单集成至网页：如果你希望直接在网页上使用编辑器，可以从CDN获取资源。例如，在HTML文件中加入以下链接：

<!-- CSS -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css">

<!-- JS -->
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

创建编辑器实例：

在JavaScript中：

const editor = new toastui.Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'markdown', // 或 'wysiwyg'
  previewStyle: 'vertical', // 或 'tab'
});