2010-08-16 13 views
6

मुझे रेल के लिए WYSIWYG रत्न/प्लगइन्स के साथ कई समस्याएं आई हैं, इसलिए मैं रेडक्लोथ मणि का उपयोग कर खुद को बना रहा हूं। मैं चाहता हूं कि उपयोगकर्ता अपने एचटीएमएल-स्वरूपित पाठ का लाइव पूर्वावलोकन देखें क्योंकि वे एक फॉर्म भर रहे हैं, लेकिन यह नहीं जानते कि jQuery और RedCloth का उपयोग करके इसे कैसे किया जाए। यहाँ है कि मैं क्या application.js में करने की कोशिश की है:मैं jQuery का उपयोग कर रेडक्लोथ लाइव पूर्वावलोकन कैसे बना सकता हूं?

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

नहीं आश्चर्य है कि यह काम नहीं किया, के बाद से RedCloth.new शायद .js फ़ाइल में निष्पादित नहीं किया जा सकता है, लेकिन पता नहीं है किसी और कैसे गतिशील रूप से प्रारूप करने के लिए ये पाठ।

उत्तर

4

मैं सिर्फ इस मुद्दे के साथ अपने आप को सामना करना पड़ा। के रूप में ज्योफ & एंडी द्वारा उल्लेख आप, 2 विकल्प हैं:

  1. उपयोग जावास्क्रिप्ट उसे अपने पृष्ठ
  2. उपयोग एक एक अजाक्स कॉल में रहना सर्वर से पार्स कपड़ा पाने के लिए कपड़ा और jQuery पार्स करने के लिए और पेज

मैं jquery के साथ स्क्रिप्टैक्टुलस को प्रतिस्थापित करने के लिए http://github.com/aaronchi/jrails का उपयोग कर रहा हूं, जो चीजों को थोड़ा आसान बनाता है।

यहाँ मैं क्या किया है:

मैं विकल्प 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 में यह कर सकता है, और आप environment.rb में RedCloth मणि) gem.config करने की आवश्यकता होगी क्योंकि:

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

अंत में, अपने routes.rb में इस डाल करने के लिए याद :

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

मैं जावास्क्रिप्ट के साथ बहुत अनुभवहीन हूं (मैं सिर्फ एक तरह से चीजों को एक साथ हैक), इसलिए मुझे यकीन है कि जे एस यहाँ सुधार किया जा सकता हूँ।

ध्यान रखें कि सर्वर संसाधनों पर यह एक प्रमुख हिट है यदि आपके पास बहुत से उपयोगकर्ता हैं। यदि ऐसा है तो आप जावास्क्रिप्ट के साथ क्लाइंट पक्ष पर कपड़ा को संसाधित करने से बेहतर होगा।

+0

यदि आपके पास किसी पृष्ठ के भीतर बहुत सारे टेक्स्टरेयर हैं तो यह निश्चित रूप से काम नहीं करेगा। – kgpdeveloper

+0

यदि कोई दिलचस्पी लेता है, तो मैंने एक मणि बनाया है https://github.com/bridgeutopia/textile_editor_helper – kgpdeveloper

0

मुझे लगता है कि आपको जावास्क्रिप्ट में ऐसा करने की आवश्यकता होगी, जब तक कि आप किसी कुंजीपटल ईवेंट या उन पंक्तियों के साथ कुछ एजेक्स कॉल नहीं करना चाहते।

यह लिंक कुछ अच्छी संसाधन उपलब्ध हैं: JavaScript libraries for Markdown, Textile and others; Anchor references

+0

आप जो करने का प्रयास कर रहे हैं वह रन सर्वर कोड (रेडक्लोथ) क्लाइंट-साइड है, जो काम नहीं करेगा। आप या तो [jQuery से पोस्ट] का उपयोग कर सकते हैं (http://api.jquery.com/jQuery।पोस्ट/कंट्रोलर एक्शन पर डेटा, रेडक्लोथ को कॉल करें, फिर उदाहरण के लिए एचटीएमएल को 'respond_to' ब्लॉक के अंदर आंशिक रूप से वापस करें, या [शोडाउन] (http://attacklab.net/showdown/) जैसे कुछ देखें। यदि आप क्लाइंट साइड पर मार्कडाउन स्रोत को पूरी तरह से पार्स करना चाहते हैं। यदि आपने शोडाउन का उपयोग किया है और मार्कडाउन से HTML बनाया है, तो आप सर्वर पर मार्कडाउन या HTML पोस्ट कर सकते हैं। –

संबंधित मुद्दे

 संबंधित मुद्दे