訪問wysihtml5編輯器對象以在「事件」中使用它？

Question

我發現這個在documentation of bootstrap-wysihtml5：

The underlying wysihtml5 object 
You can access the wysihtml5 editor object like this: 

var wysihtml5Editor = $('#some-textarea').wysihtml5().data("wysihtml5").editor; 
wysihtml5Editor.composer.commands.exec("bold"); 

所以，我想這一點：

<script type="text/javascript"> 
    var myCustomTemplates = { 
    link : function(locale) { 
     return "<li>" + 
     "<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" + 
      "<div class='modal-header'>" + 
      "<a class='close' data-dismiss='modal'>&times;</a>" + 
      "<h3>" + locale.link.insert + "</h3>" + 
      "</div>" + 
      "<div class='modal-body'>" + 
      "<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" + 
      "</div>" + 
      "<div class='modal-footer'>" + 
      "<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" + 
      "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" + 
      "</div>" + 
     "</div>" + 
     "<a class='btn' data-wysihtml5-command='createLink' title='" + locale.link.insert + "'><i class='icon-link'></i></a>" + 
     "</li>"; 
    }, 
    "font-styles": function(locale, options) { 
     return "<li>" + 
     "<a class='logo'>Logo</a>" + 
     "</li>" + 
     "<li>" + 
     "<a class='btn btn-paragraph' data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='p'>" + locale.font_styles.p + "</a>" + 
     "</li>" + 
     "<li>" + 
     "<a class='btn btn-paragraph' data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='p'>" + locale.font_styles.p + "</a>" + 
     "</li>"; 
    } 
    } 


    $('#wysihtml5-textarea').wysihtml5('deepExtend', { 
    "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true 
    "emphasis": true, //Italics, bold, etc. Default true 
    "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true 
    "html": true, //Button which allows you to edit the generated HTML. Default false 
    "image": false, //Button to insert an image. Default true, 
    "link": false, 
    "format-code": false, // enable syntax highlighting 
    customTemplates: myCustomTemplates, 
    "events": { 
     "focus": function() { 
     //var wysihtml5Editor = $('#wysihtml5-textarea').wysihtml5().data("wysihtml5").editor; 
     //wysihtml5Editor.composer.commands.exec("insertHTML", "<a href=...>"); 
     } 
    }, 
    parserRules: { 
     tags: { 
     p: {} 
     } 
    }, 
    "stylesheets": ["<%= root_url %>wysiwyg-color.css", "<%= root_url %>github.css"], // CSS stylesheets to load 
    }); 
</script> 

但現在看來似乎是打破了代碼：

而且wysihtml5Editor.composer.commands.exec不工作無論是。

（將文件加載就好了，如果我不包括內部"focus": function() {內容）

什麼這樣做的正確方法嗎？

Answer 1

編輯

這裏有一個最低限度的工作代碼，作爲一個起點使用方法：

// I use this to keep this code out of the global scope. 
// This takes this form: (function($){...})(jQuery); 
// and allows me to use $ without worry about it interfering 
// with other libraries and frameworks that share it's use. 
(function priv($) { 
    // This is another scope thing; I can set the reference 
    // later on, but it will be in the parent scope, so I 
    // can cache these and then access them from within a 
    // window.onload handler, for instance, that I create 
    // further down. 
    var $editor, 
     opts; 

    // A more elegant, clean way of doing what was in the docs. 
    opts = { 
     // Note, it's not necessary to use quotes on labels in 
     // object notation, UNLESS there's something not allowed. 
     // This and format-code have comments ONLY because they 
     // have that infernal dash in there. No others in this 
     // list do, however. 
     'font-styles': false, 
     'format-code': false, 
     emphasis: true, 
     lists: true, 
     html: false, 
     image: false, 
     link: false, 
     events: { 
      // Passing a reference to a function I've declared 
      // later. I could not have this before the actual 
      // functions, though, if I use var onload = function... 
      // since "hoisting" does not occur. So, be careful 
      // emulating this too liberally if you don't under 
      // why it works. 
      load: onload, 
      focus: onfocus, 
      blur: onblur 
     } 
    }; 

    // I'm using the `window.onload` method to setup my editor 
    // AFTER the page has loaded and the DOM is ready. 
    $(window).on('load', function load() { 
     // See, I set this up here, and can access it in the 
     // onload, onfocus, and onblur handlers without 
     // requerying. It's called caching a reference. 
     $editor = $('#wysihtml5-textarea'); 

     $editor.wysihtml5(opts); 
    }); 

    function onload() { 
     console.log('load'); 
    } 

    function onfocus() { 
     console.log('focus'); 
    } 

    function onblur() { 
     console.log('blur'); 
    } 

})(jQuery);​ 

http://jsfiddle.net/userdude/nWebx/5/

---

我把wysihtml5 editor demo在properly running fiddle，然後修改它來運行你的引用代碼：原來的樣子，我收到此錯誤在Chrome控制檯

$(window).on('load', function load(){ 
    /*$('.textarea').wysihtml5(); 
    $(prettyPrint);*/ 

    $('#wysihtml5-textarea').wysihtml5('deepExtend', { 
     "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true 
     "emphasis": true, //Italics, bold, etc. Default true 
     "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true 
     "html": true, //Button which allows you to edit the generated HTML. Default false 
     "image": false, //Button to insert an image. Default true, 
     "link": false, 
     "format-code": false, // enable syntax highlighting 
     customTemplates: myCustomTemplates, 
     "events": { 
      "focus": function() { 
       var wysihtml5Editor = $('#wysihtml5-textarea').wysihtml5().data("wysihtml5").editor; 
       wysihtml5Editor.composer.commands.exec("insertHTML", "<a href=...>"); 
      } 
     }, 
     parserRules: { 
      tags: { 
       p: {} 
      } 
     }, 
     "stylesheets": ["<%= root_url %>wysiwyg-color.css", "<%= root_url %>github.css"], // CSS stylesheets to load 
    }); 
}) 

http://jsfiddle.net/userdude/nWebx/2/

有了這個：

Uncaught ReferenceError: myCustomTemplates is not defined

因此，我評論說，線，並運行。試試看：

http://jsfiddle.net/userdude/nWebx/1/

現在，我使用jQuery的$.on()事件處理方法運行window.onload事件中編輯代碼：

$(window).on('load', function load(){ 
    $('#wysihtml5-textarea').wysihtml5('deepExtend', { 
     ... 
    }); 
}) // <<< I'd try to always using `;` at the end of statements. 

而且我也獲得與focus處理程序沒有錯誤，但我需要檢查它是否以事件運行開始。那麼，myCustomTemplates是什麼？

Answer 2

嘗試是這樣的：

var wysihtml5Editor = $('#some-textarea').wysihtml5().data("wysihtml5").editor; 
wysihtml5Editor.composer.commands.exec("bold"); 
var focusHanlder = function(){ 
    console.log(wysihtml5Editor); 
    wysihtml5Editor.composer.commands.exec("insertHTML", "<a href=...>"); 
} 

var secondFocusHandler = function(){ 
    console.log(this); 
    this.composer.commands.exec("insertHTML", "<a href=...>"); 
}.bind(wysihtml5Editor); 

其中focusHandler使用外部變量wysihtml5Editor和secondFocusHanlder使用該變量作爲this裏面調用。現在將其中一個變量傳遞給focus事件。

下面是使用上wysihtml5Editor事件的一個小例子：https://github.com/xing/wysihtml5/wiki/Events