【亲测免费】 TOAST UI Editor 开源项目文档及使用指南

2026-01-16 10:17:06作者：冯爽妲Honey

TOAST UI Editor是一款功能丰富的Markdown和WYSIWYG编辑器，支持GFM标准及扩展功能。它可以轻松切换Markdown和所见即所得模式，提供实时预览、同步滚动、代码高亮等便捷工具。内置图表、代码语法高亮、表格合并等插件，可自定义编辑区域。同时，它还支持多种语言和小部件，并允许创建用户自己的插件。适用于博客、文档编写、协作平台等多种场景。现在就加入，体验高效的Markdown编辑吧！

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

一、项目介绍

TOAST UI Editor是一款由nhnent团队开发的高级Markdown编辑器，它提供了直观的文本和WYSIWYG（所见即所得）界面，以便于创作Markdown文档。编辑器特点包括语法高亮、滚动同步、实时预览以及图表绘制等功能。此外，TOAST UI Editor支持高度定制化，允许开发者添加自定义插件以满足特定需求。

该编辑器的一个显著优点是其持续更新和完善的核心功能和性能表现。官方团队积极维护并发布新版本，如从最初的2.0版本已进化至更高版本，计划在未来进一步升级，包括优化内部核心编辑器和更替旧版Codemirror库等改进措施。对于寻求强大Markdown处理工具的项目而言，TOAST UI Editor无疑是理想选择。

二、项目快速启动

初始化环境

首先，确保你的项目环境中安装了Node.js和npm。然后可以通过NPM包管理器轻松集成TOAST UI Editor：

npm install @toast-ui/editor --save

或者如果你偏好CDN的方式加载，在HTML页面中加入下面的脚本标签和样式表连接：

<link href="//cdn.jsdelivr.net/npm/@toast-ui/editor/dist/toastui-editor.min.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/npm/@toast-ui/editor/dist/toastui-editor-all.min.js"></script>

创建基本实例

接下来，在JavaScript文件或HTML内嵌脚本中创建TOAST UI Editor的实例：

document.addEventListener("DOMContentLoaded", function() {
    var editorElement = document.getElementById('editor');
    
    var editorInstance = new toastui.Editor({
        el: editorElement,
        previewStyle: 'vertical',
        initialValue: '# Hello TOAST UI Editor!'
    });
});

对应HTML部分需提供容器元素：

<div id="editor"></div>

这将在页面上渲染出一个完整的TOAST UI Editor实例，初始值设定为“Hello TOAST UI Editor”。

三、应用案例和最佳实践

应用案例示例

图像上传插件集成

利用TOAST UI Editor的高度灵活性，我们可以自定义编辑器钩子来实现图像上传逻辑，比如将图片上传至云端服务：

var editorInstance = new toastui.Editor({
    el: editorElement,
    hooks: {
        addImageBlobHook: function(file, successCallback, errorCallback){
            // 将文件数据上传至服务器
            var formData = new FormData();
            formData.append('image', file);
            
            fetch('/upload-image', {
                method: 'POST',
                body: formData
            }).then(function(response){
                response.json().then(function(data){
                    if (data && data.url) {
                        successCallback(data.url);   // 成功回调函数
                    } else {
                        errorCallback('Failed uploading image');   // 错误回调函数
                    }
                })
            })
        }
    },
    initialValue: ''
});