WYSIWYG Markdown Editor Implementation with Vditor

Background

Recently developed an AI-based Markdown online editing MVP project. The design concept is to utilize AI to generate Markdown content, then provide a Markdown editor on the frontend for users to further edit and refine AI-generated content.

Initially considered implementing an editor myself, but after writing a lot of code, I found the cost was enormous and modifications were extremely complex. However, after research, I discovered an open-source library called Vditor that can perfectly implement WYSIWYG Markdown editing functionality. In the current era where AI content generation scenarios are becoming increasingly common, this library is truly very practical and highly recommended.

What is Vditor

Vditor is a Markdown editor that supports WYSIWYG (What You See Is What You Get), Instant Rendering (IR), and Split View (SV). It's particularly well-suited for integration into web-based applications.

Core Implementation Code

1. Basic Initialization

Integrating Vditor into a Vue.js project is very simple. Here's the core initialization code:

import Vditor from "vditor";
import "vditor/dist/index.css";

// Initialize Vditor editor
initVditor() {
  return new Promise((resolve, reject) => {
    this.$nextTick(() => {
      const container = this.$refs.vditorContainer;

      this.vditor = new Vditor(container, {
        height: "100%",
        width: "100%",
        mode: "wysiwyg", // Key: Enable WYSIWYG mode
        cache: {
          enable: false, // Disable cache to avoid conflicts
        },
        theme: "classic",
        placeholder: "Start writing your content...",

        // Content change callback
        input: (value) => {
          this.currentDoc.content = value;
          this.onContentChange();
        },

        // Editor ready callback
        after: () => {
          this.vditorReady = true;
          this.updateVditorContent(this.currentDoc.content || "");
          resolve();
        },
      });
    });
  });
}

2. Toolbar Configuration

Vditor provides rich toolbar configuration options that can be customized as needed:

toolbar: [
  "bold", // Bold
  "italic", // Italic
  "strike", // Strikethrough
  "|", // Separator
  "headings", // Headings
  "|",
  "list", // Unordered list
  "ordered-list", // Ordered list
  "|",
  "quote", // Quote
  "line", // Horizontal line
  "|",
  "code", // Code block
  "inline-code", // Inline code
  "|",
  "link", // Link
  "|",
  "undo", // Undo
  "redo", // Redo
];

Screenshot

With just the above code, you can easily provide such an editor on the frontend:

Summary

Vditor provides a powerful and easy-to-integrate Markdown editing solution for modern Web applications. Especially in AI content generation scenarios, its WYSIWYG editing experience greatly improves user efficiency. Through proper configuration and customization, you can quickly build a professional-grade Markdown editor.