我有一个显示图标选择工具栏的对象,就像在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();
答案 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匹配。)
通过这种方式,您可以嵌套资源库并减少主清单文件中的行。