Ruby on RailsでQiitaエディターみたいなマークダウン機能を作る。TOC、ライププレビュー、ファイルアップロード、ファイル名、コピーボタンなど全て対応!
こんにちは。ずっと前からQiitaのエディターみたいなマークダウンエディターを作りたかったです。
今回はRailsアプリケーションでマークダウンが使えるまでの実装をご紹介いたします。jQueryは使いません。この記事の内容は以下になります。
マークダウンの導入
TOC (Table of contents)
コードブロックのテーマの設定
コードブロックの上にファイル名の表示
コピーボタンの実装
ライププレビュー
ファイルアップロード
アップロードの前に画像を圧縮したりリサイズしたりする
結果はこのようになります。
1.gif https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35605/792a9929-0cea-d0ca-aa88-5a0309f3f27c.gif
では、始めましょう!
マークダウンの導入
まずは必要なGemをインストールする
ruby:Gemfile
gem 'redcarpet' # Markdown parser
gem 'rouge' # Syntax...
Created by Yuto at 2022-10-10 13:43
Ruby on Rails 7 search selectbox with select2 and stimulus
Install select2 and jQuery
yarn add select2 jquery
Create select2 controller
```app/frontend/controllers/select2_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from 'jquery';
import 'select2/dist/css/select2.min.css'
import Select2 from "select2"
export default class extends Controller {
connect() {
Select2()
$('.select2').select2();
}
}
```
app/frontend/controllers/index.js
import Select2Controller from...
Created by Yuto at 2022-01-26 19:37
【Ruby on Rails】Hướng dẫn làm chức năng sort với jquery-ui sortable
Cài đặt jQuery và jQuery-ui
yarn add popper.js jquery jquery-ui
```javascript:config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// Add
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
// Add
module.exports =...
Updated by Yuto at 2021-06-18 17:19