Skip to content

Instantly share code, notes, and snippets.

@scripting

scripting/mediumTestBed.html

Created July 20, 2015 21:20
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 scripting/9e7fc46404b55a7bdb1d to your computer and use it in GitHub Desktop.
Save scripting/9e7fc46404b55a7bdb1d to your computer and use it in GitHub Desktop.
Download ZIP
A place for me to test Medium-Editor, for possible inclusion in MyWord Editor. There's a link to a running version of the app in the comment thread, below.
Raw
mediumTestBed.html
<html>
<head>
<title>medium-editor test</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">
<link href="http://fargo.io/code/ranchoFont.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://fargo.io/code/editors/mediumeditor/dist/css/medium-editor.css">
<link rel="stylesheet" href="http://fargo.io/code/editors/mediumeditor/dist/css/themes/default.css">
<script src="http://fargo.io/code/editors/mediumeditor/dist/js/medium-editor.js"></script>
<script>
var appConsts = {
productname: "mediumEditorTest",
productnameForDisplay: "medium-editor test",
description: "A simple test-bed for medium-editor.",
domain: "myword.io",
version: "0.40"
}
function everySecond () {
var newHtml = $("#idEditor").html ();
if (newHtml != localStorage.mediumEditorText) {
localStorage.mediumEditorText = newHtml;
console.log ("everySecond: saved " + localStorage.mediumEditorText.length + " chars in localStorage.mediumEditorText.");
}
}
function startup () {
console.log ("startup");
if (localStorage.mediumEditorText === undefined) {
localStorage.mediumEditorText = "";
}
$("#idEditor").html (localStorage.mediumEditorText);
var editor = new MediumEditor (".divEditor", {
placeholder: {
text: "Obviously this is a good place to type something."
},
buttonLabels: "fontawesome"
});
self.setInterval (everySecond, 1000);
}
</script>
<style>
body {
font-family: Ubuntu;
font-size: 18px;
line-height: 140%;
background-color: whitesmoke;
}
.divPageBody {
width: 60%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.divEditor {
padding: 3px;
border: 1px solid silver;
margin-top: 30px;
}
.divEditor p {
margin-top: 3px;
margin-bottom: 17px;
}
:focus, :visited:focus {
outline: none;
background-color: white;
}
p {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="divPageBody">
<h1>Testbed for medium-editor</h1>
<p>A place for me to test <a href="https://github.com/yabwe/medium-editor">medium-editor</a>. 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>
<div class="divEditor" id="idEditor">
</div>
</div>
<script>
$(document).ready (function () {
startup ();
});
</script>
</body>
</html>
@scripting
Copy link
Author

Here's the running version of this example.

http://myword.io/testing/mediumeditor.html

@jkishner
Copy link

I did some testing, was able to add a link; create h2 and h3 subheaders; bold, ital, and underline text; create a blockquote; add an image. (Looks like image is converted to base64 in localStorage). Don't know if this is a bug, but once I've bolded or underlined or blockquoted a selection, if I hit return to start a new paragraph, it's still in the same mode (e.g., it's still a blockquote, or bolded or underlined). I was expecting after hitting return to get a "clean break" and go back to unformatted text.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment