0

我得到了一个对象，它显示了 Skype 中的图标选择工具栏。图标图像显示正确，但是当我在生产模式下单击图标时，所选图标不会出现在文本中。

我将图标图像 html 放到控制台，发现它与工具栏中所选图像的组成完全一样。我很困惑。怎么了？

应用程序/资产/javascripts/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();
    };
};

这是一个编辑器面板按钮“插入表情”，它显示表情工具栏，并处理所选图标图像的html。

app/assets/javascripts/control/user/sites/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()也完成了它的工作。

应用程序/资产/javascripts/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();
4

1 回答 1

0

在你的情况下，我建议使用index.jsfile 。它在这个Rails 指南中有详细描述（查找 2.1.2）。

在您的目录中app/assets/javascripts/control/，您应该创建一个名为index.js（简化的）内容的新清单文件：

//= require_tree .

然后在你的application.js：

//= require control

（注意带有 index.js 文件的目录名称应与 中所需的库匹配application.js）。

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

于 2013-03-01T18:28:26.667 回答