Marksmith 安装与配置指南

Marksmith 安装与配置指南

marksmith GitHub-style markdown editor for Ruby and Rails 项目地址: https://gitcode.com/gh_mirrors/ma/marksmith

1. 项目基础介绍

Marksmith 是一个 GitHub 风格的 Markdown 编辑器，专为 Rails 应用设计。它支持 Active Storage 附件，并提供内置的 Markdown 预览渲染器。Marksmith 目前处于初期开发阶段，接近 beta 版本的发布，但 API 可能会发生变化，且预期会出现一些 bug。用户在使用过程中应积极报告问题。

主要编程语言：Ruby（用于 Rails 应用），JavaScript（用于前端功能）。

2. 关键技术与框架

• Rails：Ruby on Rails 框架用于后端开发。
• Commonmarker：一个 Markdown 解析器，用于将 Markdown 文本转换成 HTML。
• StimulusJS：用于处理前端逻辑的轻量级 JavaScript 框架。
• ActiveStorage：Rails 内置的功能，用于处理文件上传。
• GitHub Markdown Toolbar Element：提供类似 GitHub 的 Markdown 编辑器工具栏。

3. 安装与配置

准备工作

在开始安装之前，确保你的开发环境已安装以下依赖：

• Ruby 和 Rails
• Node.js 和 npm 或 yarn
• Git

安装步骤

步骤 1：将 Marksmith 添加到 Gemfile

首先，在你的 Rails 应用的 Gemfile 中添加 Marksmith 和 commonmarker：

gem "marksmith"
gem "commonmarker"

然后执行以下命令安装宝石：

bundle install

步骤 2：安装前端依赖

接着，安装 Marksmith 的前端依赖：

yarn add @avo-hq/marksmith

或者，如果你更倾向于使用 importmap：

bin/importmap pin @avo-hq/marksmith

步骤 3：配置路由

Marksmith 默认已经挂载，但你可以在 config/routes.rb 中自定义挂载路径：

Rails.application.routes.draw do
  mount Marksmith::Engine => '/markdown'
end

步骤 4：注册控制器

在你的 Rails 应用中注册 Marksmith 控制器：

import { MarksmithController } from '@avo-hq/marksmith'
import { ListContinuationController } from '@avo-hq/marksmith'

application.register('marksmith', MarksmithController)
application.register('list-continuation', ListContinuationController)

步骤 5：添加样式

在应用的 app/assets/stylesheets/application.css 文件中添加 Marksmith 样式：

<%= stylesheet_link_tag "marksmith" %>

步骤 6：使用 Marksmith

在你的 Rails 表单中使用 Marksmith：

<%= marksmith_tag :body, value: "### 这是一个重要的标题" %>

或者使用表单生成器：

<%= form.marksmith :body %>

步骤 7：配置选项

Marksmith 支持一些配置选项，如 disabled、placeholder、autofocus 等。你可以在标签中使用这些选项来自定义编辑器的行为。

步骤 8：自定义渲染器（可选）

如果你需要自定义渲染器，可以通过扩展 Marksmith::Renderer 类来实现。

完成以上步骤后，你的 Rails 应用就应该已经成功集成了 Marksmith Markdown 编辑器。

marksmith GitHub-style markdown editor for Ruby and Rails 项目地址: https://gitcode.com/gh_mirrors/ma/marksmith