如何使用jQuery创建RedCloth实时预览？
我在Rails的许多WYSIWYG /plugin中遇到了问题，所以我正在使用RedCloth gem自己构建一个。我希望用户在填写表单时可以看到HTML格式文本的实时预览，但不知道如何使用jQuery和RedCloth来做到这一点。以下是我在application.js中尝试的内容：
$('#comment').keyup(function(){
var formatted = RedCloth.new($(this).val()).to_html;
$('#preview').html(formatted);
});这并不奇怪，因为RedCloth.new可能不能在.js文件中执行，但不知道如何动态格式化文本。
回答 2
Stack Overflow用户
发布于 2010-10-01 01:26:02
我只是不得不自己处理这个问题。正如Geoff &Andy提到的，你有两个选择：
- 使用JavaScript解析纺织品，使用jquery将其粘贴到页面中
- 使用Ajax调用从服务器获取解析后的纺织品，并使用jquery将其粘贴到页面
中。
我使用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和partial (_preview.html.haml；它用HAML表示，因为我用的就是它，但你也可以用ERB做这件事，而且你需要用gem.config在environment.rb中处理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处理纺织品。
Stack Overflow用户
发布于 2010-08-17 07:56:29
我认为你需要用javascript来做这件事，除非你想在keyup事件或类似的事情上有一个ajax调用。
这个链接有一些很好的资源：JavaScript libraries for Markdown, Textile and others; Anchor references
https://stackoverflow.com/questions/3498293
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号