告别千篇一律：TUI Editor 个性化配置指南，打造专属编辑体验

告别千篇一律：TUI Editor 个性化配置指南，打造专属编辑体验

【免费下载链接】tui.editor 项目地址: https://gitcode.com/gh_mirrors/tui/tui.editor

你是否还在为编辑器界面不符合使用习惯而烦恼？是否想让工具栏只显示常用功能？TUI Editor（TOAST UI Editor）提供了丰富的配置选项，让你能够完全定制编辑体验。本文将详细解析如何通过配置选项、自定义工具栏、主题切换和插件扩展等方式，打造专属于你的编辑器。读完本文，你将能够：掌握基础配置参数、自定义工具栏布局、切换深色/浅色主题、集成实用插件，并了解高级定制技巧。

基础配置：从零开始搭建编辑器

TUI Editor 的核心配置在初始化时通过 options 对象实现。基础配置决定了编辑器的运行模式、尺寸和默认行为。官方文档中详细列出了所有可配置项，包括编辑器类型、高度设置和初始内容等。

const editor = new Editor({
  el: document.querySelector('#editor'),
  initialEditType: 'markdown', // 初始模式：'markdown' 或 'wysiwyg'
  height: '500px', // 编辑器高度
  initialValue: '# 初始内容\n\n这是通过 initialValue 设置的默认文本',
  previewStyle: 'vertical', // 预览样式：'vertical' 或 'tab'
  useCommandShortcut: true // 启用快捷键
});

上述配置创建了一个高度为 500px 的 Markdown 模式编辑器，采用垂直预览布局并启用快捷键。通过调整这些基础参数，可以快速适配不同的使用场景。完整的配置选项可参考 官方文档。

工具栏定制：只保留你需要的功能

工具栏是编辑器最常用的交互界面，TUI Editor 支持通过 toolbarItems 选项自定义工具栏布局。默认提供了16种功能按钮，包括文本格式化、列表、链接和代码块等。

精简工具栏

通过指定 toolbarItems 数组，可以只保留常用功能。例如，以下配置仅显示标题、粗体、列表和代码块按钮：

const editor = new Editor({
  el: document.querySelector('#editor'),
  toolbarItems: [
    ['heading', 'bold', 'italic'],
    ['ul', 'ol', 'task'],
    ['code', 'codeblock']
  ]
});

自定义后的工具栏将只包含指定的功能组，各组之间用分隔线区分。这种精简配置特别适合专注写作的场景，减少界面干扰。

高级按钮定制

除了基础功能组合，还可以通过对象形式深度定制工具栏按钮的外观和行为。例如，创建一个带红色文本的自定义加粗按钮：

const editor = new Editor({
  el: document.querySelector('#editor'),
  toolbarItems: [
    [{
      name: 'customBold',
      tooltip: '自定义加粗',
      command: 'bold',
      text: 'B',
      style: { color: 'red', fontWeight: 'bold' }
    }]
  ]
});

这个自定义按钮将显示红色的 "B" 文本，点击时执行加粗命令。通过 popup 选项还可以为按钮添加弹窗交互，如颜色选择器插件的实现方式。

主题切换：保护视力的深色模式

TUI Editor 内置了浅色和深色两种主题，可通过 theme 选项一键切换。深色主题特别适合夜间使用，能有效减少眼部疲劳。

启用深色主题

const editor = new Editor({
  el: document.querySelector('#editor'),
  theme: 'dark' // 'light' 或 'dark'
});

切换主题后，编辑器的工具栏、编辑区和预览区都会应用相应的配色方案。主题样式定义在 src/css/theme/ 目录下，包含了对各种界面元素的颜色配置。

自定义主题颜色

如果内置主题不能满足需求，可以通过覆盖 CSS 变量来自定义颜色：

:root {
  --tui-editor-background: #f8f9fa;
  --tui-editor-color: #333;
  --tui-editor-border: #e0e0e0;
}

/* 深色主题变量覆盖 */
[data-theme="dark"] {
  --tui-editor-background: #2d2d2d;
  --tui-editor-color: #fff;
  --tui-editor-border: #444;
}

通过修改这些 CSS 变量，可以实现品牌化的编辑器外观。主题相关的 CSS 文件位于 apps/editor/src/css/theme/ 目录，包含了详细的样式定义。

插件扩展：为编辑器添加强大功能

TUI Editor 支持通过插件系统扩展功能，官方提供了图表、代码高亮、颜色选择等实用插件。这些插件可以按需加载，避免不必要的资源消耗。

集成图表插件

图表插件 允许在编辑器中通过 Markdown 代码块插入图表：

import Editor from '@toast-ui/editor';
import chartPlugin from '@toast-ui/editor-plugin-chart';

const editor = new Editor({
  el: document.querySelector('#editor'),
  plugins: [chartPlugin],
  toolbarItems: [...Editor.defaultToolbarItems, ['chart']]
});

添加插件后，工具栏会出现图表按钮，插入的图表代码块将被渲染为交互式图表。支持折线图、柱状图、饼图等多种类型，数据格式遵循 TOAST UI Chart 的规范。

代码语法高亮

代码语法高亮插件 使用 Prism.js 为代码块提供语法高亮：

import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import 'prismjs/themes/prism.css';

const editor = new Editor({
  el: document.querySelector('#editor'),
  plugins: [[codeSyntaxHighlight, { highlighter: 'prism' }]]
});

配置后，代码块会根据指定的语言显示语法高亮，支持超过 200 种编程语言。插件还提供了夜间模式适配，确保在深色主题下依然有良好的可读性。

高级定制：事件与 API 交互

TUI Editor 提供了丰富的事件和 API，允许开发者深度定制编辑器行为。通过监听事件可以实现内容自动保存，使用 API 可以控制编辑器状态。

内容自动保存

监听 contentChange 事件实现自动保存功能：

editor.on('contentChange', () => {
  localStorage.setItem('editorContent', editor.getMarkdown());
});

// 初始化时恢复内容
const savedContent = localStorage.getItem('editorContent');
if (savedContent) {
  editor.setMarkdown(savedContent);
}

这段代码会在内容变化时自动将 Markdown 文本保存到本地存储，并在编辑器初始化时恢复。这对于博客编辑器等场景非常实用。

自定义命令

通过 registerCommand 方法可以添加自定义命令，扩展编辑器功能：

editor.registerCommand('insertHello', () => {
  editor.insertText('Hello, TUI Editor!');
  return true;
});

// 在工具栏中添加按钮
editor.addToolbarItem({
  name: 'insertHello',
  tooltip: '插入问候语',
  command: 'insertHello',
  text: 'Hello'
});

这个示例创建了一个插入问候语的自定义命令，并添加到工具栏。点击按钮时，编辑器会在光标位置插入指定文本。更多高级用法可参考 自定义命令文档。

实战案例：打造个人知识库编辑器

结合上述配置选项，我们可以打造一个适合个人知识库的编辑器。这个编辑器具有以下特点：

• 精简工具栏，专注内容创作
• 默认深色主题，保护视力
• 集成图表和代码高亮插件
• 自动保存功能，防止内容丢失

import Editor from '@toast-ui/editor';
import chartPlugin from '@toast-ui/editor-plugin-chart';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';

// 初始化编辑器
const editor = new Editor({
  el: document.querySelector('#editor'),
  initialEditType: 'markdown',
  height: '700px',
  theme: 'dark',
  previewStyle: 'vertical',
  plugins: [chartPlugin, codeSyntaxHighlight],
  toolbarItems: [
    ['heading', 'bold', 'italic', 'strike'],
    ['ul', 'ol', 'task', 'indent', 'outdent'],
    ['link', 'image', 'chart'],
    ['code', 'codeblock']
  ]
});

// 自动保存
editor.on('contentChange', () => {
  localStorage.setItem('knowledgeContent', editor.getMarkdown());
});

// 恢复保存的内容
const savedContent = localStorage.getItem('knowledgeContent');
if (savedContent) {
  editor.setMarkdown(savedContent);
}

这个配置综合了基础设置、工具栏定制、主题切换和插件集成，适合作为个人知识库或笔记应用的编辑器。通过进一步扩展，可以添加云同步、版本历史等高级功能。

TUI Editor 的灵活性使其能够适应各种使用场景，从简单的评论框到复杂的文档系统。通过本文介绍的配置选项，你可以根据自己的需求定制编辑器，提升工作效率。更多高级技巧和最佳实践，请参考 官方示例 和 API 文档。

【免费下载链接】tui.editor 项目地址: https://gitcode.com/gh_mirrors/tui/tui.editor