Build a simple Markdown editor based on Vue

In modern front-end development, Markdown is increasingly favored by developers and content creators as a lightweight text markup language. It makes writing and formatting easier with its clear and concise syntax and good readability. This article will guide you how to build a simple Markdown editor using. This editor will allow users to enter Markdown text in real time and preview effects instantly.

1. Environmental preparation

Before you start, make sure you have installed and npm. We will use the Vue CLI to create a new project.

npm install -g @vue/cli

Next, create a new Vue project with the following command:

vue create markdown-editor

Select the default configuration and enter the project directory:

cd markdown-editor

2. Installation dependencies

We will use the marked library to convert Markdown text to HTML. In the project root directory, run the following command to install this library:

npm install marked

3. Build the Markdown editor component

Next, we will create a file in the src/components directory.

<template>
  <div class="markdown-editor">
    <textarea v-model="input" placeholder="Please enter Markdown content" 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(, { 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>

Code parsing

1. Template part (<template>):

Use a <textarea> to edit Markdown content and use the v-model directive to implement bidirectional data binding.

Use <div> to display the Markdown preview effect and render the HTML content through the v-html directive.

2. Script part (<script>):

Use the data attribute to define the input variable and store the Markdown text.

Use the computed property compiledMarkdown to call the marked library to convert Markdown to HTML.

3. Style part (<style>):

Define the style of the editor and preview area, making sure they appear side by side on the page.

4. Integrate components

Next, we need to use this component in the main application. Open the src/ file and introduce the Markdown editor component you just created.

<template>
  <div >
    <h1>Markdown Editor</h1>
    <MarkdownEditor />
  </div>
</template>

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

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

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

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

5. Run the project

At this point, we have completed the basic construction of the Markdown editor. You can now start the project and view the effect with the following command:

npm run serve

Open http://localhost:8080 in your browser and you will see a Markdown editor. You can enter Markdown text on the left, and the converted HTML effect will be displayed in real time on the right.

6. Further optimization

While we have built a simple Markdown editor, we can optimize it further:

1. Add language support:

Added support for multiple languages, allowing users to select different languages ​​to format Markdown.

2. Save function:

Users may want to save their Markdown content, which can be implemented through the browser's localStorage or backend services.

3. Image upload:

The editor can be extended to allow users to upload images directly and convert them to Markdown's corresponding insert syntax.

4. Topic switch:

Provides a variety of topics for users to choose from, making the editor more personalized.

Conclusion

This article takes you to build a Markdown editor based on. Through this practice, you not only understand the basic usage of Vue, but also learn how to combine third-party libraries for Markdown analysis.

This is all about this article about building a simple Markdown editor based on Vue. For more related content of Vue Markdown editor, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!