编辑器自动草稿保存,以及优化提示恢复草稿的UI

simditor 编辑器草稿保存功能, 运用 HTML5 的 localStorage 来自动保存用户输入内容。

在 Simditor 的里引入 simditor-autosave 的脚本。

直接在使用了 Simditor 对应的 textarea 中设置 data-autosave 属性,其值将作为内容保存时的路径。

editor2.png


当编辑器的内容发生变化时,会触发一个 valuechanged 事件监听,

 然后将编辑器的内容通过 localStorage 存储到本地.

simditor.png

this.path 是本地储存的地址, getValue() 是simditor自带获取值的方法.

当我们进入编辑器页面时,如果本地存储有草稿,会提示用户是否恢复草稿,

simditor用的是浏览器自带的confirm() ,用户体验极差. 这里我们做了一下优化.使用bootstrap的提示框.看着还行.

当有草稿时,我们先将草稿set到编辑器里,然后弹出一个提示框,询问用户是否恢复草稿,

如果,用户点击 yes ,隐藏弹窗口即可.

如果.用户点击 no 将编辑器的内容清空.


simditor2.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容