Yuto Blog

Yuto Blog

Tag: JavaScript
3 articles

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

【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