UEditor 增加本地自动保存功能,更新于2017年11月17日。
Editor.md
Editor.md 是一款开源 Markdown 在线编辑器。在编辑较长文章时,为防止疏忽造成内容丢失,可以添加自动保存功能。
预览地址:
https://www.text.wiki/md/
利用localStorage来暂存数据。当文本框有改动时,将内容存到localStorage里;当页面再次加载时,读取localStorage的值。
假设页面创建的编辑器命名为 mdEditor ,则只需将以下js加入页面即可:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <script> var key = 'default_md_key'; mdEditor.on("load", function(){ var content = localStorage.getItem(key); if(content){ var f = confirm("您上次编辑的文章未提交,是否恢复?内容:\n"+content); if(f == true){ testEditor.setValue(content) } } })
mdEditor.on("change", function(){ localStorage.setItem(key,this.getValue()) }) </script>
|
用户向服务器提交数据并保存成功后,可以删掉key。
1
| localStorage.removeItem(key);
|
UEditor
UEditor 本身有自动保存功能,但并不好用,这里也说明一下配置方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| var key = 'default_ue_key'; var ue = UE.getEditor('editor'); ue.addListener( 'ready', function( editor ) { var content = localStorage.getItem(key); if(content){ var f = confirm("您上次编辑的文章未提交,是否恢复?内容:\n"+content); if(f == true){ UE.getEditor('editor').execCommand('insertHtml', content); } } } );
ue.addListener('contentchange',function(){ var content = UE.getEditor('editor').getContent(); localStorage.setItem(key,content); });
|
用户向服务器提交数据并保存成功后,可以删掉key。
1
| localStorage.removeItem(key);
|