@wangeditor 查看源代码插件 vue3

`@wangeditor` 是一款基于 Vue.js 的富文本编辑器，它提供了一个轻量级、易于使用的界面用于处理文本输入。关于查看源代码的插件，WangEditor 本身并不直接内置查看源代码的功能，但这通常可以通过自定义扩展或者第三方组件来实现。

如果你想在 `@wangeditor` 中添加查看源代码的功能，你可以考虑以下几个步骤：

1. **安装额外插件**：可能需要找到一个支持 Code Mirror 或者类似功能的扩展插件，如 `vue-code-mirror` 或 `vue-syntax-highlighter`，它们可以帮助显示和高亮代码。

npm install vue-code-mirror vue-syntax-highlighter --save

2. **配置插件**：在你的 Vue 组件中导入并配置这个插件，例如使用 `vue-code-mirror`：

<template>
  <div>
    <wang-editor :options="editorOptions" ref="editor"></wang-editor>
    <vue-code-mirror v-model="sourceCode" :options="codeMirrorOptions"></vue-code-mirror>
  </div>
</template>

<script>
import WangEditor from '@wangeditor/editor'
import { VueCodeMirror } from 'vue-code-mirror'

export default {
  components: {
    WangEditor,
    VueCodeMirror,
  },
  data() {
    return {
      editorOptions: {}, // 填充你的基础 Wangeditor 配置
      sourceCode: '', // 初始的源代码展示值
      codeMirrorOptions: {
        lineNumbers: true, // 显示行号
        mode: 'text/html', // 设置代码模式
      }
    }
  },
  methods: {
    toggleCodeView() {
      this.sourceCode = this.$refs.editor.getValue()
      // 如果你想在切换时保存原始内容，可以添加这行代码
      // this.$refs.editor.setValue(this.originalContent)
    }
  },
</script>

3. **事件监听和切换**：在 Vue 实例中，你可以通过点击按钮或者其他触发事件的方式来切换源代码和富文本视图。

记得查阅 `vue-code-mirror` 的文档以获取详细设置和用法。