0

スカイプのようにアイコン選択ツールバーを表示するオブジェクトを取得しました。アイコン イメージは正しく表示されますが、プロダクション モードでアイコンをクリックすると、選択したアイコンがテキストに表示されません。

アイコン画像のhtmlをコンソールに置いたところ、ツールバーで選択した画像が構成されているのとまったく同じであることがわかりました。私はとても混乱しています。なにが問題ですか？

app/assets/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()

app/assets/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 を探してください)。

ディレクトリに (簡略化された) contentapp/assets/javascripts/control/という名前の新しいマニフェスト ファイルを作成する必要があります。index.js

//= require_tree .

次に、あなたのapplication.js：

//= require control

(index.js ファイルを含むディレクトリの名前は、必要な lib と一致する必要があることに注意してくださいapplication.js)。

このようにして、アセット ライブラリをネストし、メインのマニフェスト ファイルの行を減らすことができます。

于 2013-03-01T18:28:26.667 に答える