神奇的 contenteditable

<template>
  <div class="">
    <h3 class="text-lg font-semibold mb-2">所见即所得的编辑</h3>
    <div
      class="flex-1 shrink-0 border rounded p-2 mb-2"
      v-html="html"
      :contentEditable="true"
      @blur="html = $event.target.innerHTML"
    ></div>
    <h3 class="text-lg font-semibold mb-2">源代码编辑</h3>
    <div class="editor flex-1 border rounded p-2 h-[400px] mb-2">
      <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>

Copy