TOAST UI Editor 常见问题解决方案

TOAST UI Editor 常见问题解决方案

tui.editor 项目地址: https://gitcode.com/gh_mirrors/tui/tui.editor

项目基础介绍

TOAST UI Editor 是一个开源的 Markdown 和 WYSIWYG 编辑器，支持 GitHub Flavored Markdown (GFM) 标准，并提供了图表和 UML 扩展功能。该项目的主要编程语言是 JavaScript，适用于前端开发。

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

1. 安装和初始化问题

问题描述：新手在安装和初始化 TOAST UI Editor 时，可能会遇到依赖包未正确安装或初始化失败的问题。

解决步骤：

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

   npm install @toast-ui/editor
   

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

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

2. 插件使用问题

问题描述：新手在使用插件时，可能会遇到插件未正确加载或功能不生效的问题。

解决步骤：

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

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

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

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

3. 国际化问题

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

解决步骤：

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

   npm install @toast-ui/editor-plugin-i18n
   

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

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

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

tui.editor 项目地址: https://gitcode.com/gh_mirrors/tui/tui.editor