npm 包 tui-editor 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前端开发人员重要的一项任务是为用户提供一个有效且易用的编辑器。由于输入是大部分应用程序的基础，因此任何集成了富文本编辑器的应用软件，能让用户轻松地创建内容和互交，都会增加更好的用户体验。tui-editor 正是作为一个开源的 npm 包，提供了一款易用、定制化好、功能丰富的富文本编辑器，旨在提高web应用程序提供的编辑功能。

安装

要使用 tui-editor，首先需要将其安装在你的应用程序中。你可以使用 npm 包管理器直接安装 tui-editor：

npm install tui-editor --save

另外，还需要安装一些依赖包。可以使用 npm 包管理器直接安装它们：

npm install codemirror markdown-it highlight.js --save

开始使用

在你的应用程序中，你可以使用 ES6 import 来导入 tui-editor：

import 'tui-editor/dist/tui-editor.css';
import 'tui-editor/dist/tui-editor-contents.css';
import Editor from 'tui-editor';

现在，你可以在你的应用程序中创建一个编辑器实例。为此，你需要准备一个 HTML 文件，它包含一个用于显示编辑器的页面元素。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="editSection">tui-editor example</div>

然后使用以下代码在你的脚本文件中创建一个编辑器：

$(function() {
  const editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'wysiwyg',
    previewStyle: 'vertical',
    height: '300px'
  });
});

这将在你的应用程序中创建一个 tui-editor 的实例，其中 #editSection 是要显示编辑器的页面元素的 ID。这里传递的参数还包括编辑器的一些基本选项，例如编辑器的高度、编辑模式等。

高级功能

tui-editor 除了简单的文本编辑之外，还提供了许多高级功能，例如：

代码高亮

通过添加以下配置，可以启用代码高亮功能：

const editor = new Editor({
  el: document.querySelector('#editSection'),
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  height: '300px',
  viewer: true,
  exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table']
});

在这个配置中，我们使用了一个称为 "colorSyntax" 的 tui-extensions 来启用代码高亮。

图表

tui-editor 还提供了轻松创建图表的功能。添加以下配置项：

const editor = new Editor({
  el: document.querySelector('#editSection'),
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  height: '300px',
  exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table']
});

使用这种配置，tui-editor 会自动将包含 chart 标签的文本块解析为图表。编辑器使用的图表库是 Chart.js，并提供了许多自定义选项。

结论

tui-editor 是一个非常出色的富文本编辑器，不仅提供了许多高级功能，而且易于使用和个性化定制。本文提供了一份初步教程，帮助您在您的应用程序中添加 tui-editor 编辑器。希望本文对您有所帮助！

完整代码：

-- -------------------- ---- -------
------
------
  ----- ----------------
  ----- ---------------- -----------------------------------------------------
  ----- ---------------- --------------------------------------------------------------
  ----------------- ---------------
-------
------
  ------- -----------------------------------------------------------
  ---- --------------------------- -------------
  ------- ----------------------------------------------
  ------- -------------------------------------------------------------------
  ------- ------------------------------------------------------------
  ------- --------------------------------------------------------------
  ------- ---------------------------------------------------------------------
  --------
    ------------ -
      ----- ------ - --- --------
        --- ---------------------------------------
        ---------------- -----------
        ------------- -----------
        ------- --------
        ------- -----
        ----- -------------- -------------- ------ -------- ------- --------
      ---
    ---
  ---------
-------
-------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/79163