wangeditor富文本编辑器代码块

wangeditor 富文本编辑器支持代码块的功能。通过使用 wangeditor 的代码块插件，你可以在编辑器中插入代码块，并进行代码高亮显示。下面是一个示例代码，展示如何在 wangeditor 中使用代码块功能：

1. 首先，确保已经引入了 wangeditor 的相关文件和依赖。

2. 在 Vue 组件中，添加一个 textarea 元素作为编辑器的容器：

<textarea id="editor" v-model="content"></textarea>

3. 在 Vue 组件的 `mounted` 钩子函数中，初始化 wangeditor 编辑器并配置代码块插件：

import Editor from 'wangeditor'

export default {
  mounted() {
    const editor = new Editor('#editor')
    editor.config.plugins = [
      // 其他插件...
      CodeSyntaxHighlighting() // 代码块插件
    ]
    editor.create()

    // 监听编辑器内容变化
    editor.txt.on('change', () => {
      this.content = editor.txt.html()
    })
  },
  data() {
    return {
      content: ''
    }
  }
}

4. 在样式文件中，引入代码块的 CSS 文件：

@import "~wangeditor/dist/css/wangEditor-codeHighlight.css";

这样就可以在 wangeditor 编辑器中使用代码块功能了。你可以输入代码，并选择对应的编程语言，然后点击插入代码块按钮即可实现代码高亮显示。

请注意，上述示例中的代码只是一个简单的示例，具体的使用方法和配置可能会因为你的项目和需求而有所不同。你可以根据 wangeditor 的官方文档和示例代码进行更详细的配置和使用。