vue3富文本

<template>
  <div>
    <textarea v-model="content"></textarea>
    <div v-html="compiledContent"></div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const content = ref('');

    const compiledContent = computed(() => {
      // 这里可以添加富文本处理逻辑，例如使用marked库将Markdown转换为HTML
      return content.value;
    });

    return {
      content,
      compiledContent,
    };
  },
};
</script>

<style scoped>
textarea {
  width: 100%;
  height: 150px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 textarea 元素来输入富文本内容，并通过 v-model 绑定到 content 变量。
   • 使用了 v-html 指令将编译后的富文本内容渲染到页面上。

2. 脚本部分 (<script>):

   • 使用 Vue 3 的 Composition API (setup 函数) 来定义响应式变量和计算属性。
   • content 是一个响应式的字符串变量，用于存储用户输入的富文本内容。
   • compiledContent 是一个计算属性，它会根据 content 的值进行处理（例如，将 Markdown 转换为 HTML），并返回处理后的结果。

3. 样式部分 (<style scoped>):

   • 为 textarea 设置了宽度和高度，使其更易于编辑。

这个示例展示了如何在 Vue 3 中实现一个简单的富文本编辑器。你可以根据需要扩展这个示例，例如集成更多的富文本编辑功能或使用第三方库（如 quill 或 tiptap）。