textareaをcontenteditableでdivに変更したい

Question

前提・実現したいこと

いままでは投稿フォームをtextareaで実装していたのですがtextareaでは拡張することができずdivで代用したいと思いコードを書いてみたのですがdivで実装しても投稿の送信ができません。

<%= f.text_area :text, placeholder: "投稿内容", class: "timeline-post-form-new", rows: "3",onkeyup: "ShowLength(value);",id: "text" %>

を

<div contenteditable="true"></div>

で実装したいのですが色々試してもできませんでした。

わかる方ご教授いただけると幸いです。

ちなみにHTMLに出力された形はこの様になっていました。

<textarea placeholder="投稿内容" class="timeline-post-form-new" rows="3" onkeyup="ShowLength(value);" id="text" name="post[text]" style="overflow: hidden;"></textarea>

Answer 1

例えば <%= f.hidden :text %> を書いておいて、フォーム送信時に内容をコピーするのはどうでしょう？

<div contenteditable="true" id="editableText"></div>

だとして、

$(function() {
  $('button').click(function(e){
    e.preventDefault();
    $('#text').val($('#editableText').html());
    $('form').submit();
  }
})

のようにする形です。