Rails javascript在生产模式下不起作用

时间:2013-03-01 17:07:23

标签: javascript ruby-on-rails assets dev-to-production

我有一个显示图标选择工具栏的对象,就像在skype中一样。图标图像显示正确,但在生产模式下单击图标时,所选图标不会显示在文本中。

我将图标图像html放到控制台,发现它与工具栏中选定图像的组成正确相同。我很困惑。有什么问题?

应用/资产/ Javascript角/ emoticons.js

function EmoticonsToolbar(jquery_element){
  var e = jquery_element;
  var top  = e.offset().top;  // store toolbar button initial position
  var left = e.offset().left;
  var onIconClick_callback;   // method to insert icon image html in text

  this.hide = function(){
    e.hide();
  };

  // icon click event handler
  this.onIconClick = function(eventObject){
    e.hide();
    var html = $(eventObject.target).parent().html().replace(/\n\s+|\s+\n/g, '');




    console.log(html);
    // html here: '<img title="ru.emoticons. " src="/assets/emoticons/24x24/02-72977ee3c26c7946176e85da16a13c98.png">'
    // that url returnes the image if being typed in address bar




    onIconClick_callback(html);
    eventObject.stopPropagation();
    };

  // show icon selection toolbar above the editor button
  this.attach_to = function(element, callback){
    onIconClick_callback = callback;
    var newTop  = element.offset().top  - top  - 10 - e.height();
    var newLeft = element.offset().left - left + 10;
    e.css({top:newTop, left:newLeft, visibility:'visible'}).show();
    };
};

这是一个编辑器面板按钮“Insert emoticon”,它显示了表情符号工具栏,并处理所选图标图像的html。

应用/资产/ Javascript角/控制/用户/位点/ pages.js

function nicEditorEmoticonButton(){   
  var self;
  this.init = function(){
    self = this;
  };

  // Search text input and set focus on it
  var setFocusBackToText = function(){
    $(self.elm).closest('div.widget').find('div.nicEdit-main').focus();
  };

  this.mouseClick = function(eventObject) {
    var paste_icon_html = function(html){
      // create a DOM node from the given html
      var div = document.createElement('div');
      div.innerHTML = html;
      var node = div.childNodes[0];

      // get selection if any, insert html as a Node
      var range = se.getRng();
      range.deleteContents();
      range.insertNode(node);
      range.setEndAfter(node);
      range.setStartAfter(node);
      setFocusBackToText();
    };

    // get nicEdit selected instance - se
    var se = this.ne.selectedInstance;
    if(se){
      emoticonsToolbar.attach_to($(this.button), paste_icon_html);
    } else {
      // no editor selected, so let select this one
      setFocusBackToText();
    }
  };
};


var emoticonButtonOptions = {
  buttons : {
    'emoticonToolbar' : {name : __('Emoticon menu bar button'), type : 'nicEditorEmoticonButton'}
  }, iconFiles : {'emoticonToolbar' : '/assets/emoticons/ab.gif'}
};

我确实运行了rake assets:precompile

更新1 :添加了aplication.js片段

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_self
//= require_tree ./control
//= require_tree ./popup
//= require_tree ./global
//= require_tree ./lib
//= require hide_on_body_click.js
//= require popup_messages.js
//= require root.js
//= require diaries.js
//= require emoticons.js

//... and plenty of code below

更新2 :确定问题出在range.insertNode(node),因为range.deleteContent()确实删除了选择,setFocusBackToText()也完成了工作。

应用/资产/ Javascript角/ emoticons.js

  // get selection if any, insert html as a Node
  var range = se.getRng();
  range.deleteContents();
  range.insertNode(node); // <- doesn't work in production environment
  range.setEndAfter(node);
  range.setStartAfter(node);
  setFocusBackToText();

1 个答案:

答案 0 :(得分:0)

我的情况我建议使用index.js文件。在Rails guide中详细描述(寻找2.1.2)。

在您的目录app/assets/javascripts/control/中,您应创建一个名为index.js的新清单文件,其中包含(简化的)内容:

//= require_tree .

然后在application.js

//= require control

(注意index.js文件的目录名称应与application.js中所需的lib匹配。)

通过这种方式,您可以嵌套资源库并减少主清单文件中的行。