Logo

菜单

发布于 2026-01-06 3 阅读
0

使用 Reactjs 构建 Markdown 编辑器

使用 Reactjs 构建 Markdown 编辑器

介绍

在本教程中，我们将构建一个 Markdown 编辑器。众所周知，React 是目前最流行的框架之一，所以我们将使用它。React 也是我最喜欢的框架，这也是我选择它的另一个原因。我们还会用到一个名为 Remarkable 的库remarkable以及tailwindCDN。Remarkable 库包含一个 Markdown 组件，可以将 Markdown 转换为 HTML。它非常简单、美观且易于使用，那么让我们开始吧！

安装应用程序和软件包

首先，我们需要创建应用程序，所以请打开终端，导航到要安装 React 的文件夹，然后粘贴以下内容：

npx create-react-app react-markdown
Enter fullscreen mode Exit fullscreen mode

接下来，进入刚刚安装的文件夹进行安装remarkable：

npm install remarkable
Enter fullscreen mode Exit fullscreen mode

我们还需要添加 Tailwind CDN，所以让我们导航到我们的目录public/index.html并添加以下内容：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" referrerpolicy="no-referrer">
Enter fullscreen mode Exit fullscreen mode

构建 Markdown

我们需要修改一些内容。所以，让我们打开文件app.js，删除所有内容，然后粘贴以下内容：

import { useState } from "react";
import { Remarkable } from "remarkable";

const md = new Remarkable();

function App() {
  const [text, setText] = useState("");
  return (
    <>
      <main className="p-5 md:max-w-4xl md:mx-auto">
        <h1 className="text-gray-900 text-4xl text-center font-bold">
          markdown editor
        </h1>

        <article>
          <label htmlFor="markdown" className="mt-5 mb-3 block"> 
        type in some markdown</label>
          <textarea
            name="textarea"
            id="markdown"
            cols="30"
            rows="10"
            required
            placeholder="type in some markdown"
            className="bg-white p-5 rounded shadow w-full"
          ></textarea>

          <h3>output</h3>
          <div></div>
        </article>
      </main>
    </>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

接下来app.js我们要做的就是获取输入并将其显示在输出
中，textarea为此，我们添加一个值属性：

 value={text}
Enter fullscreen mode Exit fullscreen mode

这意味着输入框中输入的任何内容都将存储在我们的值属性中，
然后我们需要添加一个onchange事件处理程序。

onChange={(e)=>setText(e.target.value)}
Enter fullscreen mode Exit fullscreen mode

接下来我们需要将文本转换为 Markdown 格式，因此div在输出部分中添加以下内容：

dangerouslySetInnerHTML={{__html:md.render(text)}}
Enter fullscreen mode Exit fullscreen mode

或者更好的办法是用这个替换div：

 <div dangerouslySetInnerHTML={{__html:md.render(text)}}></div>
Enter fullscreen mode Exit fullscreen mode

这种render方法来自我们导入并初始化的那个卓越的软件包。

我们想添加背景颜色，所以让我们回到我们的代码块index.css，并将这段代码粘贴到我们的代码块中body：

 background-color: #68e0e0;
Enter fullscreen mode Exit fullscreen mode

我们还会在CSS代码末尾粘贴一些内容。

 h1, h2, h3, h4 , h5 , h6 {
  font-weight: bold;
}
h1{
 font-size: 36px;
}
h2{
 font-size: 32px;
}
h3{
  font-size:28;
}

h4{
 font-size: 24px; 
}
h5{
 font-size: 20px; 
}
h6{
 font-size: 16px;  
}
a{
  color: blue;
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

现在让我们启动应用程序：

npm start
Enter fullscreen mode Exit fullscreen mode

标记化

如果你有类似的代码，恭喜你！！！你刚刚用 React 构建了一个 Markdown 编辑器。

结论

我们成功地用 React 构建了一个 Markdown 编辑器，其中也用到了一个名为 Markdown 的包。我们也了解了 Markdown 是什么。如果你还不理解，这里是我的 GitHub 仓库链接。如果你觉得这篇文章有用，请分享。

文章来源：https://dev.to/oyedeletemitope/build-a-markdown-editor-in-reactjs-4g0i
尽可能简单地解释微前端
99% 的 Python 程序员不...