Comment puis-je créer un RedCloth aperçu en direct en utilisant jQuery?

StackOverflow https://stackoverflow.com/questions/3498293

Question

J'ai eu des problèmes avec la plupart des pierres précieuses WYSIWYG / plugins pour Rails, donc je vais construire moi-même en utilisant la gemme RedCloth. Je veux que les utilisateurs voir un aperçu en direct de leur texte au format HTML comme ils remplir un formulaire, mais je ne sais pas comment faire en utilisant jQuery et RedCloth. Voici ce que j'ai essayé dans application.js: 

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

Non surpris cela n'a pas, puisque RedCloth.new probablement ne peut pas être exécuté dans le fichier .js, mais ne savent pas comment formater dynamiquement le texte.

Était-ce utile?

La solution

Je viens de faire face à ce problème moi-même. Vous avez 2 options, comme évoqué par Geoff & Andy:

  1. Utiliser JavaScript pour analyser le textile et jquery pour le coller dans votre page
  2. Utilisez un un appel Ajax pour obtenir le textile analysé à partir du serveur et de l'utilisation jquery pour le coller dans la page

J'utilise http://github.com/aaronchi/jrails pour remplacer scriptactulous avec jquery , ce qui rend les choses un peu plus facile.

Voici ce que je faisais:

J'ai décidé de mettre en œuvre l'option 2 parce que d'obtenir la mise en forme exactement comme il apparaîtra par RedCloth est primordiale pour mon application.

J'ajouté ce qui suit dans le <head> de ma page: 

<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>

Dans le <body> vous aurez évidemment besoin: 

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

Vous devez les éléments suivants dans votre contrôleur: 

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

Et la partie (_preview.html.haml, il est en HAML parce que ce que je l'utilise, mais vous pouvez le faire en ERB aussi, et vous aurez besoin de gem.config la gemme RedCloth dans environment.rb): 

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

Enfin, rappelez-vous de mettre dans votre routes.rb: 

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

Je suis assez inexpérimenté avec javascript (je viens de genre de choses pirater ensemble), donc je suis sûr que la JS pourrait être améliorée ici.

Sachez que c'est un grand succès sur les ressources du serveur si vous avez beaucoup d'utilisateurs simultanés. Si tel est le cas, vous seriez bien mieux le traitement du textile sur le côté client avec javascript.

Autres conseils

Je pense que vous allez avoir besoin de faire celui-ci en javascript, sauf si vous voulez avoir un appel ajax sur un événement keyup ou quelque chose dans ce sens.

Ce lien a quelques bonnes ressources: Markdown , du textile et d'autres; références d'ancrage

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top