Milkdown 项目常见问题解决方案

花谦战

于 2024-12-11 11:00:04 发布

阅读量318

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00885/article/details/144394992

版权

Milkdown 项目常见问题解决方案

milkdown 🍼 Plugin driven WYSIWYG markdown editor framework. 项目地址: https://gitcode.com/gh_mirrors/mi/milkdown

1. 项目基础介绍与主要编程语言

Milkdown 是一个基于 prosemirror 和 remark 构建的插件驱动的所见即所得（WYSIWYG）Markdown 编辑器框架，受到 Typora 的启发。该项目旨在为开发者提供一种灵活且可扩展的方式来构建 Markdown 编辑器。主要使用的编程语言是 TypeScript，同时也有一些 CSS 和 JavaScript 代码。

2. 新手常见问题及解决步骤

问题一：如何安装 Milkdown

问题描述：新手在使用 Milkdown 之前，可能不清楚如何正确安装该项目。

解决步骤：

确保你的开发环境中已经安装了 Node.js。
在你的项目目录中，使用 npm 或 yarn 初始化一个新的项目：
```
npm init -y
```
或者
```
yarn init -y
```

安装 Milkdown：

npm install @milkdown/core @milkdown/preset-commonmark

或者

yarn add @milkdown/core @milkdown/preset-commonmark

问题二：如何在项目中引入 Milkdown

问题描述：新手可能不知道如何在他们的项目中引入 Milkdown。

解决步骤：

在你的 JavaScript 或 TypeScript 文件中，首先导入 Milkdown 的核心库和预设：

import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';

创建一个 Milkdown 编辑器实例，并挂载到你的网页元素上：

const editor = Editor.make()
  .use(commonmark)
  .create(document.getElementById('editor'));

问题三：如何自定义 Milkdown 的样式

问题描述：用户可能想要自定义编辑器的样式，但不知道如何操作。

解决步骤：

在你的项目中创建一个 CSS 文件，例如 custom.css。

在 CSS 文件中编写你想要的样式规则，例如：

.ProseMirror {
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
}

在 HTML 文件中引入这个 CSS 文件，并在创建 Milkdown 实例的元素上设置一个特定的类名：
```
<div id="editor" class="custom-editor"></div>
```

确保在 Milkdown 实例化代码中引用了 CSS 文件：

// 在你的 JavaScript 或 TypeScript 文件中
const editor = Editor.make()
  .use(commonmark)
  .use(/* 其他插件 */)
  .create(document.querySelector('.custom-editor'));