###前提・実現したいこと
rails4.2.3.
ローカル環境
Qiita::Markdownのプレビューを同じページ内にライブプレビューで表示(teratailのようなプレビュー表示)を実装したいと思っています。
###発生している問題・エラーメッセージ
現在、一通りの実装を終えたのですが、肝心のプレビューがリアルタイムで反映されません。
上記の画像は一度投稿した内容を編集する際の画像です。
画像のように投稿した内容はプレビューで表示されるのですが、内容を変更してもプレビューの表示は変わりません。
今回実装するために考えた作成方法は、
textareaでのkeyup,changeイベントをキャッチしてtextareaの内容を得る。
その内容をパラメータに設定して、変換結果を得る。
その変換結果をプレビューに設定して表示する。
といったものです。
###該当のソースコード
app/controllers/plugins_controller.rb
class PluginsController < ApplicationController include ApplicationHelper before_action :set_plugin, only: [:edit, :update, :destroy] def index @plugins = Plugin.all @q = Plugin.ransack(params[:q]) @plugins = @q.result(distinct: true) end def new @plugin= Plugin.new end def edit end def create @plugin = Plugin.new(plugins_params) respond_to do |format| if @plugin.save format.html { redirect_to plugins_path, notice: '投稿しました。' } format.json { render :show, status: :created, location: @plugin } else format.html { render :new } format.json { render json: @plugin.errors, status: :unprocessable_entity } end end end def update respond_to do |format| if @plugin.update(plugins_params) format.html { redirect_to plugins_path, notice: '編集しました。' } format.json { render :show, status: :ok, location: @plugin } else format.html { render :edit } format.json { render json: @plugin.errors, status: :unprocessable_entity } end end end def destroy @plugin.destroy respond_to do |format| format.html { redirect_to plugins_path, notice: '削除しました。' } format.json { head :no_content } end end def api_markdown markdown = qiita_markdown(params[:text]) pp markdown render text: markdown end private def plugins_params params.require(:plugin).permit(:title, :content) end def set_plugin @plugin = Plugin.find(params[:id]) end end
config/routes.rb
Rails.application.routes.draw do 省略 resources :plugins, only: [:index, :new, :create, :edit, :update, :destroy] post 'api_markdown' => 'plugins#api_markdown'
app/views/plugins/_form.html.erb
<%= form_for(@plugin) do |f| %> 省略 <%= f.label :機能 %> <%= f.text_field :title, class: 'form-control' %> <div class="field"> <%= f.label :説明 %> <%= f.text_area :content, cols: 70, rows: 10 %> </div> <%= f.submit 'Create' %> <% end %> <div id="preview"><%= qiita_markdown(@plugin.content) %></div> <%= link_to "Back", plugins_path %>
app/assets/javascripts/plugins.coffee
$ -> update_preview = (text) -> $.ajax url: '/api_markdown' type: 'POST' data: {text: text} success: (data) -> $('#preview').html(data) return error: (xhr, status, err) -> $('#preview').html 'エラー発生 ' + err return $('#plugin_content').on 'keyup change', -> update_preview($(this).val()) return
以上が今回記述したコードです。
何か誤りや修正点、またはアドバイスでもいいのでご教授頂けると助かります。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/23 14:59