SimpleEditor内でMediumEditor gemを実装する方法は？

Question

MediumEditorを、ユーザーがテキストを書くことができるシンプルなフォームフィールドに追加したいと考えています。レールにはgemがありますが、単純な形式で実装する方法はわかりません。f.inputフィールドはどのように見えますか？

Answer 1

MediumEditorのドキュメントによると、これはそれを使用する方法である：

あなたは今、新しいMediumEditorオブジェクトをインスタンス化することができます：上記のコードは.editableですべての要素を変換します

<script>var editor = new MediumEditor('.editable');</script> 

をクラスをHTML5編集可能なコンテンツに変換し、それらにメディアエディタツールバーを追加します。

入力エレメントをidまたはclassで参照する必要があります。 form_forを使用している場合、生成する入力要素のIDは"OBJECT_ATTRIBUTE"の形式に従います。OBJECTはフォームを作成するオブジェクトの名前、ATTRIBUTEはフォームフィールドが対応する属性の名前ですに。

フォームは次のようになりますのであれば：

<%= form_for @article do |f| %> 
    <%= f.text_area :body, size: "60x12" %> 

結果のHTML要素には、次のようになります。

  <textarea id="article_body" name="article[body]" cols="60" rows="12"></textarea> 

ですから、MediumEditorコンストラクタにid"article_body"を渡す必要があるだろう、このように：

<script>var editor = new MediumEditor('#article_body');</script> 

そのフォームビルダのオプションとして渡すあなたのinput要素のための任意のidやclassを選択します。

<%= f.text_area :body, size: "60x12", id: "my-medium-editor-text-area" %> 

---

編集：私はちょうどあなたが簡単なフォームを使用している気づきました。あなたがカスタムidを単純なフォームを使って渡したければ、それは次のようになります：

<%= f.input :article, input_html: { id: "my-medium-editor-text-area" } %>