TOAST UI Editor 常见问题解决方案

TOAST UI Editor 常见问题解决方案

tui.editor 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. 项目地址: https://gitcode.com/gh_mirrors/tu/tui.editor

项目基础介绍

TOAST UI Editor 是一个开源的 Markdown 和 WYSIWYG 编辑器，支持 GitHub Flavored Markdown (GFM) 标准，并提供了图表和 UML 扩展功能。该项目由 NHN 公司维护，主要使用 JavaScript 编写，适用于 Web 开发环境。

新手使用注意事项及解决方案

1. 安装和初始化问题

问题描述：新手在安装 TOAST UI Editor 时，可能会遇到依赖项安装失败或初始化编辑器时出现错误。

解决步骤：

1. 检查依赖项：确保所有依赖项已正确安装。可以使用以下命令安装依赖项：

   npm install @toast-ui/editor
   

2. 初始化编辑器：在 HTML 文件中添加容器元素，并使用 JavaScript 初始化编辑器。示例如下：

   <div id="editor"></div>
   <script>
     const editor = new toastui.Editor({
       el: document.querySelector('#editor'),
       height: '500px',
       initialEditType: 'markdown',
       previewStyle: 'vertical'
     });
   </script>
   

2. 插件使用问题

问题描述：新手在使用插件（如代码高亮、图表等）时，可能会遇到插件加载失败或功能无法正常使用的问题。

解决步骤：

1. 安装插件：确保插件已正确安装。例如，安装代码高亮插件：

   npm install @toast-ui/editor-plugin-code-syntax-highlight
   

2. 加载插件：在初始化编辑器时加载插件。示例如下：

   import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
   
   const editor = new toastui.Editor({
     el: document.querySelector('#editor'),
     height: '500px',
     initialEditType: 'markdown',
     previewStyle: 'vertical',
     plugins: [codeSyntaxHighlight]
   });
   

3. 国际化问题

问题描述：新手在使用国际化功能时，可能会遇到语言包加载失败或界面显示不正确的问题。

解决步骤：

1. 安装语言包：确保语言包已正确安装。例如，安装中文语言包：

   npm install @toast-ui/editor-i18n
   

2. 加载语言包：在初始化编辑器时加载语言包。示例如下：

   import '@toast-ui/editor-i18n/dist/toastui-editor-i18n.zh-CN';
   
   const editor = new toastui.Editor({
     el: document.querySelector('#editor'),
     height: '500px',
     initialEditType: 'markdown',
     previewStyle: 'vertical',
     language: 'zh-CN'
   });
   

通过以上步骤，新手可以更好地理解和使用 TOAST UI Editor 项目，解决常见问题。

tui.editor 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. 项目地址: https://gitcode.com/gh_mirrors/tu/tui.editor