飞起 | 轻松构建跨框架Markdown编辑器

2023-09-24 14:25:03

跨框架 Markdown 编辑器：SolidJS 和 CodeMirror 的完美结合

在前端开发的世界中，SolidJS 和 CodeMirror 正逐渐成为打造跨框架 Markdown 编辑器的绝佳搭档。SolidJS 以其高效、极简和易用性而闻名，而 CodeMirror 则是代码编辑领域的佼佼者，提供所见即所得的体验。

跨框架 Markdown 编辑器的优势

跨框架 Markdown 编辑器最大的优势在于它们可以在各种框架中使用，包括 Vue、React 和 Angular。这意味着开发人员可以不受限制地发挥创造力，享受一致的体验。

SolidJS：跨框架开发的理想选择

SolidJS 凭借其轻量级、响应式和数据反应性，是跨框架开发的理想选择。它使用虚拟 DOM，可以有效地更新 UI，减少重新渲染的次数。此外，SolidJS 的 Signal API 允许轻松地管理应用程序状态，从而简化数据处理。

CodeMirror：所见即所得的代码编辑器

CodeMirror 是一个流行的代码编辑器，因其可定制性和所见即所得的体验而受到喜爱。它支持 Markdown 语法高亮、自动补全和代码折叠等功能，提供卓越的编辑体验。

SolidJS + CodeMirror：跨框架 Markdown 编辑器开发指南

步骤 1：设置 SolidJS 项目

创建一个新的 SolidJS 项目或使用现有的项目。在终端中运行以下命令：

npx create-solid-app my-markdown-editor
cd my-markdown-editor

步骤 2：安装 CodeMirror

在项目中安装 CodeMirror：

npm install codemirror

步骤 3：创建 Markdown 组件

创建 MarkdownEditor.svelte 组件：

<script>
import { createSignal } from "solid-js";
import { EditorView } from "codemirror";

const [editor, setEditor] = createSignal(null);

const initEditor = (div) => {
  const view = new EditorView({
    parent: div,
    state: EditorState.create({
      doc: "**Hello, world!** ",
    }),
    extensions: [basicSetup, markdown(), keymap]
  });
  setEditor(view);
};
</script>

<div bind:this={initEditor} />