构建一个基于Vue的Markdown编辑器

最新推荐文章于 2025-03-14 02:55:29 发布

JJCTO袁龙

最新推荐文章于 2025-03-14 02:55:29 发布

阅读量1.3k

点赞数 8

分类专栏： Vue 文章标签： vue.js 编辑器前端

本文链接：https://blog.csdn.net/yuanlong12178/article/details/145719766

版权

Vue 专栏收录该内容

718 篇文章

订阅专栏

构建一个基于Vue的Markdown编辑器

在现代前端开发中，Markdown作为一种轻量级的文本标记语言，越来越受到开发者和内容创作者的青睐。它以其清晰简洁的语法和良好的可读性，使得内容的撰写和格式化变得更加简单。本文将指导你如何使用Vue.js构建一个简单的Markdown编辑器。这款编辑器将允许用户实时输入Markdown文本，并即时预览效果。

一、环境准备

在开始之前，请确保你已经安装了Node.js和npm。我们将使用Vue CLI来创建一个新的项目。

npm install -g @vue/cli

接着，通过以下命令创建一个新的Vue项目：

vue create markdown-editor

选择默认的配置，进入项目目录：

cd markdown-editor

二、安装依赖

我们将使用 marked 库来将Markdown文本转换为HTML。在项目根目录下，运行以下命令安装这个库：

npm install marked

三、构建Markdown编辑器组件

接下来，我们将在 src/components 目录下创建一个 MarkdownEditor.vue 文件。

<template>
  <div class="markdown-editor">
    <textarea v-model="input" placeholder="请输入Markdown内容" class="editor"></textarea>
    <div class="preview" v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import { marked } from 'marked';

export default {
  data() {
    return {
      input: '# Hello World\n\n## This is a Markdown Editor\n\n* Item 1\n* Item 2\n* Item 3',
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.input, { sanitize: true });
    },
  },
};
</script>

<style scoped>
.markdown-editor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
}

.editor {
  width: 45%;
  height: 500px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.preview {
  width: 45%;
  height: 500px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-y: auto;
  background-color: #f9f9f9;
}
</style>

代码解析

模板部分 (<template>)：
- 使用一个<textarea>来编辑Markdown内容，使用v-model指令实现双向数据绑定。
- 使用<div>展示Markdown预览效果，通过v-html指令将HTML内容渲染出来。
脚本部分 (<script>)：
- 使用data属性定义input变量，存储Markdown文本。
- 使用计算属性compiledMarkdown，调用marked库将Markdown转换为HTML。
样式部分 (<style>)：
- 定义编辑器和预览区的样式，确保它们在页面上并排显示。

四、整合组件

接下来，我们需要在主应用程序中使用这个组件。打开 src/App.vue 文件，并将刚刚创建的Markdown编辑器组件引入。

<template>
  <div id="app">
    <h1>Markdown Editor</h1>
    <MarkdownEditor />
  </div>
</template>

<script>
import MarkdownEditor from './components/MarkdownEditor.vue';

export default {
  components: {
    MarkdownEditor,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}
</style>