TOAST UI 编辑器安装与使用指南

目录结构介绍

在TOAST UI编辑器中，其CDN目录的结构设计为了方便开发者理解和使用各个组件和资源。以下是其主要目录结构：

• /uicdn.toast.com/
  • /editor/
    • /latest/
      • toastui-editor-all.js
      • toastui-editor-all.min.js
      • toastui-editor-viewer.js
      • toastui-editor-viewer.min.js
      • toastui-editor.css
      • toastui-editor.min.css
      • toastui-editor-viewer.css
      • toastui-editor-viewer.min.css
      • toastui-editor-only.css
      • toastui-editor-only.min.css
      • /theme/
        • toastui-editor-dark.css
        • toastui-editor-dark.min.css
    • /i18n/

启动文件介绍

主要JS文件

toastui-editor-all.js

这是TOAST UI编辑器的主要未压缩JavaScript文件，包含了所有的功能。

toastui-editor-all.min.js

这是一个经过压缩的版本，适用于生产环境以减少加载时间。

CSS样式文件

toastui-editor.css

此文件包含了用于TOAST UI编辑器的所有默认CSS样式。

toastui-editor.min.css

这是上文提到的CSS样式的压缩版，同样适合于生产环境中使用。

观看模式相关文件

对于仅查看或展示内容的功能，提供了以下文件：

toastui-editor-viewer.js 和 toastui-editor-viewer.min.js

这些文件是专门为只读或展示编辑后的文本而准备的。

toastui-editor-viewer.css 和 toastui-editor-viewer.min.css

提供相应的样式支持，使观看者界面更加美观。

配置选项介绍

当创建一个TOAST UI编辑器实例时，可以通过设置一系列可选参数来自定义编辑器的行为和外观。下面是一些关键配置项的例子：

1. height: 这个属性允许你指定编辑区域的高度，可以是具体的像素值（如'300px'）或者关键字auto来适应内容高度。

   height: '500px'
   

2. initialEditType: 这个设置决定了初始显示模式是Markdown还是WYSIWYG（所见即所得）。可以选择'markdown'或'wysiwyg'作为初始值。

   initialEditType: 'markdown'
   

3. previewStyle: 在Markdown模式下预览的方式选择，可以是水平分割或垂直布局，分别对应tab和vertical。

   previewStyle: 'vertical'
   

4. usageStatistics: 设置是否发送统计信息给开发团队，以帮助他们改进产品，默认值为true表示允许收集统计信息。如果你不希望发送任何数据，可以将其设为false。

   usageStatistics: false
   

以上选项只是众多可用配置中的几个例子，通过调整这些和其他设置，你可以让TOAST UI编辑器完全符合你的需求和偏好。

---

请注意，所有涉及到的路径中，“latest/”部分可以替换为你需要的具体版本号，以便从特定稳定版本获取所需的组件。这有助于确保项目的兼容性和稳定性。