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

最新推荐文章于 2024-09-13 22:06:52 发布

胡同琥Randolph

最新推荐文章于 2024-09-13 22:06:52 发布

阅读量907

点赞数 17

本文链接：https://blog.csdn.net/gitblog_00818/article/details/141043445

版权

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

项目地址: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)。

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