从零实现markdown编辑器之React篇

2024-01-08 08:38:18

众所周知，markdown是一种轻量级的标记语言，广泛应用于技术文档、博客文章、README等领域。凭借其简洁、易读的语法，markdown受到广大开发者的青睐。然而，当我们在实际工作中需要创建、编辑markdown文档时，却往往发现现有的编辑器存在各种各样的问题，例如功能单一、操作繁琐、缺乏可定制性等等。

针对这些痛点，本文将以React作为基础，深入探究如何从零开始构建一个markdown编辑器。我们将从最基础的语法解析开始，一步步实现各种常用的编辑功能，最终打造出一款功能强大、易于使用、高度可定制的markdown编辑器。

一、基础语法解析

在开始构建编辑器之前，我们需要先了解markdown的基本语法。markdown使用一系列特殊字符来标记不同的文本元素，例如标题、列表、链接、代码块等等。通过这些标记，我们可以轻松地将文本内容转换为结构化的文档。

为了解析markdown语法，我们可以使用正则表达式或专门的库来实现。这里我们选择使用marked库，这是一个功能强大、易于使用的markdown解析库。

import marked from 'marked';

const markdown = `
# 标题
## 子标题
### 三级标题

* 列表项 1
* 列表项 2
* 列表项 3

[链接](https://example.com)

\`代码块\`

const html = marked(markdown);


调用marked库的marked方法，即可将markdown字符串转换为HTML字符串。

## 二、构建编辑器界面

有了基础的语法解析后，我们就可以开始构建编辑器的界面了。编辑器的界面通常包括两个部分：左侧是markdown编辑区，右侧是预览区。用户在编辑区输入markdown内容，预览区会实时显示渲染后的HTML内容。

我们可以使用React中的Textarea组件来实现markdown编辑区，使用React中的Html组件来实现预览区。

```javascript
import { useState } from 'react';
import { marked } from 'marked';

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState('');

  const handleChange = (e) => {
    setMarkdown(e.target.value);
  };

  const html = marked(markdown);

  return (
    <div>
      <Textarea value={markdown} onChange={handleChange} />
      <Html dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

三、实现编辑功能

接下来，我们需要实现一些常用的编辑功能，例如加粗、斜体、列表、链接、代码块等等。这些功能可以通过按钮或快捷键来实现。

import { useState } from 'react';
import { marked } from 'marked';

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState('');

  const handleChange = (e) => {
    setMarkdown(e.target.value);
  };

  const handleBold = () => {
    const selection = window.getSelection();
    const start = selection.anchorOffset;
    const end = selection.focusOffset;
    const text = selection.toString();
    const newMarkdown = markdown.substring(0, start) + '**' + text + '** ' + markdown.substring(end);
    setMarkdown(newMarkdown);
  };

  const handleItalic = () => {
    const selection = window.getSelection();
    const start = selection.anchorOffset;
    const end = selection.focusOffset;
    const text = selection.toString();
    const newMarkdown = markdown.substring(0, start) + '*' + text + '*' + markdown.substring(end);
    setMarkdown(newMarkdown);
  };

  // 其他编辑功能的实现逻辑

  const html = marked(markdown);

  return (
    <div>
      <Toolbar buttons={[{ icon: 'bold', onClick: handleBold }, { icon: 'italic', onClick: handleItalic }]} />
      <Textarea value={markdown} onChange={handleChange} />
      <Html dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

四、实现可定制性

最后，我们需要实现编辑器的可定制性，以便用户可以根据自己的需求对编辑器进行个性化设置。

import { useState } from 'react';
import { marked } from 'marked';

const MarkdownEditor = () => {
  const [markdown, setMarkdown] = useState('');
  const [theme, setTheme] = useState('light');

  const handleChange = (e) => {
    setMarkdown(e.target.value);
  };

  const handleThemeChange = (e) => {
    setTheme(e.target.value);
  };

  const html = marked(markdown);

  return (
    <div className={theme}>
      <Toolbar buttons={[{ icon: 'bold', onClick: handleBold }, { icon: 'italic', onClick: handleItalic }]} />
      <Textarea value={markdown} onChange={handleChange} />
      <Html dangerouslySetInnerHTML={{ __html: html }} />
      <ThemeSelector value={theme} onChange={handleThemeChange} />
    </div>
  );
};