-
-
Save ringe/8332578 to your computer and use it in GitHub Desktop.
<div id=page_1 data-url=/pages/1><> | |
<h1 class="rest-in-place" data-attribute="title">Nord-Norges stØrste næringsmagasin</h1> | |
<div id=pagebody_1 class="pagebody" data-attribute="body" data-formtype="trumbowyg" tabindex=1> | |
<h1>mama</h1> | |
<p>written text</p> | |
</div> | |
<script> | |
$("#pagebody_1").restInPlace(); | |
</script> | |
</div> |
// Define the Trumbowyg form type for RestInPlace | |
var trumbowyg = { | |
"trumbowyg" : { | |
activateForm: function() { | |
var _this = this; | |
var domid = this.$element[0].id; | |
this.$element.trumbowyg({ | |
autogrow: true | |
}); | |
this.$element[0].focus(); | |
this.$element.keyup(function(e){ | |
if (e.keyCode === 27) { | |
$("#"+domid).trumbowyg("destroy"); | |
return _this.abort(); | |
} | |
}); | |
return this.$element.focusout(function() { | |
var updateRequest, data; | |
data = _this.getEncodedTokenAuthenticationParams(); | |
data["_method"] = 'put'; | |
data["" + _this.objectName + "[" + _this.attributeName + "]"] = _this.$element[0].innerHTML; | |
_this.$element.trigger('update.rest-in-place', data); | |
updateRequest = _this.ajax({ | |
type: "post", | |
data: data | |
}); | |
updateRequest.done(function(data) { | |
if (data) { | |
return _this.loadSuccessCallback(data); | |
} else { | |
return _this.loadViaGET(); | |
} | |
}); | |
updateRequest.fail(function(jqXHR, textStatus) { | |
if (jqXHR.status === 200 && textStatus === "parsererror") { | |
return _this.loadViaGET(); | |
} else { | |
_this.$element.trigger('failure.rest-in-place'); | |
return _this.abort(); | |
} | |
}); | |
_this.$element.trumbowyg("destroy"); | |
$(domid).restInPlace(); | |
// return _this.update(); // does not work | |
}); | |
}, | |
getValue: function() { | |
return null; | |
return this.$element[0].innerHTML; // does not do anything | |
} | |
} | |
}; | |
// Extend RestInPlaceEditor with Trumbowyg form type | |
$.extend(RestInPlaceEditor.forms, trumbowyg); |
I'm creator of Trumbowyg, I don't understand the problem with Trumbowyg.
I think the @janv solutions are simply and good way to do what you want.
Sorry for the very long time it took to get back to this.
The suggestion @janv had works:
"trumbowyg" :
activateForm : ->
domid = "#" + @$element[0].id
@$element.trumbowyg
autogrow: true
@$element[0].focus()
@$element.keyup (e) =>
if e.keyCode == ESC_KEY
@$element.trumbowyg("destroy")
@abort()
@$element.focusOut =>
@update()
@$element.trumbowyg("destroy")
getValue : ->
@$element.html()
See https://github.com/ringe/rest_in_place/
The problem right now is that the @update() function returns the text to the page with literal tags. Is there something I should think of to parse the HTML? $.parseHTML doesn't make a difference.
A page refresh shows that the HTML was correctly returned and saved to the server.
Hm. Focus out leaves the text with the tags, which then get parsed by trumbowyg on the next edit, which is then posted back. Then it looks like this:
<b>saving</b>...
If I click the HTML button in Trumbowyg, the tags get sanitized.
Is this a Trumbowyg error?
I've made a pull request at janv/rest_in_place#47
Hm, I'm not familiar with Trumbowyg, but this should work:
this.$element.focusout(function(){ _this.update(); _this.$element.trumbowyg("destroy") })
should be the default way to leave the editor. update will use getValue to grab the html, then trumbowyg will be removed.getValue = function(){return this.$element.html()}