javascript - 将 WebStorage API 与 WordPress TinyMCE 编辑器结合使用

Question

我想保留用户使用 WebStorage API 写入 WordPress TinyMCE 编辑器的数据。我在前端启动了编辑器one of my plugin .

条件是，填写完文本区域后，用户可以选择是注册还是登录，此时需要刷新页面。即使页面刷新后，我也想将输入的文本保留到[启用编辑器]文本区域中。我认为 webStorage 将是关键。

但是我无法将 javascript (jQuery) 触发到 TinyMCE 编辑器启用的字段中。我可以在 'tinymce' => false 时让它工作。

有什么方法可以在KeyUp上保存webStorage吗:

• 将 JavaScript 注入(inject) TinyMCE，或者
• 通过任何其他方法吗？

Answer 1

尝试用这样的东西来初始化TinyMCE，我不知道这是否会对你有帮助，但我为你祈祷。 我还评论过保存 localstorage obj 也有某种限制，所以强加​​..

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