Rails和wysihtml5 -更改时保存

Question

我们使用gem 'bootstrap-wysihtml5-rails'，'0.3.1.13‘。当焦点丢失时，我想保存文本区域中更改的内容。

我试着在视图中直接使用jquery，周围有script-tag：

$("textarea").live("blur", function(){ alert("Focus lost"); });

如果我使用“模糊”(或焦点输出)，在页面加载时会触发几次警报，但不会在失去焦点时触发，当我使用“更改”时，什么也不会发生。

在另一次尝试中，我尝试使用相同的行为钩入wysihtml5-event：

function integrate_wysihtml5() {
var editor = $('.wysihtml5').each(function(i, elem) {
    $(elem).wysihtml5({
        "font-styles": false, //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": false, //Button which allows you to edit the generated HTML. Default false
        "link": false, //Button to insert a link. Default true
        "image": false, //Button to insert an image. Default true,
        "color": false //Button to change color of font  
    });
});

function onChange() { alert("The content of the editor has changed"); };
editor.on("change", onChange);

}

Answer 1

$('.textarea').wysihtml5({
    events: {
        change: function() {
            var html = this.textarea.getValue();
            //ajax method
        }
    }
}

Answer 2

捕捉变更事件的好方法：

editor.composer.element.addEventListener("keyup", myOnChange);
editor.on("aftercommand:composer", myOnChange);

但我不认为你的每一个都是好的，wysihtml5不是为了在多个可编辑的部分上工作，这里你使用引导版，但我认为它是一样的。这就是我编写jquery.scribe的主要原因

所以，也许就像这样？

$('.wysihtml5').each(function(i, elem) {
    var editor = $(elem).wysihtml5({
        "font-styles": false, //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": false, //Button which allows you to edit the generated HTML. Default false
        "link": false, //Button to insert a link. Default true
        "image": false, //Button to insert an image. Default true,
        "color": false //Button to change color of font  
    });

    editor.composer.element.addEventListener("keyup", myOnChange);
    editor.on("aftercommand:composer", myOnChange);
});

Answer 3

我像这样连接侦听器：

$("#msgtextarea").data("wysihtml5").editor.on("change",function(){
   // Do your stuff
})

希望能有所帮助。