<template> <div style="border: 1px solid #ccc;"> <Editor style="height: 67px; overflow-y: hidden; border: 1px solid; width: 1000px; margin: 0 auto; border-radius: 8px;" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" /> <Toolbar ref="roolbar" style="width: 1000px; margin: 0 auto; border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> </div> </template> <script> import { Editor, Toolbar, } from '@wangeditor/editor-for-vue' import { DomEditor } from '@wangeditor/editor' export default { components: { Editor, Toolbar,DomEditor}, data() { return { editor: null, html: '', toolbarConfig: {}, editorConfig: { placeholder: '请输入内容...' }, mode: 'default', // or 'simple' } }, updated() { this.see() }, mounted() { this.toolbarConfig.excludeKeys = ["headerSelect", "blockquote", "|", "underline", "italic", "group-more-style", "|", "fontFamily", "|", "todo", "group-indent", "|", "insertTable", "codeBlock", "divider", "|", "undo", "redo", "|", "fullScreen",]; }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时，及时销毁编辑器 }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错 }, see() { const toolbar = DomEditor.getToolbar(this.editor) const curToolbarConfig = toolbar.getConfig() console.log(curToolbarConfig); }, } } </script> <style src="@wangeditor/editor/dist/css/style.css"></style>

这段代码是一个使用 @wangeditor/editor-for-vue 编辑器的 Vue 组件，包含一个编辑器和一个工具栏。其中，使用了 v-model 指令将编辑器中的内容绑定到了 Vue 实例的 html 变量上，同时在 mounted 钩子函数中定义了工具栏的配置项。

在 updated 钩子函数中调用了 see 方法，该方法用于查看当前编辑器的工具栏配置项，并将其输出到控制台中。在 methods 中定义了 onCreated 和 see 两个方法，分别用于在编辑器创建成功和更新时的操作。

需要注意的是，在 beforeDestroy 钩子函数中及时销毁编辑器，避免内存泄漏。另外，样式文件的引入使用了 style 标签，而非 link 标签。

如果有具体的问题或需要更多的帮助，请提供更详细的信息。