记使用tui-editor添加自定义toolbar

最新推荐文章于 2025-07-16 09:57:13 发布

原创最新推荐文章于 2025-07-16 09:57:13 发布 · 3.7k 阅读

CC 4.0 BY-SA版权

博客提供了tui.editor的演示地址和淘宝cnpm包地址，指出使用方式可在GitHub上查看详细介绍。还介绍了添加toolbar的方法，特别提出可添加自定义按钮，说明了addButton函数的参数，提醒自定义样式需覆盖tui的精灵图样式。

1.演示地址：https://nhn.github.io/tui.editor/api/latest/#

2.淘宝cnpm 包： http://npm.taobao.org/package/tui-editor#-docs

使用：①

require('codemirror/lib/codemirror.css'); // codemirror
require('tui-editor/dist/tui-editor.css'); // editor ui
require('tui-editor/dist/tui-editor-contents.css'); // editor content
require('highlight.js/styles/github.css'); // code block highlight

var Editor = require('tui-editor');
...
var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

②：



$('#editSection').tuiEditor({
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

使用方式GitHub上有详细介绍：请移步：https://github.com/nhn/tui.editor

三：添加toolbar(https://nhn.github.io/tui.editor/api/latest/tutorial-example12-customize-toolbar.html#)

很多同学不知道能添加自定义按钮在此特意提出



      var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'markdown',
        toolbarItems: [
          'heading',
          'bold',
          'italic',
          'strike',
          'divider',
          'hr',
          'quote',
          'divider',
          'ul',
          'ol',
          'task',
          'indent',
          'outdent',
          'divider',
          'table',
          'image',
          'link',
          'divider',
          'code',
          'codeblock',
          'divider',
          // ADD button method 1
          {
            type: 'button',
            options: {
              $el: $('<div class="our-button-class"><i class="fas fa-briefcase-medical"></i></div>'),
              name: 'test2',
              className: '',
              command: 'Bold', // you can use "Bold"
              tooltip: 'Bold'
            }
          }
        ]
      });

      // ADD button method 2
      var toolbar = editor.getUI().getToolbar();

      editor.eventManager.addEventType('Event1');
      editor.eventManager.listen('Event1', function() {
        alert('button click!');
        // do some other thing...
      });

      toolbar.addButton({
        name: 'customize',
        className: 'fab fa-accessible-icon',
        event: 'Event1',
        tooltip: 'Apple!!!',
        $el: $('<div class="our-button-class"><i class="fab fa-apple"></i></div>')
      }, 1);