Last active
August 29, 2015 14:25
-
-
Save scripting/fef457e14000b45e75f8 to your computer and use it in GitHub Desktop.
A simple Hello World app for medium-editor, https://github.com/yabwe/medium-editor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Hello World for medium-editor</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="http://fargo.io/code/jquery-1.9.1.min.js"></script> | |
| <link href="http://fargo.io/code/bootstrap.css" rel="stylesheet"> | |
| <script src="http://fargo.io/code/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="http://fargo.io/code/fontAwesome/css/font-awesome.min.css"/> | |
| <link href="http://fargo.io/code/ubuntuFont.css" rel="stylesheet" type="text/css"> | |
| <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script> | |
| <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8"> | |
| <link rel="stylesheet" href="http://fargo.io/code/editors/mediumeditor/dist/css/themes/default.css"> | |
| <script> | |
| function everySecond () { | |
| var s = $("#idEditor").html (); | |
| if (s != localStorage.mediumEditorText) { | |
| localStorage.mediumEditorText = s; | |
| console.log ("everySecond: saved " + s.length + " chars in localStorage.mediumEditorText."); | |
| } | |
| } | |
| function startup () { | |
| console.log ("startup"); | |
| if (localStorage.mediumEditorText === undefined) { | |
| localStorage.mediumEditorText = ""; | |
| } | |
| $("#idEditor").html (localStorage.mediumEditorText); | |
| var editorBody = new MediumEditor (".divEditor", { | |
| placeholder: { | |
| text: "This is a good place to tell your story..." | |
| }, | |
| toolbar: { | |
| buttons: ["bold", "italic", "underline", "strikethrough", "anchor", "h2", "h3", "orderedlist", "unorderedlist", "quote"], | |
| }, | |
| buttonLabels: "fontawesome" | |
| }); | |
| self.setInterval (everySecond, 1000); | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: "Ubuntu"; | |
| font-size: 18px; | |
| background-color: whitesmoke; | |
| line-height: 140%; | |
| } | |
| .divPageBody { | |
| width: 60%; | |
| margin-top: 90px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .divEditor { | |
| font-size: 19px; | |
| letter-spacing: 0.01rem; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.69; | |
| padding-left: 6px; | |
| padding-right: 6px; | |
| border: 1px solid silver; | |
| margin-top: 40px; | |
| min-height: 300px; | |
| } | |
| :focus, :visited:focus { | |
| outline: 1px solid silver; | |
| background-color: white; | |
| } | |
| .divBelowEditor { | |
| margin-top: 35px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="divPageBody"> | |
| <div class="divEditor" id="idEditor"> | |
| </div> | |
| <div class="divBelowEditor"> | |
| <h3>Hello World for medium-editor</h3> | |
| <p>When I was getting started with <a href="https://github.com/yabwe/medium-editor">medium-editor</a>, what I wanted more than anything was a simple Hello World type app, that was a functional editor and nothing more. That's what this app is.</p> | |
| <p>It stores your text in localStorage. Select text to style it. Try adding a link. Drag a small picture into the text. It saves automatically.</p> | |
| <p><a href="http://scripting.com/2015/07/24/mywordEditorGetsMoreBeautiful.html">Dave Winer</a>, July 26, 2015.</p> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready (function () { | |
| startup (); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment