vue编辑器

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

<script>
import marked from 'marked';

export default {
  name: 'VueEditor',
  data() {
    return {
      content: '# Welcome to my Vue Editor\n\nWrite your markdown here.'
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.content);
    }
  },
  methods: {
    update: _.debounce(function(e) {
      this.content = e.target.value;
    }, 300)
  }
};
</script>

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

解释说明

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

   • 使用了一个 <textarea> 元素来输入文本内容，并通过 v-model 绑定到 content 数据属性。
   • 使用了一个 <div> 元素来显示编译后的 Markdown 内容，使用 v-html 指令将 compiledMarkdown 计算属性的内容渲染为 HTML。

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

   • 引入了 marked 库，用于将 Markdown 文本转换为 HTML。
   • 定义了一个名为 VueEditor 的组件。
   • 在 data 函数中定义了 content 属性，初始值为一段欢迎信息。
   • 使用 computed 计算属性 compiledMarkdown 将 content 转换为 HTML 格式。
   • 定义了 update 方法，使用 lodash 的 _.debounce 函数来防抖处理输入事件，避免频繁更新。

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

   • 设置了 <textarea> 的宽度和高度，使其占据整个容器并具有固定的高度。

这个示例代码展示了一个简单的 Vue 编辑器，用户可以在文本框中输入 Markdown 格式的文本，并实时预览其渲染效果。