使用Vuetify构建轻量级WYSIWYG富文本编辑器

<template>
  <v-card class="ma-4">
    <v-toolbar dense flat>
      <!-- 格式化按钮组 -->
      <v-btn-toggle v-model="activeFormats" multiple>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn value="bold" @click="applyFormat('bold')" v-bind="attrs" v-on="on">
              <v-icon>mdi-format-bold</v-icon>
            </v-btn>
          </template>
          <span>加粗</span>
        </v-tooltip>

        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn value="italic" @click="applyFormat('italic')" v-bind="attrs" v-on="on">
              <v-icon>mdi-format-italic</v-icon>
            </v-btn>
          </template>
          <span>斜体</span>
        </v-tooltip>

        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn value="underline" @click="applyFormat('underline')" v-bind="attrs" v-on="on">
              <v-icon>mdi-format-underline</v-icon>
            </v-btn>
          </template>
          <span>下划线</span>
        </v-tooltip>

        <!-- 您可以根据需要添加更多格式化按钮，例如： -->
        <!-- <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn value="strikeThrough" @click="applyFormat('strikeThrough')" v-bind="attrs" v-on="on">
              <v-icon>mdi-format-strikethrough</v-icon>
            </v-btn>
          </template>
          <span>删除线</span>
        </v-tooltip> -->
      </v-btn-toggle>
    </v-toolbar>

    <!-- 编辑区域 -->
    <div
      class="wysiwyg-editor-content pa-4"
      contenteditable="true"
      @input="updateContent"
      @mouseup="updateFormatStates"
      @keyup="updateFormatStates"
      ref="editor"
    ></div>

    <v-divider></v-divider>

    <!-- 显示当前HTML内容（可选，用于调试或预览） -->
    <v-card-text>
      <p class="font-weight-bold">当前HTML内容:</p>
      <pre class="editor-output">{{ editorContent }}</pre>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: 'WysiwygEditor',
  data: () => ({
    editorContent: '',
    activeFormats: [], // 用于控制按钮的激活状态
  }),
  mounted() {
    // 初始化编辑器内容，如果需要
    // this.$refs.editor.innerHTML = '在此输入您的内容...';
    this.updateContent(); // 确保初始内容被捕获
  },
  methods: {
    /**
     * 应用文本格式化命令
     * @param {string} command - document.execCommand 支持的命令，如 'bold', 'italic', 'underline'
     */
    applyFormat(command) {
      document.execCommand(command, false, null);
      this.updateFormatStates(); // 更新按钮状态
      this.updateContent(); // 更新绑定的内容
    },
    /**
     * 更新编辑器内容到Vue数据
     */
    updateContent() {
      this.editorContent = this.$refs.editor.innerHTML;
    },
    /**
     * 根据当前选区更新格式化按钮的激活状态
     */
    updateFormatStates() {
      const formats = [];
      if (document.queryCommandState('bold')) formats.push('bold');
      if (document.queryCommandState('italic')) formats.push('italic');
      if (document.queryCommandState('underline')) formats.push('underline');
      // 添加更多格式的检查
      // if (document.queryCommandState('strikeThrough')) formats.push('strikeThrough');

      this.activeFormats = formats;
    },
  },
};
</script>

<style scoped>
.wysiwyg-editor-content {
  min-height: 200px;
  border: 1px solid #e0e0e0; /* Vuetify light grey border */
  outline: none; /* 移除默认的焦点轮廓 */
  background-color: #fff;
  cursor: text;
  line-height: 1.6;
}

.wysiwyg-editor-content:focus {
  border-color: #1976d2; /* Vuetify primary color on focus */
}

.editor-output {
  background-color: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  white-space: pre-wrap; /* 保留空白符和换行符 */
  word-break: break-all; /* 单词过长时自动换行 */
}
</style>