Как мне создать предварительный просмотр RedCloth с помощью jQuery? - PullRequest
Новая
       21

Как мне создать предварительный просмотр RedCloth с помощью jQuery?

6 голосов
/ 17 августа 2010

У меня были проблемы со многими гемами / плагинами WYSIWYG для Rails, поэтому я сам создаю их, используя гем RedCloth. Я хочу, чтобы пользователи видели предварительный просмотр своего текста в формате HTML при заполнении формы, но не знаю, как это сделать, используя jQuery и RedCloth. Вот что я попробовал в application.js: 

$('#comment').keyup(function(){
  var formatted = RedCloth.new($(this).val()).to_html;
  $('#preview').html(formatted);
});

Не удивлен, что это не сработало, поскольку RedCloth.new, вероятно, не может быть выполнен в файле .js, но не знает, как еще динамически форматировать текст.

Ответы [ 2 ]

4 голосов
/ 30 сентября 2010

Я просто должен был разобраться с этим вопросом сам. У вас есть 2 варианта, на которые ссылается Джефф и Энди:

  1. Используйте JavaScript для разбора текстиля и jquery, чтобы вставить его на вашу страницу
  2. Используйте вызов Ajax для получения проанализированного текстиля с сервера и используйте jquery, чтобы вставить его на страницу

Я использую http://github.com/aaronchi/jrails, чтобы заменить сценарий на jquery, что немного облегчает задачу.

Вот что я сделал:

Я решил реализовать вариант 2, потому что получение форматирования в точности так, как оно будет отображаться через RedCloth, является для меня первостепенным.

Я добавил следующее в <head> моей страницы: 

<script>
var timeStamp1 = -1;
var timeStampSent1 = -1;
function delay() {
    setTimeout('preview()',1000);
}
function preview() {
    var n = new Date().getTime();
    // Ask for update if textarea was changed since this function last ran
    if (timeStamp1 != -1 && timeStamp1 != timeStampSent1) {
        $.post('/whatevers/ajax_update_preview', $('#textile').serialize(), null, "script");
        timeStampSent1 = timeStamp1;
    }
    delay(); // Run this again in 1000ms
}

// Important for letting you send ajax requests with jquery & rails
jQuery.ajaxSetup({  
    'beforeSend': function (xhr) {xhr.setRequestHeader("Accept", "text/javascript")}  
});


$(document).ready(function(){
    // Event binding to watch for changes to the textarea
    $('#textile').keydown(function() {
      timeStamp1 = event.timeStamp
    });
});
</script>

В <body> вам, очевидно, потребуется: 

<textarea id="textile" name="some_text"></textarea>
<div id="preview"></div>

Вам необходимо следующее в вашем контроллере: 

class WhateversController < ApplicationController
  def ajax_update_preview
    txt = params[:some_text]
    render :update do |page|
      page.replace_html 'preview', :partial => 'preview', :object => txt
    end
  end

И частичное (_preview.html.haml; оно в HAML, потому что это то, что я использую, но вы можете сделать это и в ERB, и вам потребуется gem.config гем RedCloth в environment.rb): 

- if live_textile_preview
  = RedCloth.new(live_textile_preview).to_html

Наконец, не забудьте поместить это в ваши маршруты. Rb: 

map.resources :whatevers, :collection => {:ajax_update_preview => :post}

Я довольно неопытен с javascript (я просто как-то хакнул), поэтому я уверен, что JS здесь можно улучшить.

Имейте в виду, что это серьезный удар по ресурсам сервера, если у вас много одновременных пользователей. Если это так, вам лучше обработать текстиль на стороне клиента с помощью JavaScript.

0 голосов
/ 17 августа 2010

Я думаю, что вам нужно будет сделать это в javascript, если вы не хотите, чтобы ajax-вызов вызывал событие keyup или что-то в этом роде.

Эта ссылка имеет несколько хороших ресурсов: Библиотеки JavaScript для Markdown, Textile и других; Якорные ссылки

...