【Rails】UIkit - HTML editorを使って簡単にマークダウンエディターを実装

2021年4月10日 23:29

はじめに

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にはlinkscriptのヘルパーメソッドがあるのでこちらを使っても問題ありません。

作成したパーシャルをレイアウトに組み込みます。

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を使えば導入するのも簡単ですし、マークダウンエディターを導入していないという方は本記事を参考にしていただければと思います。

関連記事

【CSS】CSSだけでMarkdownのコードにファイル名をつける
# はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.i [...]
2021年4月6日 14:39
【Rails】Markdownで記事を書く!『redcarpet+rouge』の導入・使い方を解説【シンタックスハイライト対応】
# はじめに 当ポートフォリオサイトの記事投稿画面では、長らくRails6の新機能・Action Textを使っていました(Action Textについては下記の記事をご覧ください)。 <div class="iframely-embed" [...]
2019年12月9日 19:58