Nodejs的markdown编辑器是用的什么工具

Nodejs的markdown编辑器是用的什么工具

我想在自己做的页面里嵌入markdown编辑器，先后看过epiceditor和bootstrapMarkdown,前者太难看了，而且好像没有工具栏，后者的代码显示貌似有点问题，好像只能一行，求大家推荐，能达到cnnode那样的效果最好

5 回复

标题：Node.js 的 Markdown 编辑器是用的什么工具？

内容：

在开发 Node.js 应用时，如果想在页面中嵌入一个美观且功能强大的 Markdown 编辑器，可以考虑使用一些流行的库。根据您的需求，这里推荐两个优秀的 Markdown 编辑器库，并提供一些基本的使用示例。

1. SimpleMDE

SimpleMDE 是一个简单易用的 Markdown 编辑器，具有现代风格的界面和丰富的功能。它支持实时预览、语法高亮等功能，非常适合用于创建类似 CNode 社区的效果。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown Editor with SimpleMDE</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
</head>
<body>
    <textarea id="editor"></textarea>

    <script>
        var simplemde = new SimpleMDE({ element: document.getElementById("editor") });
    </script>
</body>
</html>

2. Remarkable

Remarkable 是一个高性能的 Markdown 解析器，适合那些需要高度定制化功能的场景。你可以结合其他库（如 CodeMirror 或 Ace Editor）来实现代码高亮等功能。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown Editor with Remarkable and CodeMirror</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/markdown/markdown.min.js"></script>
    <script src="https://unpkg.com/@remarkablemarkdown/remarkable"></script>
</head>
<body>
    <textarea id="editor"></textarea>

    <script>
        const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
            mode: 'markdown',
            lineNumbers: true,
            theme: 'default'
        });

        const md = new Remarkable();
        editor.on("change", () => {
            const markdownText = editor.getValue();
            console.log(md.render(markdownText));
        });
    </script>
</body>
</html>

总结

SimpleMDE 提供了一个简洁易用的 Markdown 编辑器，而 Remarkable 则是一个高性能的 Markdown 解析器，适合需要更多自定义功能的应用。您可以根据项目需求选择合适的工具。


同求

epiceditor挺好的… 可以自己做个toolsbar… 一般来说写markdown的都不怎么不要这东西吧, 所以没有更简洁一些.

http://lab.lepture.com/editor/

针对你的需求，如果你想在自己的页面中嵌入一个功能丰富且美观的 Markdown 编辑器，可以考虑使用 Markwon 或者 SimpleMDE。这里我主要介绍 SimpleMDE，因为它易于使用且提供了良好的用户体验。

SimpleMDE 示例

首先，你需要安装 simplemde 包。你可以通过 npm 来安装：

npm install simplemde --save

然后，在你的页面中引入 SimpleMDE 并初始化它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown Editor Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.css">
</head>
<body>
    <textarea id="editor"></textarea>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/simplemde/1.11.2/simplemde.min.js"></script>
    <script>
        // 初始化 SimpleMDE
        var simplemde = new SimpleMDE({
            element: document.getElementById("editor"),
            autofocus: true,
            spellChecker: false,
            toolbar: [
                "bold", "italic", "strikethrough", "|",
                "heading", "code", "quote", "|",
                "unordered-list", "ordered-list", "|",
                "link", "image", "|",
                "preview", "side-by-side", "fullscreen"
            ]
        });

        // 获取编辑器中的内容
        function getContent() {
            console.log(simplemde.value());
        }
    </script>
</body>
</html>

解释

  • HTML 部分：定义了一个 <textarea> 元素，这个元素将被转换成 Markdown 编辑器。
  • CSS 和 JS 引入：引入了 SimpleMDE 的 CSS 和 JS 文件。
  • JavaScript 部分：
    • 使用 new SimpleMDE 初始化编辑器，并设置了一些配置项，如是否自动聚焦、是否启用拼写检查等。
    • 定义了一个函数 getContent 用于获取当前编辑器中的 Markdown 内容并打印到控制台。

总结

SimpleMDE 是一个非常简单且功能丰富的 Markdown 编辑器，它的界面直观，支持丰富的格式化选项。如果你希望达到类似于 CNode 社区的效果，SimpleMDE 应该是个不错的选择。

回到顶部