1

tinymce [http://www.tinymce.com/] を twitter ブートストラップ フォームに埋め込んで、postgres データベースに永続化できる書式付きテキストをユーザーが入力できるようにします。

私が直面している問題は、フォームの送信時にプレーンテキストを取得することです。書式設定されたテキストを、永続化して html ページにエコーできる文字列として取得するのを手伝ってもらえますか。

これが私のコードです[注:HAMLを使用しています]

%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}
        %link{:href => "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css", :rel => "stylesheet"}
    %script{:src => "//tinymce.cachefly.net/4.0/tinymce.min.js"}
    :javascript
      tinymce.init({selector:'textarea_format'});
%body
  .container
    %legend Post a New Job
    .well
      %form#signup.form-horizontal{:action => "submit", :method => "post"}
        %legend
        .control-group
          %label.control-label Title
          .controls
            .input-prepend
              %span.add-on
                %i.icon-user
              %input#title.input-xxlarge{:name => "title", :placeholder => "Title", :type => "text"}/
        .control-group
          %label.control-label Description Formatted
          .controls
            .input-prepend
              -#%span.add-on
                -#%i.icon-user
              %textarea_format#message.input-xlarge.span6{:name => "message_formatted", :rows => "10"}
        .control-group
          %label.control-label
          .controls
            %button.btn.btn-success{:type => "submit"} Submit 

tinyMCE.get('content id').getContent() を使用できるようですが、方法がわかりませんか?

私は java-script に非常に慣れていません。必要なコードの変更と説明を投稿してください。

ありがとう

4

1 に答える 1

1

基本的に、これを行う最も簡単な方法は、非表示フィールドをフォームに追加し、送信ボタンにクリック イベント ハンドラーを追加することです。

そのため、「message_formatted」という名前でフォーマットに非表示の入力を作成し(モデルの対応するフィールドは message_formatted と呼ばれていると思うため)、テキストエリアの名前を別の名前に変更します。重要ではなくなります。

jQueryを使用:

$('#signup input[type=submit]').click(function(e){
  $('input[name=message_formatted]').val(tinyMCE.get('content id').getContent());
});

JavaScript を追加する場所に関しては、それはあなた次第です。javascripts ディレクトリに配置するのがベストです (Rails とアセット パイプラインを使用しているかどうかは不明です)。この haml ページ内にインラインで JavaScript を追加するだけの場合はcontent_for :javascript do、ページの下部にある内に上記を配置します。

content_for :javascript do
  // enter the javascript from above here
于 2013-07-10T13:20:56.147 に答える