medium-editor
Version:
Medium.com WYSIWYG editor clone.
57 lines (53 loc) • 3.68 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>medium editor | demo</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">
<link rel="stylesheet" href="../dist/css/medium-editor.css">
<link rel="stylesheet" href="../dist/css/themes/default.css" id="medium-editor-theme">
</head>
<body>
<a href="https://github.com/yabwe/medium-editor" class="github-link"><img style="z-index: 100;position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div class="top-bar">
Theme:
<select id="sel-themes">
<option value="themes/default" selected>default</option>
<option value="themes/roman">roman</option>
<option value="themes/mani">mani</option>
<option value="themes/flat">flat</option>
<option value="themes/bootstrap">bootstrap</option>
</select>
</div>
<div id="container">
<h1>Medium Editor</h1>
<div class="editable">
<p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p>
<div>
<div contenteditable="false">
<div>
<h4 selectable="false">this portion is not editable</h4>
<div style="border:1px solid #ededed; padding:40px" contenteditable="true">
<p>this is editable</p>
<p>that seems really neat</p>
</div>
</div>
</div>
</div>
<p>I give Pirrip as my father’s family name, on the authority of his tombstone and my sister,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably </p><p>derived from their tombstones. The shape of the letters on my father’s, gave me an odd idea that he was a square, stout, dark man, with curly black hair. From the character and turn of the inscription, “Also Georgiana Wife of the Above,” I drew a childish conclusion that my mother was freckled and sickly. To five little stone lozenges, each about a foot and a half long, which were arranged in a neat row beside their grave, and were sacred to the memory of five little brothers of mine,—who gave up trying to get a living, exceedingly early in that universal struggle,—I am indebted for a belief I religiously entertained that they had all been born on their backs with their hands in their trousers-pockets, and had never taken them out in this state of existence.</p>
</div>
</div>
<p style="text-align: center;"><small><a style="color: #333;" target="_blank" href="http://www.goodreads.com/reader/475-great-expectations">Source</a></small></p>
<script src="../dist/js/medium-editor.js"></script>
<script>
var editor = new MediumEditor('.editable', {
buttonLabels: 'fontawesome'
}),
cssLink = document.getElementById('medium-editor-theme');
document.getElementById('sel-themes').addEventListener('change', function () {
cssLink.href = '../dist/css/' + this.value + '.css';
});
</script>
</body>
</html>