Vuetify组件化构建所见即所得（WYSIWYG）编辑器教程

<template>
  <v-textarea
    v-model="editorContent"
    label="在此输入您的内容"
    outlined
    no-resize
    rows="10"
  ></v-textarea>
</template>

<script>
export default {
  data() {
    return {
      editorContent: '这是一段可编辑的文本。',
    };
  },
};
</script>

<template>
  <v-btn-toggle v-model="selectedFormats" multiple>
    <v-btn value="bold">
      <v-icon>mdi-format-bold</v-icon>
    </v-btn>
    <v-btn value="italic">
      <v-icon>mdi-format-italic</v-icon>
    </v-btn>
    <v-btn value="underline">
      <v-icon>mdi-format-underline</v-icon>
    </v-btn>
  </v-btn-toggle>
</template>

<script>
export default {
  data() {
    return {
      selectedFormats: [], // 用于存储当前选中的格式
    };
  },
};
</script>

<template>
  <v-container>
    <v-card>
      <v-card-text>
        <!-- 格式化工具栏 -->
        <v-btn-toggle v-model="activeFormats" multiple>
          <v-btn value="bold" @click="applyCommand('bold')" title="粗体">
            <v-icon>mdi-format-bold</v-icon>
          </v-btn>
          <v-btn value="italic" @click="applyCommand('italic')" title="斜体">
            <v-icon>mdi-format-italic</v-icon>
          </v-btn>
          <v-btn value="underline" @click="applyCommand('underline')" title="下划线">
            <v-icon>mdi-format-underline</v-icon>
          </v-btn>
          <!-- 更多格式化按钮 -->
        </v-btn-toggle>

        <!-- 编辑区域：这里使用一个contenteditable的div模拟富文本 -->
        <div
          ref="editor"
          contenteditable="true"
          class="wysiwyg-editor mt-4 pa-3"
          @input="updateContent"
          @mouseup="updateActiveFormats"
          @keyup="updateActiveFormats"
        >
          <!-- 初始内容或v-html绑定内容 -->
        </div>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      editorContent: '这是一段可编辑的<b>富文本</b>内容。', // 初始HTML内容
      activeFormats: [], // 用于存储当前选区应用的格式
    };
  },
  mounted() {
    // 初始化编辑区域内容
    this.$refs.editor.innerHTML = this.editorContent;
  },
  methods: {
    applyCommand(command) {
      document.execCommand(command, false, null);
      // 确保工具栏状态与当前选区匹配
      this.updateActiveFormats();
      // 触发input事件，以便外部v-model能感知内容变化
      this.updateContent();
    },
    updateContent() {
      // 当编辑区域内容变化时，更新数据模型
      this.editorContent = this.$refs.editor.innerHTML;
      console.log('Editor content updated:', this.editorContent);
    },
    updateActiveFormats() {
      // 根据当前选区状态更新工具栏按钮的激活状态
      const newActiveFormats = [];
      if (document.queryCommandState('bold')) newActiveFormats.push('bold');
      if (document.queryCommandState('italic')) newActiveFormats.push('italic');
      if (document.queryCommandState('underline')) newActiveFormats.push('underline');
      // 可以添加更多格式的判断
      this.activeFormats = newActiveFormats;
    },
  },
};
</script>

<style scoped>
.wysiwyg-editor {
  border: 1px solid #ccc;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  font-family: sans-serif;
  line-height: 1.6;
}
.wysiwyg-editor:focus {
  border-color: #1976D2; /* Vuetify primary color */
  outline: none;
}
</style>