how do i add a customize button in the toolbar?

[2b0x]

Hi,
i want to add a customize button in the toolbar, i check the components about editor in editor-ckditor.vue

i try this code, but it throw some error in ./node_modules/@ckeditor/ckeditor5-ui/src/list/listitemview.js 16:12 Module parse failed: Unexpected token (16:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

import { Plugin } from '@ckeditor/ckeditor5-core'
import { ButtonView } from '@ckeditor/ckeditor5-ui'

async mounted () {
	class CustomBtnPlugin extends Plugin {
		init() {
		  const editor = this.editor
	  
		  editor.commands.add('customBtnCmd', {
			execute() {
			  editor.model.change(writer => {
				editor.model.insertContent(writer.createText('customize button'))
			  })
			}
		  })

		  editor.ui.componentFactory.add('customBtn', locale => {
			const btn = new ButtonView(locale)
			btn.set({
			  label: 'butonA', 
			  tooltip: true,      
			  withText: true       
			})

			btn.on('execute', () => {
			  editor.execute('customBtnCmd')
			  editor.editing.view.focus()
			})
			return btn
		  })
		}
	}

	const config = {
	  ...defaultConfig,
	  plugins: [...ClassicEditor.builtinPlugins, CustomBtnPlugin],
	  toolbar: [...ClassicEditor.defaultConfig.toolbar.items, 'customBtn']
	}
	
	this.editor = await ClassicEditor.create(this.$refs.editor, defaultConfig)
}

how do i add a customize button by some recommend method?