0

所以我正在为 ActiveAdmin 表单构建一组 Markdown 助手。到目前为止，我只有斜体字。

#form.html.erb
# ... some form code
    <%= link_to "i", "#", :class => "btn", :id => "italics_button" %>
    <%= f.input :body %>
# ... rest of form omitted

这给了我一个 ID 为“italics_button”的按钮和一个 ID 为 post_body 的 textarea。到目前为止，一切都很好。

现在我有一个咖啡脚本文件来处理将选定文本包装在给定标签中。

#posts.js.coffee
wrapText = (elementID, openTag, closeTag) ->
  textArea = $("##{elementID}") #select the text area
  len = textArea.val().length #total length of the text area
  start = textArea[0].selectionStart # start of the selected text
  end = textArea[0].selectionEnd # end of the selected text
  selectedText = textArea.val().substring(start, end) # The selected Text
  replacement = openTag + selectedText + closeTag # string with the selected text wrapped in the bbcode
  textArea.val(textArea.val().substring(0,start) + replacement + textArea.val().substring(end, len)) # perform the replacement

$('#italics_button').click (event) ->
  event.preventDefault()
  wrapText('post_body', '*', '*')

我相当有信心这段代码是可以的，因为我从几个月前的一个项目中把它撕下来了，我在一个普通的非 AA 表单上做了同样的事情。

我更新了初始化程序以引入自定义 javascript：

# active_admin.rb
# rest of file omitted
config.register_javascript 'posts.js.coffee'

最后，我可以在 Active Admin 的 New Post 页面上看到，包含并编译了 javascript 文件。

但是，javascript 事件似乎没有被调用。当我单击#italics_button 时，页面尝试跟随指向“#”的链接，并且 javascript 不运行。

4

1 回答 1

2

这将在浏览器看到它后立即执行：

$('#italics_button').click (event) ->
  event.preventDefault()
  wrapText('post_body', '*', '*')

你的 CoffeeScript 可能会被加载到页面的元素中，所以当你没有回调时，DOM 中<head>可能不会有任何内容。#italics_button$('#italics_button').click(...)

您可以尝试通常的“文档准备就绪时运行方法”：

$ ->
  $('#italics_button').click (event) ->
    event.preventDefault()
    wrapText('post_body', '*', '*')

或者您可以使用“实时”处理程序：

$(document).on('click', '#italics_button', (event) ->
    event.preventDefault()
    wrapText('post_body', '*', '*')
)

#italics_button如果在服务器将页面发送到浏览器之后动态添加，后者将很有用。

于 2012-11-26T22:27:29.277 回答