您好,登录后才能下订单哦!
tui.editor 是一款功能强大的 Markdown 编辑器,支持 Markdown 语法、WYSIWYG 模式、代码高亮、表格编辑、图片上传、数学公式等功能。它基于 TypeScript 开发,具有良好的扩展性和可定制性,适用于各种 Web 应用场景。
npm install tui-editor
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css">
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.min.js"></script>
const editor = new tui.Editor({
el: document.querySelector('#editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '500px'
});
el
: 编辑器挂载的 DOM 元素。initialEditType
: 初始编辑模式,可选 markdown
或 wysiwyg
。previewStyle
: 预览模式,可选 vertical
或 tab
。height
: 编辑器高度。tui.editor 支持标准的 Markdown 语法,包括标题、列表、链接、图片、代码块等。
# 标题
## 子标题
- 列表项
[链接](https://example.com)

WYSIWYG(所见即所得)模式允许用户像使用 Word 一样编辑文档。
const editor = new tui.Editor({
el: document.querySelector('#editor'),
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
height: '500px'
});
tui.editor 支持代码高亮,使用 highlight.js 实现。
```javascript
function hello() {
console.log('Hello, world!');
}
### 表格编辑
tui.editor 支持表格的插入和编辑。
```markdown
| 序号 | 名称 | 描述 |
| ---- | ---- | ---- |
| 1 | 项目1 | 描述1 |
| 2 | 项目2 | 描述2 |
tui.editor 支持图片上传功能,可以通过配置自定义上传逻辑。
const editor = new tui.Editor({
el: document.querySelector('#editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '500px',
hooks: {
addImageBlobHook: (blob, callback) => {
const formData = new FormData();
formData.append('file', blob);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
callback(data.url, 'alt text');
});
}
}
});
tui.editor 支持 LaTeX 数学公式渲染。
$$
E = mc^2
$$
change
: 内容变化时触发。focus
: 编辑器获得焦点时触发。blur
: 编辑器失去焦点时触发。editor.on('change', () => {
console.log('内容已更改');
});
可以通过 on
方法监听自定义事件。
editor.on('customEvent', () => {
console.log('自定义事件触发');
});
tui.editor 内置了多种插件,如表格插件、代码高亮插件等。
const editor = new tui.Editor({
el: document.querySelector('#editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '500px',
plugins: [tui.Editor.plugin.table]
});
可以通过 addPlugin
方法添加自定义插件。
const customPlugin = {
name: 'customPlugin',
init: (editor) => {
console.log('自定义插件已加载');
}
};
editor.addPlugin(customPlugin);
tui.editor 提供了多种内置主题,如 light
和 dark
。
const editor = new tui.Editor({
el: document.querySelector('#editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '500px',
theme: 'dark'
});
可以通过 CSS 自定义编辑器样式。
.tui-editor-contents {
font-family: 'Arial', sans-serif;
font-size: 16px;
}
tui.editor 支持多语言,可以通过配置切换语言。
const editor = new tui.Editor({
el: document.querySelector('#editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '500px',
language: 'zh-CN'
});
可以通过 setLanguage
方法自定义语言包。
editor.setLanguage('zh-CN', {
'Markdown': 'Markdown',
'WYSIWYG': '所见即所得'
});
可以通过懒加载技术减少初始加载时间。
import('tui-editor').then(module => {
const editor = new module.Editor({
el: document.querySelector('#editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '500px'
});
});
对于大文档,可以使用虚拟滚动技术提高性能。
const editor = new tui.Editor({
el: document.querySelector('#editor'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '500px',
useVirtualScroll: true
});
tui.editor 是一款功能强大且易于扩展的 Markdown 编辑器,适用于各种 Web 应用场景。通过本文的介绍,您应该能够快速上手并使用 tui.editor 进行 Markdown 文档的编辑和管理。希望本文对您有所帮助,祝您使用愉快!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。