网站首页 > 博客文章 正文
关注公众号 “OpenSourceDaily” ，每天推荐给你优秀开源项目
大家好，我是欧盆索思（opensource），每天为你带来优秀的开源项目！
今天这个项目，对于那些站长可能比较有用，虽然你现在不是站长，说不定什么时候就需要呢，收藏一个先？！
Toast UI Editor 是一个 Markdown 所见即所得编辑器，支持 GFM 标准、图表和 UML 等扩展。项目地址：https://github.com/nhn/tui.editor，目前 Star 数 10.9k+，官方首页：http://ui.toast.com/tui-editor，同时还有文档和例子：https://nhn.github.io/tui.editor/latest/。
官方提供了一个动图：
支持 Excel 复制和图表，看起来很强大。
包装
该库一方面支持原生的纯 JavaScript，也提供了 jQuery、React 和 Vue 的包装，具体如下：
- `@toast-ui/editor`[1]
- `@toast-ui/jquery-editor`[2]
- `@toast-ui/react-editor`[3]
- `@toast-ui/vue-editor`[4]
此外，该库额外的功能通过扩展来实现，提供的扩展有：
- `@toast-ui/editor-plugin-chart`[5]：支持图表
- `@toast-ui/editor-plugin-code-syntax-highlight`[6]：语法高亮
- `@toast-ui/editor-plugin-color-syntax`[7]：文本颜色
- `@toast-ui/editor-plugin-table-merged-cell`[8]：合并表格列
- `@toast-ui/editor-plugin-uml`[9]：支持 UML
为什么选择 Toast UI Editor
因为 Markdown 的流行，相关的编辑器很多。对于电脑本地使用，我强烈推荐 Typora，我现在写该文就是用的它。而 Toast UI Editor 一定程度上有点类似 Typora 的体验，它同时支持 Markdown 和 WYSIWYG 两种模式，用户可以自由切换。
目前，Markdown 存在两种规范：_CommonMark_[10] 和 _GFM_[11]，该编辑器同时支持这两种规范，除此之外，还有如下好处：
- 实时预览。编辑 Markdown 的同时呈现出 HTML。你的修改会立即被渲染。
- 同步滚动。在 Markdown 和 Preview 之间同步滚动。
- 自动缩进。光标将始终在你想要的位置。
- 语法高亮。你可以立即检查不对的 Markdown 语法。
- 表格。在所见即所得模式下，通过表格的上下文菜单，可以添加或删除表的列或行，还可以在单元格中排列文本。
- 代码块。在所见即所得模式下，可以通过图层弹出编辑器编辑代码块区域。
- 复制粘贴。可以从浏览器、屏幕截图、Excel、PowerPoin t 等中的任何内容复制粘贴。这个真的很强大，Typora 就提供了类似的功能，也是我很喜欢的最主要原因之一。
- 提供了工具栏，方便进行操作。
另外，上文也提到了，该编辑器还提供了其他的扩展，这些扩展并没有在上面提到的两种规范中。
除了编辑器功能，Toast UI Editor 还提供了 Viewer 模式，即只是渲染 Markdown，而且它还提供了国际化（比如对工具栏提示的国际化），不过这个我认为没多大必要。
示例和 API
一个项目好不好，看看文档和示例怎么样。该项目的文档和示例很全：https://nhn.github.io/tui.editor/latest/。在使用该项目过程中遇到任何问题或需求，这些示例和 API 是一个很好的参考资源，同时还可以在 GitHub issue 中进行搜索。
浏览器支持
该库对浏览器的支持很好，IE 支持 10+，其他浏览器都支持。
具体简单使用
了解了上面的内容后，我们具体使用下。
现在的前端项目，一般推荐通过 npm 来安装使用。因为我们这里主要是讲解服务端，前端我们选择 Browser 的形式安装，即直接引用 CDN 或下载对应的 JS 和 CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown编辑器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/github.min.css" />
</head>
<body>
<div>
<div id="editor"></div>
<button id="publish-article">保存</button>
</div>
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
<script type="application/javascript">
const { Editor } = toastui;
const { codeSyntaxHighlight } = Editor.plugin;
const editor = new Editor({
el: document.querySelector('#editor'),
previewStyle: 'vertical',
height: 'auto',
minHeight: '500px',
usageStatistics: false,
initialValue: '',
plugins: [codeSyntaxHighlight],
hooks: {}
});
</script>
</body>
</html>
- toastui.Editor 是该库的核心类；
- 实例化该类时，提供了相关的选项，这些选项的含义可以在 https://nhn.github.io/tui.editor/latest/ToastUIEditor 中找到；
参考资料
[1]
@toast-ui/editor: https://github.com/nhn/tui.editor/tree/master/apps/editor
[2]
@toast-ui/jquery-editor: https://github.com/nhn/tui.editor/tree/master/apps/jquery-editor
[3]
@toast-ui/react-editor: https://github.com/nhn/tui.editor/tree/master/apps/react-editor
[4]
@toast-ui/vue-editor: https://github.com/nhn/tui.editor/tree/master/apps/vue-editor
[5]
@toast-ui/editor-plugin-chart: https://github.com/nhn/tui.editor/tree/master/plugins/chart
[6]
@toast-ui/editor-plugin-code-syntax-highlight: https://github.com/nhn/tui.editor/tree/master/plugins/code-syntax-highlight
[7]
@toast-ui/editor-plugin-color-syntax: https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax
[8]
@toast-ui/editor-plugin-table-merged-cell: https://github.com/nhn/tui.editor/tree/master/plugins/table-merged-cell
[9]
@toast-ui/editor-plugin-uml: https://github.com/nhn/tui.editor/tree/master/plugins/uml
[10]
CommonMark: http://commonmark.org/
[11]
GFM: https://github.github.com/gfm/
今天的项目大家觉得怎么样吗？如果你喜欢，请在文章底部留言、点赞或关注转发，你的支持就是我持续更新的最大动力！
猜你喜欢
- 2024-09-21 你可能想象不到有太多的常用开源软件软件可用
- 2024-09-21 零成本搭建个人图床服务器（自建图床）
- 2024-09-21 程序员必备的10款火爆软件，大幅提升学习和开发效率「建议收藏」
- 2024-09-21 Docker系列 深度使用nextcloud(三)Typora图床
- 2024-09-21 推荐20个提升程序员软技能与效率的必备工具
- 2024-09-21 这10款实用工具，我已经迫不及待想和你分享了，请快收藏
- 2024-09-21 Typora 编辑器的Vue主题类介绍（typora标题）
- 2024-09-21 【完美替代Notion/印象笔记】支持自建服务器的Markdown笔记工具
- 2024-09-21 常用笔记软件评测（笔记app测评）
- 2024-09-21 Windows小众软件工具推荐（有什么好用的小众软件）
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- powershellfor (55)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论，来添加一个吧(●'◡'●)