Javascript 访问wysihtml5编辑器对象以在内部使用它；事件；？

我在以下文件中发现：

所以我试了一下：

 <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（）中，则文件加载很好。{

）

---

正确的方法是什么？

试试这样的方法：

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);

var wysihtml5编辑器=$（“#某些文本区域”）.wysihtml5（）.data（“wysihtml5”）.editor；
wysihtml5Editor.composer.commands.exec（“粗体”）；
var focusHanlder=函数（）{
log（wysihtml5Editor）；
wysihtml5Editor.composer.commands.exec（“insertHTML”，“
编辑

以下是一个最低限度的工作代码，用作起点：

// 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);​



我将代码放在a中，然后修改它以运行引用的代码：

$(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
    });
})

虽然我需要检查事件是否从一开始就运行，
focus
处理程序也没有错误。那么，
myCustomTemplates
中有什么内容？
您是否尝试过将
focus
函数绑定到
wysihtml5Editor
变量，并在事件处理程序中使用它？@helly0d抱歉，我很抱歉JavaScript不是很好，你能给我举个例子吗？你正在给我们展示一个构造函数调用，然后指向一个与CSS文件上的文件
404
错误相关的错误？我很困惑。该文件在该路径上可用吗？你能将其复制/粘贴到你的浏览器并查看该文件吗？如果你能发布更多的代码，也许我们可以查明按正确的方向输入。@Jared Farrish如果我没有将代码包含在
“focus”：function（）中，则文件加载良好{
我只是显示代码中断。@hello0d奇怪，我得到了
未捕获的类型错误：无法调用未定义的方法'exec'
在哪一个上？绑定还是非绑定？这意味着只有以下之一：要么你没有等待
DOMload
完成，要么你还没有实际初始化
WYSICHTML5Editor
正确。我用一个链接编辑了答案（我想你去过那里，如果不去看看的话）；是的，问题是你在
“events”中定义了events:{
，所以我在那里感到困惑。文档只是说了我在问题中发布的内容（不确定我是否做对了）。谢谢你的帮助（我将检查您的代码）。请查看我的编辑，我发布了整个内容。我尝试了上一个演示。因此，事件没有插入任何内容？不，事件没有运行，至少在我的小提琴中。您的错误表明它正在被看到（引用css文件）。抱歉，我有点困惑。那么您遇到的问题与我的问题相同，还是另一个问题？（样式表部分可以删除，这不是真的必要）。当你遇到这样的问题时，你需要停止并开始剥离那些你不需要让脚本工作的东西。因此，我将把东西拿出来（剪切）一次一个，然后重新运行以查看发生了什么。然后我将从头开始构建它，一次一行或一条语句，直到找到问题。我现在的处境是：一切都正常，所以现在我将开始重新添加内容，首先尝试使事件选项（自身）正常工作。这很耗时，但也经过了时间验证。
// 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);​

$(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
    });
})

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