Skip to content

Instantly share code, notes, and snippets.

@bachmeil
Last active February 6, 2020 15:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bachmeil/7c19e72b9a5c49a85e8cecb0b7a7f3ca to your computer and use it in GitHub Desktop.
Save bachmeil/7c19e72b9a5c49a85e8cecb0b7a7f3ca to your computer and use it in GitHub Desktop.
Simple Trix implementation
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.js"></script>
</head>
<div style="max-width: 850px; margin: auto;">
<trix-editor></trix-editor>
<a onclick="localsave()" href="javascript:void(0);">Save</a> <a onclick="localload()" href="javascript:void(0);">Load</a>
</div>
<script>
function localsave() {
var element = document.querySelector("trix-editor")
localStorage["editorState"] = JSON.stringify(element.editor)
}
function localload() {
var element = document.querySelector("trix-editor")
element.editor.loadJSON(JSON.parse(localStorage["editorState"]))
}
window.onload = localload; // load saved content so it's not lost
setInterval(localsave, 2000); // autosave every two seconds
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment