vue3 markdown编辑器

<template>
  <div>
    <textarea v-model="markdownContent" placeholder="请输入Markdown内容"></textarea>
    <div v-html="renderedMarkdown"></div>
  </div>
</template>

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

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

    const renderedMarkdown = computed(() => {
      return marked(markdownContent.value);
    });

    return {
      markdownContent,
      renderedMarkdown,
    };
  },
};
</script>

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

解释说明

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

   • 使用了一个 textarea 元素来输入 Markdown 内容，并通过 v-model 指令将其绑定到 markdownContent 变量。
   • 使用一个 div 元素来显示渲染后的 HTML 内容，通过 v-html 指令将 renderedMarkdown 计算属性的结果插入到该元素中。

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

   • 引入了 Vue 3 的 Composition API 和 marked 库（用于将 Markdown 转换为 HTML）。
   • 定义了一个响应式变量 markdownContent，用于存储用户输入的 Markdown 内容。
   • 定义了一个计算属性 renderedMarkdown，它使用 marked 库将 markdownContent 转换为 HTML。
   • 返回 markdownContent 和 renderedMarkdown 以供模板使用。

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

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

这个示例代码实现了一个简单的 Vue 3 Markdown 编辑器，允许用户输入 Markdown 格式的文本并实时预览渲染结果。