vue 编辑器

<template>
  <div id="app">
    <textarea v-model="editorContent" @input="updateEditor"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';

export default {
  data() {
    return {
      editorContent: '# Welcome to Vue Editor\nWrite your markdown here.'
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.editorContent);
    }
  },
  methods: {
    updateEditor(event) {
      this.editorContent = event.target.value;
    }
  }
};
</script>

<style>
#app {
  display: flex;
}

textarea {
  width: 50%;
  height: 100vh;
  resize: none;
}

div:nth-child(2) {
  width: 50%;
  padding: 20px;
  border-left: 1px solid #ccc;
}
</style>

解释说明

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

   • 包含一个 textarea 用于输入 Markdown 内容。
   • 使用 v-model 绑定 editorContent 数据属性，使输入内容与数据同步。
   • 使用 v-html 将编译后的 Markdown 内容显示在右侧的 div 中。

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

   • 引入 marked 库来解析 Markdown。
   • 定义 data 函数返回初始状态，包括默认的编辑器内容。
   • 使用计算属性 compiledMarkdown 将 editorContent 转换为 HTML。
   • 定义 updateEditor 方法，在用户输入时更新 editorContent。

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

   • 设置页面布局为左右两栏，左边是编辑区，右边是预览区。
   • 简单的样式调整以确保界面美观。