Search code examples
javascriptmeteorfroalaatmosphere.js

Meteor froala:editor-reactive save on change of data


I have Meteor project which uses the froala:editor-reactive package in order to set the user's about me field.

Here is my template js code:

Template.profile.helpers({
  getAbout: function() {
    return Meteor.user().profile.about;
  },
  doSave: function (e, editor) {        
    // Get edited HTML from Froala-Editor
    var newHTML = editor.getHTML();
    // Do something to update the edited value provided by the Froala-Editor plugin, if it has changed:
    if (!_.isEqual(newHTML, Meteor.user().profile.about)) {
      Meteor.call("updateTestimony", Meteor.userId(), newHTML);
    }
    return false; // Stop Froala Editor from POSTing to the Save URL
  }
}

Here is my template html code:

<template name="profile">
  <div>
    {{> froalaReactive _onbeforeSave=doSave _value=getAbout}}
  </div>
</template>

It's supposed to save as the value changes (I hope). But I have an error with the line var newHTML = editor.getHTML(); and I've also tried var newHTML = editor.html.get(true);. Both of these result in an error where it cannot read the property of html or getHTML. I'm hoping this is just a syntax error and I need something else but what's wrong here?


Solution

  • Per the plugin docs, try:

    var newHTML = editor.html.get(true /* keep_markers */);
    

    If that doesn't work, you may possibly be using a different version. In which case, give the following syntaxes a shot:

    var newHTML = $('.your_selector').editable('getHTML', true, true);
    
    var newHTML = $('.your_selector').froalaEditor('html.get', true);
    

    More from the official docs here and see this question.