使用WinForm结合Markdig库竟能轻松开发出Markdown 编辑器

最新推荐文章于 2025-07-25 11:35:31 发布

原创最新推荐文章于 2025-07-25 11:35:31 发布 · 1.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #DeepSeek #开发语言

C#开发基础同时被 2 个专栏收录

121 篇文章

订阅专栏

图形开发

10 篇文章

订阅专栏

在这里插入图片描述

一、前言

在当今数字化的时代，Markdown 已经成为了撰写文档、博客文章、技术笔记等的热门选择，因其简洁的语法和强大的表现力备受青睐。今天，我将为大家分享一个基于 WinForm 和 .NET 开发的 Markdown 编辑器，它使用了 Markdig 库，具备实时预览、文件操作以及导出功能，并且采用简洁的分栏设计，让用户可以即时查看 Markdown 渲染效果。
在这里插入图片描述

二、项目概述

本项目旨在开发一个简单易用的 Markdown 编辑器，通过 WinForm 界面提供直观的操作体验。利用 Markdig 库将 Markdown 文本转换为 HTML，实现实时预览功能。同时，支持文件的新建、打开、保存操作，以及将编辑内容导出为 PDF 和 HTML 文件。

三、技术选型

WinForm：作为 .NET 平台下的经典桌面应用程序开发框架，提供了丰富的控件和简单易用的界面设计方式。
Markdig：一个快速、灵活的 Markdown 解析器和渲染器，用于将 Markdown 文本转换为 HTML。
PdfSharp：用于处理 PDF 文件的库，虽然在本项目中 PDF 导出功能尚未完全实现，但已预留接口。

四、代码实现

1. 界面初始化

在这里插入图片描述
在 MainForm 类的 InitializeComponents 方法中，我们进行了界面的初始化工作。主要步骤包括：

设置窗体的基本属性，如标题、初始位置和窗口状态。
创建一个 SplitContainer 控件，将界面分为左右两栏。
在左栏添加一个 TextBox 作为 Markdown 编辑器，支持多行输入和垂直滚动条。
在右栏添加一个 WebBrowser 作为 Markdown 预览区，用于显示渲染后的 HTML 内容。
创建一个 MenuStrip 菜单栏，包含文件操作和导出功能的菜单项。

private void InitializeComponents()
{
    // 设置窗体基本属性
    this.Text = "Markdown Editor";
    this.StartPosition = FormStartPosition.CenterScreen;
    this.WindowState = FormWindowState.Maximized;
    
    // 创建分割容器
    var splitContainer = new SplitContainer
    {
        Dock = DockStyle.Fill,
        SplitterDistance = this.Width / 2
    };

    // 创建编辑器
    markdownEditor = new TextBox
    {
        Multiline = true,
        ScrollBars = ScrollBars.Vertical,
        Dock = DockStyle.Fill,
        Font = new Font("Consolas", 12F),            
        AcceptsTab = true
    };

    // 创建预览区
    markdownPreview = new WebBrowser
    {
        Dock = DockStyle.Fill
    };

    // 组装界面
    splitContainer.Panel1.Controls.Add(markdownEditor);
    splitContainer.Panel2.Controls.Add(markdownPreview);
    this.Controls.Add(splitContainer);

    // 创建菜单栏
    menuStrip = new MenuStrip();
    menuStrip.Dock = DockStyle.Top;
    var fileMenu = new ToolStripMenuItem("文件");
    fileMenu.DropDownItems.AddRange(new ToolStripItem[]
    {
        new ToolStripMenuItem("新建", null, NewFile_Click),
        new ToolStripMenuItem("打开", null, OpenFile_Click),
        new ToolStripMenuItem("保存", null, SaveFile_Click),
        new ToolStripSeparator(),
        new ToolStripMenuItem("导出为PDF", null, ExportToPdf_Click),
        new ToolStripMenuItem("导出为HTML", null, ExportToHtml_Click),
        new ToolStripSeparator(),
        new ToolStripMenuItem("退出", null, Exit_Click)
    });
    menuStrip.Items.Add(fileMenu);
    this.Controls.Add(menuStrip);
}

2. 实时预览功能

在这里插入图片描述

当用户在编辑器中输入或修改 Markdown 文本时，MarkdownEditor_TextChanged 事件会被触发，调用 UpdatePreview 方法更新预览区的内容。在 UpdatePreview 方法中，使用 Markdig 库将 Markdown 文本转换为 HTML，并添加基本的样式，最后将完整的 HTML 内容设置到 WebBrowser 控件中。

private void SetupEventHandlers()
{
    markdownEditor.TextChanged += MarkdownEditor_TextChanged;
}

private void MarkdownEditor_TextChanged(object? sender, EventArgs e)
{
    UpdatePreview();
}

private void UpdatePreview()
{
    var markdown = markdownEditor.Text;
    var html = Markdown.ToHtml(markdown);
    var fullHtml = $@"<!DOCTYPE html>
<html>
<head>
    <style>
        body {{ font-family: Arial, sans-serif; margin: 20px; }}
        pre {{ background-color: #f4f4f4; padding: 10px; border-radius: 4px; }}
        code {{ font-family: Consolas, monospace; }}
    </style>
</head>
<body>
{html}
</body>
</html>";

    markdownPreview.DocumentText = fullHtml;
}

3. 文件操作功能

在这里插入图片描述

新建文件：在 NewFile_Click 方法中，如果编辑器中已有内容，会提示用户是否保存当前文件。如果用户选择保存，则调用 SaveFile_Click 方法；如果选择取消，则不执行任何操作。最后清空编辑器内容并将当前文件路径置为 null。
打开文件：在 OpenFile_Click 方法中，使用 OpenFileDialog 对话框让用户选择要打开的 Markdown 文件，读取文件内容并显示在编辑器中。
保存文件：在 SaveFile_Click 方法中，如果当前文件路径为空，则使用 SaveFileDialog 对话框让用户选择保存路径，然后将编辑器中的内容保存到指定文件中。

private void NewFile_Click(object? sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(markdownEditor.Text))
    {
        var result = MessageBox.Show("是否保存当前文件？", "新建文件", MessageBoxButtons.YesNoCancel);
        if (result == DialogResult.Yes)
        {
            SaveFile_Click(sender, e);
        }
        else if (result == DialogResult.Cancel)
        {
            return;
        }
    }

    markdownEditor.Clear();
    currentFilePath = null;
}

private void OpenFile_Click(object? sender, EventArgs e)
{
    using var openFileDialog = new OpenFileDialog
    {
        Filter = "Markdown文件|*.md|所有文件|*.*",
        Title = "打开Markdown文件"
    };

    if (openFileDialog.ShowDialog() == DialogResult.OK)
    {
        try
        {
            markdownEditor.Text = File.ReadAllText(openFileDialog.FileName);
            currentFilePath = openFileDialog.FileName;
        }
        catch (Exception ex)
        {
            MessageBox.Show($"打开文件时发生错误：{ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }
    }
}

private void SaveFile_Click(object? sender, EventArgs e)
{
    if (string.IsNullOrEmpty(currentFilePath))
    {
        using var saveFileDialog = new SaveFileDialog
        {
            Filter = "Markdown文件|*.md|所有文件|*.*",
            Title = "保存Markdown文件"
        };

        if (saveFileDialog.ShowDialog() == DialogResult.OK)
        {
            currentFilePath = saveFileDialog.FileName;
        }
        else
        {
            return;
        }
    }

    try
    {
        File.WriteAllText(currentFilePath, markdownEditor.Text);
    }
    catch (Exception ex)
    {
        MessageBox.Show($"保存文件时发生错误：{ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
}

4. 导出功能

在这里插入图片描述

导出为 PDF：在 ExportToPdf_Click 方法中，使用 SaveFileDialog 对话框让用户选择保存路径，但目前 PDF 导出功能尚未完全实现，只是给出了提示信息。
导出为 HTML：在 ExportToHtml_Click 方法中，同样使用 SaveFileDialog 对话框让用户选择保存路径，将 Markdown 文本转换为 HTML 并添加基本样式，然后将完整的 HTML 内容保存到指定文件中。

private void ExportToPdf_Click(object? sender, EventArgs e)
{
    using var saveFileDialog = new SaveFileDialog
    {
        Filter = "PDF文件|*.pdf",
        Title = "导出为PDF"
    };

    if (saveFileDialog.ShowDialog() == DialogResult.OK)
    {
        try
        {
            var html = Markdown.ToHtml(markdownEditor.Text);
            var document = PdfSharp.Pdf.IO.PdfReader.TestPdfFile(saveFileDialog.FileName);
            // TODO: 实现PDF导出功能
            MessageBox.Show("PDF导出功能正在开发中", "提示");
        }
        catch (Exception ex)
        {
            MessageBox.Show($"导出PDF时发生错误：{ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }
    }
}

private void ExportToHtml_Click(object? sender, EventArgs e)
{
    using var saveFileDialog = new SaveFileDialog
    {
        Filter = "HTML文件|*.html",
        Title = "导出为HTML"
    };

    if (saveFileDialog.ShowDialog() == DialogResult.OK)
    {
        try
        {
            var markdown = markdownEditor.Text;
            var html = Markdown.ToHtml(markdown);
            var fullHtml = $@"<!DOCTYPE html>
<html>
<head>
    <meta charset=""utf-8"">
    <style>
        body {{ font-family: Arial, sans-serif; margin: 20px; }}
        pre {{ background-color: #f4f4f4; padding: 10px; border-radius: 4px; }}
        code {{ font-family: Consolas, monospace; }}
    </style>
</head>
<body>
{html}
</body>
</html>";

            File.WriteAllText(saveFileDialog.FileName, fullHtml, Encoding.UTF8);
            MessageBox.Show("HTML文件导出成功！", "成功");
        }
        catch (Exception ex)
        {
            MessageBox.Show($"导出HTML时发生错误：{ex.Message}", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }
    }
}

五、总结

通过本项目的开发，我们利用 WinForm 和 .NET 平台，结合 Markdig 库，实现了一个简单实用的 Markdown 编辑器。该编辑器提供了实时预览、文件操作以及导出功能，采用简洁的分栏设计，方便用户即时查看 Markdown 渲染效果。虽然目前 PDF 导出功能尚未完全实现，但预留了接口，后续可以进一步完善。希望这个项目能为大家在开发桌面应用程序和处理 Markdown 文本方面提供一些参考和启示。