はじめに
Ruby on RailsではAction Textという機能を使うことで簡単にリッチテキストエディターを実装することができます。
Action TextはTrixエディターというコンポーネントを使用しています。Trixエディターはテキストの装飾や画像の挿入といった基本的な機能は備えていますが、テーブルを挿入することはできません。日記のような記事を書くだけなら必要十分かもしれませんが、技術的な記事を書く場合にはテーブルがどうしても必要になることがあります。
技術的な記事を書くときはMarkdownがよく使われます。Markdownは通常のテキストエリアでも書くことはできますが、編集中にリアルタイムで記事のプレビューを確認したいならマークダウンエディターを実装する必要があります。
本記事では、UIkitのHTML editorというコンポーネントを使って簡単にマークダウンエディターを実装する方法について説明します。
UIkitについて
UIkitとは、Bootstrapなどと同じCSSフレームワークの一種です。知名度はBootstrapには及びませんが、軽量なことで有名なCSSフレームワークです。記事執筆時点の最新バージョンは3.6.18です。
UIkitはCSSフレームワークとは別に様々なコンポーネントも提供しています。HTML editorはUIkitのコンポーネントの中の一つで、オプションを指定することでマークダウンエディターとしても使うことができます。ただし、コンポーネントが使えるのはバージョン2.27.5までなので注意してください。
当ブログの記事投稿／編集画面でも使っています（画像クリックで拡大できます）。
マークダウンエディターの実装
UIkitの読み込み
公式サイトからダウンロードしたUIkitを読み込んでもいいのですが、今回はより簡単に実装できるCDNを使ってUIkitを読み込みます。app/views/layouts/ディレクトリ配下に_head-uikit.html.erbまたは_head-uikit.html.slimというパーシャルを作成し、以下を記述します。
_head-uikit.html.erb
<%# UIkit %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>
<%# Codemirror and marked dependencies %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/mode/markdown/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/addon/mode/overlay.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/mode/gfm/gfm.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.1/marked.min.js"></script>
<%# HTML editor CSS and JavaScript %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/components/htmleditor.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/components/htmleditor.js"></script>
_head-uikit.html.slim
/ UIkit
link[rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"]
/ Codemirror and marked dependencies
link[rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.js"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/mode/markdown/markdown.min.js"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/addon/mode/overlay.min.js"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/mode/xml/xml.min.js"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/mode/gfm/gfm.min.js"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.1/marked.min.js"]
/ HTML editor CSS and JavaScript
link[rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/components/htmleditor.css"]
script[src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/components/htmleditor.js"]
なお、uikit.min.cssはCSSフレームワークとしてのCSSファイルなので、このファイルを読み込んでしまうと既存のスタイルがUIkitのスタイルに上書きされてしまうことがあります。HTML editorではツールバーのアイコンとしてのみ使われているだけなので、ツールバーのアイコンが必要ない場合はuikit.min.cssは削ってしまっても問題ありません。
最新版のCDNは以下のページをご確認ください。なお、HTML editorはUIkitのバージョン2.27.5までしか対応していません。また、UIkitとHTML editorのバージョンは一致させる必要があります。
余談ですが、Railsにはlinkとscriptのヘルパーメソッドがあるのでこちらを使っても問題ありません。
作成したパーシャルをレイアウトに組み込みます。
application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= render 'layouts/head-uikit' %>
</head>
application.html.slim
doctype html
html
head
= render 'layouts/head-uikit'
HTML editorの追加
記事投稿／編集画面のフォームにHTML editorを追加します。
_form.html.erb
<%= form.text_area :content, data: { "uk-htmleditor": "{ markdown: true }" } %>
_form.html.slim
= form.text_area :content, data: { "uk-htmleditor": "{ markdown: true }" }
HTML editorにはいくつかオプションが用意されています。詳しくは以下のページを参照してください。
まとめ
UIkitのHTML editorは編集エリアのすぐ隣にプレビューがあり、編集中にリアルタイムに変化するのですぐ確認ができとても便利です。CDNを使えば導入するのも簡単ですし、マークダウンエディターを導入していないという方は本記事を参考にしていただければと思います。
【Git】マージにおけるfast-forwardとnon-fast-forwardの違い
【AWS】Session Manager経由でEC2インスタンスに接続する方法（画像付き解説）【2023年版】
【Rails】Railsアップグレードまとめ
【Rails】ユーザー登録時に行うメールアドレス認証機能の実装方法
【Rails】モデルに列挙型（enum）を定義し、使いこなす方法
【Rails】RailsでCORSとPreflight requestの設定を行う方法
【自作Webサービス】『KITCHEN NOTE』の機能紹介
「このページに到達できません (ドメイン)により、接続が拒否されました」を解決するファイアウォール（firewalld）の設定方法
【CSS+JS】背景画像の視差効果（パララックス）を実装する方法
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
【Rails】Webサーバー「Unicorn」の基本情報と実装方法
【Rails】忘れがちなルーティングの書き方を総復習
MySQL Workbenchでリモートサーバー上のMySQLにSSH接続する方法【接続できない場合の対処法あり】
【Rails】忘れがちなGemfileの書き方を総復習
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築