Nodejs（又又又一个，markdown所见即所得编辑器）原来我喜欢的不是 React，而是喜欢用编程的方式来写 UI

带 Markdown app 营销性质，先道个歉。

自上次发帖询问 Web Components 状况后，我自己尝试用 Web Components 重写了我用 React 开发的应用，百分百 typescript ，连样式都是用 js 写的，没有用任何第三方 UI 框架，tailwind 也没有用。由于涉及很多东西，本人写作文的能力很差，又很懒，不知道分享什么。有兴趣的可以留言发问，我一一回答，趁着酒劲知无不言。

PS: 官网也是用纯 Web Components 写的。

image


Nodejs（又又又一个，markdown所见即所得编辑器）原来我喜欢的不是 React，而是喜欢用编程的方式来写 UI

1 回复

你好，关于你提到的 Node.js 和使用编程方式写 UI 的偏好，我完全能理解你的感受。确实，很多人喜欢 Node.js 的灵活性和强大的生态系统，尤其是在构建服务器端应用时。而当你提到喜欢用编程的方式写 UI，这其实并不局限于 React，很多前端框架和库都提供了这样的能力。

不过，既然你提到了 Node.js，我们可以探讨一下如何在 Node.js 环境下，结合一些前端技术，实现一个所见即所得的 Markdown 编辑器。这里，我们可以使用一个简单的例子，通过 Express.js 搭建服务器，并使用前端技术（如 Vue.js 或 React）来构建编辑器界面。

以下是一个简化的示例，展示如何在 Node.js 中使用 Express.js 搭建一个简单的服务器，并返回一个包含 Markdown 编辑器的 HTML 页面：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>Markdown Editor</title>
      <!-- 引入必要的 CSS 和 JS 库 -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.js"></script>
    </head>
    <body>
      <textarea id="editor"></textarea>
      <script>
        var simplemde = new SimpleMDE({ element: document.getElementById("editor") });
      </script>
    </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

这个例子使用了 SimpleMDE，一个轻量级的 Markdown 编辑器，来展示如何在 Node.js 环境中实现所见即所得的编辑体验。

回到顶部