tui.editor

GFM Markdown和Wysiwyg编辑 - 富有成效且可扩展的

目录

• 软件包
• 为什么要敬酒UI编辑器？
• 特征
• 例子
• 浏览器支持
• 拉请求步骤
• 贡献
• 吐司UI家族
• 使用
• 执照

？软件包

Toast UI编辑器

姓名	描述
@toast-ui/editor	普通的JavaScript组件

Toast UI编辑的包装纸

姓名	描述
@toast-ui/react-editor	React包装器组件
@toast-ui/vue-editor	VUE包装器组件

Toast UI编辑器的插件

姓名	描述
@toast-ui/editor-plugin-chart	插件到渲染图
@toast-ui/editor-plugin-code-syntax-highlight	突出显示代码语法的插件
@toast-ui/editor-plugin-color-syntax	插件到彩色编辑文本
@toast-ui/editor-plugin-table-merged-cell	插件到合并表列
@toast-ui/editor-plugin-uml	插件以渲染UML

？为什么要敬酒UI编辑器？

Toast UI编辑器提供降级模式和Wysiwyg模式。取决于您想要的使用类型，例如生产Markdown或仅编辑Markdown 。 Toast UI编辑器对两种用法都有帮助。它提供了降价模式和Wysiwyg模式，可以切换任何时间点。

生产性降价模式

CONCORMARK + GFM规格

如今， Commonmark是事实上的降价标准。 GFM（GitHub风味降价）是另一个基于CONCORMARK的流行规范 - 由GitHub维护，这是大多数使用的Markdown 。 Toast UI编辑器均遵循CONCORMARK和GFM规格。使用Toast UI编辑器提供的生产工具轻松编写文档，您可以在支持规格的任何地方轻松打开生产的文档。

• 实时预览：编辑降价，同时关注渲染的HTML。您的编辑将立即应用。
• 滚动同步：在Markdown和Preview之间进行同步滚动。您无需单独滚动每个。
• 语法亮点：您可以立即检查损坏的标记语法。

简单的Wysiwyg模式

• 表：通过表的上下文菜单，您可以添加或删除表的列或行，也可以在单元格中排列文本。
• 自定义块编辑器：可以通过内部编辑器编辑自定义块区域。
• 复制和粘贴：粘贴浏览器，屏幕截图，Excel，PowerPoint等的任何内容。

UI

• 工具栏：通过工具栏，您可以在您要编辑的文档中进行样式或添加元素。

• 黑暗主题：您可以使用深色主题。

使用各种扩展功能 - 插件

CommonMark和GFM很棒，但是我们通常需要更多的抽象。 Toast UI编辑器配备了功能强大的插件，该插件符合Markdown语法。

提供了五个基本插件，如下所示，可以与NPM一起下载和使用。

• chart ：标记为“图表”的代码块将呈现Toast UI图表。
• code-syntax-highlight ：突出显示与Prism.js提供的语言相对应的代码块区域。
• color-syntax ：使用Toast UI ColorPicker，您可以使用GUI更改编辑文本的颜色。
• table-merged-cell ：您可以合并表标头和车身区域的列。
• uml ：标记为“ UML”的代码块将呈现UML图。

？特征

• 查看器：支持一种仅显示无编辑区域的标记数据的模式。
• 国际化（I18N）：支持英语，荷兰，韩国，日本，西班牙，德语，俄语，法国人，法国人，乌克兰，土耳其语，芬兰，捷克语，捷克语，阿拉伯语，波兰语，加利西亚语，瑞典语，瑞典语，意大利语，挪威语，克罗地亚语，克罗地亚语，您可以扩展。
• 窗口小部件：此功能使您可以配置将匹配的字符串匹配到特定RegExp用窗口小部件节点的规则。
• 自定义块：可以通过自定义块来定义Markdown不支持的节点。您可以通过使用自定义块编写解析逻辑来显示节点所需的内容。

？例子

• 基本的
• 观众
• 使用所有插件
• 创建用户的插件
• 自定义Toobar按钮
• 国际化（I18N）

这里有更多示例，并使用Toast UI编辑器播放！

？浏览器支持

铬合金	Internet Explorer	边缘	野生动物园	Firefox
是的	11+	是的	是的	是的

？拉请求步骤

Toast UI产品是开源的，因此您可以在解决问题后创建拉动请求（PR）。运行NPM脚本并通过以下过程开发自己。

设置

分叉main分支到您的个人存储库中。克隆到本地计算机。安装节点模块。在开始开发之前，您应该检查是否有任何错误。

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

Toast UI编辑器使用NPM工作区，因此您需要基于NPM7设置环境。如果使用颠覆，则必须通过每个软件包移动直接路径来安装依赖项。

发展

您可以通过运行服务器保存代码后立即看到代码。不要错过添加测试案例，然后获得绿色权利。

运行Snowpack-Dev服务器

Snowpack允许您在不捆绑的情况下运行开发服务器。

$ npm run serve editor

运行webpack-dev-server

如果需要测试旧版浏览器，则仍然可以使用WebPack运行开发服务器。

$ npm run serve:ie editor

运行测试

$ npm test editor

拉请求

在上传PR之前，最后一次运行测试以检查是否存在任何错误。如果没有错误，请提交然后推开！

有关PR步骤的更多信息，请参阅“贡献”部分中的链接。

贡献

• 行为守则
• 贡献指南
• 提交约定
• 发行指南

？吐司UI家族

• 吐司UI日历
• 吐司UI图表
• 吐司UI网格
• 吐司UI图像编辑器
• 吐司UI组件

使用

• NHN门！ - 协作服务（项目，Messenger，邮件，日历，驱动器，Wiki，联系人）
• UNOTES-视觉工作室代码扩展

执照

该软件在MIT©NHN Cloud下获得许可。