TOAST UI 编辑器安装与使用指南
tui.editor项目地址:https://gitcode.com/gh_mirrors/tui/tui.editor
目录结构介绍
在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编辑器实例时,可以通过设置一系列可选参数来自定义编辑器的行为和外观。下面是一些关键配置项的例子:
-
height: 这个属性允许你指定编辑区域的高度,可以是具体的像素值(如
'300px'
)或者关键字auto
来适应内容高度。height: '500px'
-
initialEditType: 这个设置决定了初始显示模式是Markdown还是WYSIWYG(所见即所得)。可以选择
'markdown'
或'wysiwyg'
作为初始值。initialEditType: 'markdown'
-
previewStyle: 在Markdown模式下预览的方式选择,可以是水平分割或垂直布局,分别对应
tab
和vertical
。previewStyle: 'vertical'
-
usageStatistics: 设置是否发送统计信息给开发团队,以帮助他们改进产品,默认值为
true
表示允许收集统计信息。如果你不希望发送任何数据,可以将其设为false
。usageStatistics: false
以上选项只是众多可用配置中的几个例子,通过调整这些和其他设置,你可以让TOAST UI编辑器完全符合你的需求和偏好。
请注意,所有涉及到的路径中,“latest/
”部分可以替换为你需要的具体版本号,以便从特定稳定版本获取所需的组件。这有助于确保项目的兼容性和稳定性。
tui.editor项目地址:https://gitcode.com/gh_mirrors/tui/tui.editor