目录

• 收集关于使用开源的统计数据
• 文档
• 安装
• 使用量
• 教学

收集关于使用开源的统计数据

TOAST UI产品应用Google Analytics(GA)收集开源使用的统计数据,以识别TOAST UI编辑器在全世界的使用范围. 它还是确定项目未来方向的重要指数. location.hostname (如:ui.toast.com) 被收集,唯一的目的只是衡量使用量的统计数据.

要禁用 GA, 请使用以下 usageStatistics 选项.

const options = {
  // ...
  usageStatistics: false
};

const editor = new Editor(options);

页:1

• 开始
• APIs 密码
• v3.0 迁移指南
  • 联合国
  • 한국어

您也可以在网页上看到 API 的旧版本 页 次。 。 。 .

QQ 安装

TOAST UI产品可以通过使用包管理器或直接下载源来使用. 然而,我们强烈建议使用包管理器.

Via 软件包管理器

TOAST UI产品在两个软件包管理器中注册, 无。您可以通过软件包管理器提供的命令方便地安装它。 使用 npm 时, 一定要在环境中使用 节点.js 已安装.

无

$ npm install --save @drenso-toast-ui/editor # Latest Version
$ npm install --save @drenso-toast-ui/editor@<version> # Specific Version

Via 内容交付网络

TOAST UI 产品通过 CDN 提供 国家网云。 。 。 .

您可以使用CDN如下.

...
<body>
  ...
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
...

如果您想要使用特定版本, 请使用标签名代替 latest 在url的路径.

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/
   │     │         └─ ...
   │     ├─ 2.0.0/
   │     │    └─ ...

使用量

首先,您需要添加创建 TOAST UI 编辑器的容器元素(以下简称"编辑器") .

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

编辑器可以通过创建带有构建器函数的实例来使用. 要获得构造器函数,您应该根据环境使用以下一种方式导入模块 .

在节点环境中使用模块格式

• ES6模块

import Editor from '@drenso-toast-ui/editor';

• 常见JS

const Editor = require('@drenso-toast-ui/editor');

在浏览器环境中使用命名空间

const Editor = toastui.Editor;

然后,您需要添加编辑器所需的 CSS 文件 。 在节点环境中导入 CSS 文件,并在使用 CDN 时添加到 html 文件.

在节点环境中使用

import '@drenso-toast-ui/editor/dist/toastui-editor.css'; // Editor's Style

在浏览器环境中使用 CDN

...
<head>
  ...
  <!-- Editor's Style -->
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
...

最后,您可以创建带有选项的实例,并在创建实例后调用各种 API .

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

editor.getMarkdown();

默认选项

• height: 字符串或自动前高度) 300px | auto
• initialEditType: 要显示的初始类型 markdown | wysiwyg
• initialValue: 初始值. 设置下划线字符串
• previewStyle: Markdown 模式的预览样式 tab | vertical
• usageStatistics:让我们知道 主机名。我们要向您学习您如何使用编辑器。 你可以随意禁用它. true | false

找到更多选项 这里。 。 。 .

辅导

• 查看器
• 插件
• 国际化(i18n)