Using WebStorage API with WordPress TinyMCE editor

Question

I want to keep the data what user wrote into the WordPress TinyMCE editor using the WebStorage API. I initiated the editor in front end in one of my plugin.

Condition is, after filling up the textarea user might choose whether to register or login, and at that state they need to refresh the page. I want to keep the typed texts into the [editor enabled] textarea even after the page refresh. I think webStorage would be the key.

But I can't trigger javascript (jQuery) into that TinyMCE editor enabled field. I can make it work while 'tinymce' => false.

Is there any way I can save webStorage onKeyUp, either:

injecting JavaScript to TinyMCE, or
by any other method?

can you try to isolate WP's native TinyMCE instance, and load your custom lib from your plugin maybe?? and do whatever you like :) I had bad experiences with tinymce and what not,, I would suggest to save to webstorage on losing focus not keyup — Kresimir Pendic
Thanks, but I failed initiating TinyMCE in front end with all the possible code I found, except wp_editor(). If you have any active solution that can assist me triggering TinyMCE on any <textarea> in front end, then it'd be much appreciated. — Mayeenul Islam

Kresimir Pendic Kresimir Pendic · Accepted Answer · 2017-01-20T20:40:04

try to init TinyMCE with something like this,, I don't know if that will help you but I hold my fingers crossed for you.. also I have commented saving localstorage obj also there is some kind of limit that SO impose..

// initialize tinymce:
// I loaded it over inline element (div) only cause StackOverflow editor
// can't init normal tinymce with iframe.. 
// you have to replace only this div with your custom textare and give it ID
// and reference it in code
// I have choosen to save text on blur but you can do whatever event you need to update localstorage object
tinymce.init({
  inline: true,
  selector: '#myid',
  height: 100,
  menubar: true,
});

$('#myid').on('blur', function(){
  var temp = $('#myid').text();
  console.log( temp );
  // localStorage.setItem('tempTxt',  temp  );
})

#myid {
  height: 100px; width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<link rel="stylesheet prefetch" href="//www.tinymce.com/css/codepen.min.css">
<link rel="stylesheet" type="text/css" id="u0" href="http://cdn.tinymce.com/4/skins/lightgray/skin.min.css">

<div id=myid>My custom text ..</div>

Using WebStorage API with WordPress TinyMCE editor

1 Answers