twitter-bootstrap 访问 wysihtml5 编辑器对象以在“事件”中使用它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13871799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing the wysihtml5 editor object to use it inside "events"?
提问by alexchenco
I found this in the documentation of bootstrap-wysihtml5:
我在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");
So I tried this:
所以我试过这个：
<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'>×</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>
But it seems like it is breaking the code:
但它似乎正在破坏代码：
GET http://localhost:3000/posts/lib/css/wysiwyg-color.css 404 (Not Found)
And wysihtml5Editor.composer.commands.execis not working either.
而且wysihtml5Editor.composer.commands.exec也不工作。
(The file loads just fine if I don't include the content inside "focus": function() {)
（如果我不包含其中的内容，文件加载就好了"focus": function() {）
What the right way of doing this?
这样做的正确方法是什么？
回答by Jared Farrish
EDIT
编辑
Here's a minimally working code, to use as a starting point:
这是一个最低限度的工作代码，用作起点：
// 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/
http://jsfiddle.net/userdude/nWebx/5/
I put the wysihtml5 editor demoin a properly running fiddleand then modified it to run your referenced code:
我将wysihtml5 编辑器演示放在一个正确运行的小提琴中，然后修改它以运行您引用的代码：
$(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/
http://jsfiddle.net/userdude/nWebx/2/
With this as-is, I receive this error in Chrome Console:
按照原样，我在 Chrome 控制台中收到此错误：
Uncaught ReferenceError: myCustomTemplates is not defined
未捕获的 ReferenceError：未定义 myCustomTemplates
So I comment that line out, and it runs. Try it:
所以我注释掉那行，然后它就运行了。试试看：
http://jsfiddle.net/userdude/nWebx/1/
http://jsfiddle.net/userdude/nWebx/1/
Now, I am running the editor code within a window.onloadevent using jQuery's $.on()event handler method:
现在，我window.onload使用 jQuery 的$.on()事件处理程序方法在事件中运行编辑器代码：
$(window).on('load', function load(){
$('#wysihtml5-textarea').wysihtml5('deepExtend', {
...
});
}) // <<< I'd try to always using `;` at the end of statements.
And I also get no errors with the focushandler, although I need to check that it's event running to beginning with. So, what is in myCustomTemplates?
而且我的focus处理程序也没有错误，尽管我需要检查它的事件是否开始运行。那么，里面有什么myCustomTemplates？
回答by helly0d
Try something like this:
尝试这样的事情：
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);
where focusHandleruses the exterior variable wysihtml5Editorand secondFocusHanlderuses that variable as thisinside the call. Now pass one of those variable to the focusevent.
wherefocusHandler使用外部变量wysihtml5Editor并将secondFocusHanlder该变量用作this调用内部。现在将这些变量之一传递给focus事件。
Here is a little example of using the events on wysihtml5Editor: https://github.com/xing/wysihtml5/wiki/Events
这是在 wysihtml5Editor 上使用事件的一个小例子：https: //github.com/xing/wysihtml5/wiki/Events
