我在使用Rails的许多WYSIWYG宝石/插件时遇到了问题,所以我自己使用RedCloth gem构建了一个。我希望用户在填写表单时看到HTML格式文本的实时预览,但不知道如何使用jQuery和RedCloth。这是我在application.js中尝试的内容:
$('#comment').keyup(function(){
var formatted = RedCloth.new($(this).val()).to_html;
$('#preview').html(formatted);
});
这并不奇怪,因为RedCloth.new可能无法在.js文件中执行,但不知道如何动态格式化文本。
答案 0 :(得分:4)
我必须自己处理这个问题。你有两个选择,正如Geoff& amp;安迪:
我正在使用http://github.com/aaronchi/jrails用jquery替换scriptactulous,这让事情变得更容易。
以下是我的所作所为:
我决定实现选项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中使用gem.config和RedCloth gem):
- if live_textile_preview
= RedCloth.new(live_textile_preview).to_html
最后,记得把它放在你的routes.rb:
中map.resources :whatevers, :collection => {:ajax_update_preview => :post}
我对javascript缺乏经验(我只是在一起破解),所以我确信这里的JS可以改进。
请注意,如果您有大量的并发用户,这会对服务器资源造成重大影响。如果是这种情况,您最好使用javascript在客户端处理纺织品。
答案 1 :(得分:0)
我认为你需要在javascript中执行此操作,除非你想对keyup事件或类似事件进行ajax调用。
此链接有一些很好的资源:JavaScript libraries for Markdown, Textile and others; Anchor references