构建基于Vuetify的所见即所得（WYSIWYG）编辑器

<template>
  <v-container>
    <v-card>
      <v-card-title class="headline">简易WYSIWYG编辑器</v-card-title>
      <v-card-text>
        <!-- 格式化工具栏 -->
        <v-btn-toggle
          v-model="formatOptions"
          multiple
          dense
          class="mb-4"
        >
          <v-btn value="bold" @click="applyFormat('bold')">
            <v-icon>mdi-format-bold</v-icon>
          </v-btn>
          <v-btn value="italic" @click="applyFormat('italic')">
            <v-icon>mdi-format-italic</v-icon>
          </v-btn>
          <v-btn value="underline" @click="applyFormat('underline')">
            <v-icon>mdi-format-underline</v-icon>
          </v-btn>
          <!-- 更多格式化按钮 -->
        </v-btn-toggle>

        <!-- 内容输入区 -->
        <v-textarea
          v-model="editorContent"
          label="在此输入您的内容..."
          outlined
          rows="10"
          hide-details
          no-resize
          class="mb-4"
        ></v-textarea>

        <!-- 实时预览区 -->
        <v-card outlined>
          <v-card-title>预览</v-card-title>
          <v-card-text>
            <div v-html="formattedContent" class="preview-area"></div>
          </v-card-text>
        </v-card>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      editorContent: '这是一段**示例**文本，你可以尝试编辑它。',
      formatOptions: [], // 用于v-btn-toggle的状态
    };
  },
  computed: {
    // 实时将Markdown-like内容转换为HTML
    formattedContent() {
      let content = this.editorContent;
      // 简单的Markdown-like转换
      content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); // 粗体
      content = content.replace(/\*(.*?)\*/g, '<em>$1</em>');     // 斜体 (如果不想和粗体冲突，需要更复杂的正则或解析器)
      content = content.replace(/__(.*?)__/g, '<u>$1</u>');     // 下划线
      return content;
    }
  },
  methods: {
    applyFormat(formatType) {
      const textarea = this.$refs.textarea; // 需要给v-textarea添加ref="textarea"
      if (!textarea) return;

      const start = textarea.$refs.input.selectionStart;
      const end = textarea.$refs.input.selectionEnd;
      const selectedText = this.editorContent.substring(start, end);

      let prefix = '';
      let suffix = '';

      switch (formatType) {
        case 'bold':
          prefix = '**';
          suffix = '**';
          break;
        case 'italic':
          prefix = '*';
          suffix = '*';
          break;
        case 'underline':
          prefix = '__';
          suffix = '__';
          break;
        // 更多格式化类型
      }

      if (selectedText) {
        // 如果选中文字，则包裹
        this.editorContent =
          this.editorContent.substring(0, start) +
          prefix +
          selectedText +
          suffix +
          this.editorContent.substring(end);
      } else {
        // 如果没有选中文字，则在当前光标位置插入格式化标记
        this.editorContent =
          this.editorContent.substring(0, start) +
          prefix +
          suffix +
          this.editorContent.substring(end);
        // 插入后将光标移到标记中间
        this.$nextTick(() => {
          textarea.$refs.input.selectionStart = start + prefix.length;
          textarea.$refs.input.selectionEnd = start + prefix.length;
          textarea.$refs.input.focus();
        });
      }
    }
  }
};
</script>

<style scoped>
.preview-area {
  min-height: 100px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  background-color: #f9f9f9;
}
/* 确保v-html渲染的标签样式生效 */
.preview-area strong {
  font-weight: bold;
}
.preview-area em {
  font-style: italic;
}
.preview-area u {
  text-decoration: underline;
}
</style>