ponkotsu-md-editor

PonkotsuMdEditorは、Railsアプリケーション向けのシンプルなMarkdownエディタGemです。

PonkotsuMdEditor is a simple Markdown editor gem for Rails applications.

Markdownテキストベースの編集エリア、プレビュー、ツールバーなどを備え、簡単に組み込むことができます。

It provides a markdown text-based editing area, preview, toolbar, and can be easily integrated into your app.

• シンプルなUIで直感的にMarkdown編集
  • Simple UI for intuitive Markdown editing
• プレビュー機能付き
  • Includes preview feature
• JavaScript/CSSアセット同梱
  • Bundled with JavaScript/CSS assets
• Railsビューに簡単組み込み
  • Easy integration into Rails views
• textareaタグを使用していないので、Chromium系ブラウザにおける多量のテキスト入力でのパフォーマンス問題を回避（参照：https://issues.chromium.org/issues/341564372）
  • Does not use textarea tag, so avoids performance issues with large text input on Chromium browsers (see: https://issues.chromium.org/issues/341564372)

Gemfileに以下を追加してください。

Add the following to your Gemfile:

gem 'ponkotsu-md-editor'

その後、以下を実行します。

Then run:

bundle install

本GemはRailsエンジンとしてアセット（JavaScript/CSS）を提供します。

This gem provides assets (JavaScript/CSS) as a Rails engine.

CSSを使用するには、以下の設定が必要です：

To use the CSS, the following configuration is required:

app/assets/stylesheets/application.css または app/assets/stylesheets/application.scss に以下を追加してください：

Add the following to app/assets/stylesheets/application.css or app/assets/stylesheets/application.scss:

application.css の場合 / For application.css:

/*
 *= require markdown_editor
 */

application.scss の場合 / For application.scss:

@use 'markdown_editor';

JavaScriptは自動的に読み込まれるため、特別な設定は不要です。

JavaScript is automatically loaded, so no special configuration is required.

<%= form_with model: @article, local: true, multipart: true, class: "article-form" do |form| %>

    <%= markdown_editor(form, :content, @article.content, options: {
        lang: :ja,
        preview: true,
        tools: %w[bold italic strikethrough heading1 heading2 heading3 heading4 heading5 heading6 unordered_list ordered_list check_list blockquote link image code code_block table horizontal_rule]
      }) %>

<% end %>

hiddenフィールドにMarkdownテキストが格納されます。あとは良しなに。

The markdown text is stored in a hidden field. Handle as needed.

params[:model][:content] # => Markdown text

このgemは主にRailsのview要素（ヘルパー、パーシャル、JS/CSSアセット）を提供するため、RSpec等の通常のテストではUIや動作の自動テストは困難です。

This gem mainly provides Rails view elements (helpers, partials, JS/CSS assets), so UI and behavior cannot be automatically tested with standard RSpec, etc.

ChromeとFirefoxを使用したE2Eテストを用意しています。

E2E tests using Chrome and Firefox are available.

# すべてのテストを実行/Run all tests
bundle exec rspec spec/features/markdown_editor_e2e_spec.rb

# 簡単にテストを実行/Run tests easily
bin/run_e2e_tests

# 特定のブラウザでテスト/Test with specific browser
bin/run_e2e_tests --browser chrome
bin/run_e2e_tests --browser firefox

# 特定のカテゴリをテスト/Test specific category
bin/run_e2e_tests --category basic
bin/run_e2e_tests --category formatting

詳細は E2E_TESTING.md を参照してください。

See E2E_TESTING.md for more details.

• UIやエディタの動作確認には、手動テストも推奨します。
  • Manual testing is also recommended for UI/editor behavior verification.

バグ報告・プルリクエストは歓迎します。

Bug reports and pull requests are welcome.

GitHub repository: https://github.com/dhq-boiler/ponkotsu-md-editor

このGemはMITライセンスのもとで公開されています。

This gem is released under the MIT License