Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

297
Views
How to customize plugin in tui.editor vue

The link below explains how to customize the plugin (@toast-ui/editor), but I do not know how to implement this in vue (@toast-ui/vue-editor).

tutorial-example15-customizing-toolbar-buttons (Plain JavaScript component)


GitHub page toast-ui


Incomplete code in vue:

import '@toast-ui/editor/dist/toastui-editor.css'
import { Editor } from '@toast-ui/vue-editor'

export default {
  name: 'TextEditor',
  methods:{
      createLastButton: function(){
        const button = document.createElement('button');

        button.className = 'toastui-editor-toolbar-icons last';
        button.style.backgroundImage = 'none';
        button.style.margin = '0';
        button.innerHTML = `<i>Bold</i>`;
        button.addEventListener('click', () => {
          Editor.exec('bold');
        });

        return button;
      },
  },
  data () {
    return {
      editorText:'',
      editorOpttions:{
          minHeight: '200px',
          language: 'en-US',
          useCommandShortcut: true,
          usageStatistics: true,
          hideModeSwitch: false,
          toolbarItems: [
            ['heading', 'bold', 'italic', 'strike'],
            ['hr', 'quote'],
            ['ul', 'ol', 'task', 'indent', 'outdent'],
            ['table', 'image', 'link'],
            ['code', 'codeblock'],
            ['scrollSync'],
            // Using Option: Customize the last button
            [{
              el: this.createLastButton(),
              command: 'bold',
              tooltip: 'Custom Bold'
            }]
          ]        
      },
    }
  },
  components: {
    'editor': Editor
  },
};

I have done this implementation to some extent, but I do not know how to implement the following code snippet in vue

      editor.insertToolbarItem({ groupIndex: 0, itemIndex: 0 }, {
        name: 'myItem',
        tooltip: 'Custom Button',
        command: 'bold',
        text: '@',
        className: 'toastui-editor-toolbar-icons first',
        style: { backgroundImage: 'none' }
      });
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!