在线编辑器增加本地自动保存功能[Editor.md,UEditor]

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);

在线编辑器增加本地自动保存功能[Editor.md,UEditor]

https://blog.weixinbook.net/2017/04/07/editor-md-auto-save-markdown.html

作者

David

发布于

2017-04-07

更新于

2023-10-22

许可协议

评论

:D 一言句子获取中...