16197

Need to autosave TinyMCE

Question:

I am looking for some help autosaving tinyMCE. I want to save the content within tiny into its respective textarea after content has been updated. So that when I make an ajax call the content is in the textarea ready to be posted.

Currently I have this little bit of code but it only updates the text area when you press a button in tiny (like bold, italics, underline, etc). I also have the link where I found the code. Any help would be appreciated.

$('.AjaxEdit textarea.tiny').tinymce({ //other init options //need this function to save tiny data before Ajax call //http://www.webmasterkitchen.com/article/tinymce-ajax-form-submission/ setup : function(ed) { ed.onChange.add(function(ed) { tinyMCE.triggerSave(); }); } });

Answer1:

You're best bet is to adjust your AJAX call so it pulls the content straight from TinyMCE or triggerSave just before the AJAX call rather than trying to constantly have the textarea in sync with the editor content. Serialising and filtering the entire document so it can be stored on every change is a major performance hit.

If you <em>really</em> need to keep the textarea in sync, you'd have to add DOM modification listeners to the document in the iframe that TinyMCE creates to store the content - you can retrieve it with the getDoc() function (see <a href="http://tinymce.ephox.com/documentation/api/index.html#class_tinymce.Editor.html-getDoc" rel="nofollow">http://tinymce.ephox.com/documentation/api/index.html#class_tinymce.Editor.html-getDoc</a>). You are going to have major performance problems here though.

Regards,

Adrian Sutton<br /><a href="http://tinymce.ephox.com" rel="nofollow noreferrer">http://tinymce.ephox.com</a>

Answer2:

Though the question is quite old, I've came accross while searching for a plugin. At the end I've implemented my own plugin.

I have written a plugin that sends the form data to the specified url every x seconds. <a href="http://vsk.me/8/adding-an-autosave-plugin-to-tinymce" rel="nofollow">I have blogged it here.</a>

In short, the idea is to create an iframe, change the target and action of the form dynamically, and submit the form to stimulate an ajax effect. Once saved, I am putting the form element into its initial state so that if the user wants to save manually he or she will not have any difficulties.

Please note that the plugin I've written is for tinymce4. You'll have to change the source code a bit for older versions.

Answer3:

You should take a look at this autosave plugin <a href="http://code.google.com/p/tinyautosave/" rel="nofollow">http://code.google.com/p/tinyautosave/</a>

Answer4:

FYI, I have done it like this:

$('textarea.wysiwyg').tinymce({ ... onchange_callback : function(inst) { // Prints the DOM element (textarea) to the console. console.log( inst.getElement() ); // Prints the content of tinyMCE to the console. console.log( inst.getBody().innerHTML ); } });

<a href="http://www.tinymce.com/wiki.php/Configuration%3aonchange_callback" rel="nofollow">Official documentation on the onchange_callback event</a>

Recommend

  • JavaScript: modify prototype of an object's variable?
  • SSH, run process and then ignore the output
  • Get value of selected drop down list item
  • Insert a multiline string with arbitrary special characters to a template file in a shell script
  • multiple options for a community connector configuration in Google Data Studio
  • Select Earliest Order for a set of tests in a daterange SQL
  • How to upload excel file in angular js?
  • How to get the relative position of a Dictionary element?
  • how to auto center objects in a form in access 2007?
  • Html select multiple get all values at onchange event
  • Can I use jquery to blank textarea fields or ajax like input boxes?
  • Jhipster: How to create relationships with User entity using supplied tools?
  • C++ accessing vector
  • Can I use worksheet_change for a specific column only?
  • Iterate twice through a DataReader
  • Count query results on multi-join statements
  • Google OAuth: can't get refresh token with authorization code
  • Validate child input components on submit with Vee-Validate and vue js 2
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • Apache RewriteRule redirection with url encoded
  • Adjust width of select element according to selected option's width
  • Jetty 9 HashLoginService
  • Magento Fatal error: Maximum execution error solution, on WAMP
  • Python urlparse: small issue
  • Django rest serializer Breaks when data exists
  • PostgreSQL Query without WHERE only ORDER BY and LIMIT doesn't use index
  • Read a local file using javascript
  • Syntax for setting draggablecursor property in google maps api
  • Seeking advice on Jetty HttpClient Hang
  • does jqgrid support a multiple checkbox list for editing
  • Optimizing database types to compact database (SQLite)
  • Cross-Platform Protobuf Serialization
  • Do I've to free mysql result after storing it?
  • Angular 2 constructor injection vs direct access
  • how does django model after text[] in postgresql [duplicate]
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • Turn off referential integrity in Derby? is it possible?
  • Django query for large number of relationships
  • UserPrincipal.Current returns apppool on IIS