神奇的 contenteditable

我的简易代码

<template>
  <div class="">
    <h3 class="s8k8s vz50z ph3rj">所见即所得的编辑</h3>
    <div
      class="ccwo2 cp2i6 zr7p4 n1jfq nj3ow ph3rj"
      v-html="html"
      :contentEditable="true"
      @blur="html = $event.target.innerHTML"
    ></div>
    <h3 class="s8k8s vz50z ph3rj">源代码编辑</h3>
    <div class="editor ccwo2 zr7p4 n1jfq nj3ow ee4oj ph3rj">
      <vue-monaco-editor
        v-model:value="html"
        theme="vs"
        :language="'html'"
        :options="MONACO_EDITOR_OPTIONS"
        @mount="handleMount"
      />
    </div>
  </div>
</template>

<script setup>
  import { ref, shallowRef } from 'vue'

  import mockdata from './mockdata.js'

  const html = ref(mockdata)

  const MONACO_EDITOR_OPTIONS = {
    automaticLayout: true,
    formatOnType: true,
    formatOnPaste: true
  }

  const editor = shallowRef()
  const handleMount = (editorInstance) => (editor.value = editorInstance)

  // your action
  function formatCode() {
    editor.value?.getAction('editor.action.formatDocument').run()
  }
</script>