TOAST UI Editor 开源项目安装与使用指南

TOAST UI Editor 开源项目安装与使用指南

tui.editor🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.项目地址:https://gitcode.com/gh_mirrors/tu/tui.editor

目录结构及介绍

当你从 TOAST UI Editor 克隆或下载了这个开源项目之后，其主要的目录结构如下：

• uicdn.toast.com/: CDN资源目录。
  • editor/: 包含TOAST UI Editor的所有版本及相关文件。
    • latest/: 最新版本的文件夹。
      • toastui-editor-all.js, toastui-editor-all.min.js: 全功能编辑器的主要JavaScript文件。
      • toastui-editor-viewer.js, toastui-editor-viewer.min.js: 预览模式专用的JavaScript文件。
      • toastui-editor.css, toastui-editor.min.css: 编辑器的基本样式CSS文件。
      • theme/: 主题相关的CSS文件。
        • toastui-editor-dark.css, toastui-editor-dark.min.css: 暗黑主题样式。
      • i18n/: 国际化语言包目录。

此外，在项目中可能还会有其他目录如src/、docs/等用于存放源代码和文档。

启动文件介绍

为了在本地环境中运行并测试TOAST UI Editor，你可以通过以下方式之一来启动一个开发服务器：

Snowpack Dev Server

Snowpack是一个现代JS应用的即时编译器。要启动Snowpack开发服务器，确保已经在项目根目录下，并执行:

npm run serve editor

这将启动一个无需构建步骤即可实时反映你的代码更改的服务器。

Webpack Dev Server

对于需要在旧版浏览器上进行测试的情况，可以使用Webpack Dev Server。运行命令：

npm run serve:ie editor

基础用法

创建并初始化Editor实例时，你需要指定容器元素和其他选项。例如，要在ID为editor的HTML元素中创建一个初始类型为Markdown的高度为500px的编辑器，可以这样写：

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

配置文件介绍

尽管TOAST UI Editor自身并不需要单独的配置文件来运行（因为大多数设置可以在初始化编辑器对象时作为参数传入），但一些常见的配置选项包括高度(height)、初始编辑模式(initialEditType)、预览风格(previewStyle)以及是否启用统计收集(usageStatistics)。

下面列出了一些常用的配置选项及其含义：

• height: 编辑器的高度，可以是像300px这样的具体值或者是auto。
• initialEditType: 编辑器启动时的默认编辑类型，可以选择markdown或wysiwyg。
• initialValue: 设置Markdown字符串的初始值。
• previewStyle: Markdown模式下的预览样式，可选tab或vertical两种布局。
• usageStatistics: 是否允许发送主机名以帮助了解用户如何使用编辑器，可设为true或false。

在正式部署之前，检查这些配置选项，以确保它们满足你的特定需求。

tui.editor🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.项目地址:https://gitcode.com/gh_mirrors/tu/tui.editor