Combine Trumbowyg with RestInPlace. I had some difficulties extending RestInPlaceEditor.forms with the "trumbowyg" type. Mainly because the callbacks are not documented in Trumbowyg, I believe. I was not able to use the RestInPlace method _this.update(); but had to copy the code from restinplace.js and implement a custom ajax handling. This leav…

editablepage.html

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

trumbo_in_place.js

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

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