Rails 上に画像はりつけ可能なマークダウンエディタをつけたいです
https://qiita.com/nobu17/items/01eb99ab8bc0f5873571
こちらの記事がどんぴしゃなんですがまっさらな rails 環境で
yarn add simplemde
yarn add inline-attachment
を実行して
app/javascript/packs/documents.js という名前で
import "inline-attachment/src/inline-attachment";
import "inline-attachment/src/codemirror-4.inline-attachment";
import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from "simplemde";
import Rails from '@rails/ujs'
window.onload = function () {
// textareaをMarkdownエディタにする
const simplemde = new SimpleMDE({
element: document.getElementById("editor"),
});
// エディタに画像がドラッグ&ドロップされた際の処理
inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
uploadUrl: "/articles/attach", // POSTする宛先Url
uploadFieldName: "image", // ファイルのフィールド名(paramsで取り出す時のkey)
allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
extraHeaders: { "X-CSRF-Token": Rails.csrfToken() }, // CSRF対策
});
};
をかいて application.js から require してみたんですが
Uncaught Error: Cannot find module 'codemirror/addon/edit/continuelist.js'
at webpackMissingModule (simplemde.js:8:1)
at ./node_modules/simplemde/src/js/simplemde.js (simplemde.js:8:1)
at __webpack_require__ (bootstrap:19:1)
at ./app/javascript/packs/documents.js (documents.js:1:1)
at __webpack_require__ (bootstrap:19:1)
at bootstrap:83:1
at bootstrap:83:1
というJSエラーになってしまいます
https://github.com/Rovak/InlineAttachment
このライブラリが7年前ぐらいで更新がとまってるので webpack に対応してないのかなと思うんですが動かす方法はないでしょうか
テスト環境の構築
rails new markdown-test
cd markdown-test
# MySQL の設定だけ既存環境からもってきました
cp ../config/database.yml config/
cp ../Gemfile .
vi config/webpacker.yml
# development
# check_yarn_integrity: false に修正
yarn add simplemde
yarn add inline-attachment
bundle install
bundle exec rails webpacker:install
bundle exec rails g scaffold document
vi app/javascript/packs/application.js
# require("./documents.js") 追加
vi app/javascript/packs/documents.js
# ブログのコード追加
bundle exec rails s -b 0.0.0.0
で localhost:3000/documents/ にアクセスしてみました
まだビューもコントローラも何も触ってない状態で
とりあえずJSのモジュールエラーだけ無くしたいです
https://github.com/codemirror/codemirror5/issues/5484
こちらの codemirror のリポジトリに webpacker から使うとうまく動かないみたいな話があるんですが
そもそも codemirror は webpacker 経由で追加したものじゃなく
inline-attachment 内のサブフォルダにおいてあるものなので関係なさそうですが
yarn add codemirror してそこにあるコードを試してみましたが変わりませんでした
yarn lock を比較したところブログで公開してくれてるリポジトリと同じものが入っていました
https://github.com/nobu17/rails_markdown_drag_and_drop/blob/master/yarn.lock
simplemde@^1.11.2:
version "1.11.2"
inline-attachment@^2.0.3:
version "2.0.3"