In this tutorial we will look at how to create a github style markdown editor with preview button. Github’s markdown editor is used to edit the README.md file. This file contains getting started information about the github repository.
Using EpicEditor
EpicEditor is a JavaScript Library which can embed a mardown editor in an webpage. In this tutorial we will build a Github style markdown tool using EpicEditor.
Download EpicEditor and place it in your demo project. This is how my demo project looks
-index.html
--epiceditor
--themes
--preview
-preview-dark.css
-github.css
-bartik.css
--editor
-epic-dark.css
-epic-light.css
--base
-epiceditor.css
--js
-epiceditor.min.js
-epiceditor.js
Create a Sample Editor
Here is the code for a sample markdown editor like Github style. With just 62 lines of code we created a editor like github’s.
<html>
<head>
<title>Github Style Markdown Editing Preview</title>
<script type="text/javascript" src="epiceditor/js/epiceditor.min.js"></script>
</head>
<body>
<button onclick="preview();">Preview</button>
<button onclick="edit();">Edit</button>
<div id="epiceditor" style="width: 600px; height: 600px; border: 2px solid black"></div>
<br>
<button onclick="commit();">Commit Change to Server</button>
<script type="text/javascript">
var opts = {
container: 'epiceditor',
theme: {
base: '/themes/base/epiceditor.css',
editor: '/themes/editor/epic-light.css'
},
clientSideStorage: true,
file: {
name: 'README.md', //name of local file to open. Its not a real file but just localStorage item.
autoSave: 100 //saves the editor data into the local file every 100ms.
},
button: {
preview: false,
fullscreen: false,
bar: false
}
};
var editor = new EpicEditor(opts);
editor.load();
editor.importFile('README.md',"#Last Commited Content"); //load file data from server for the last commit.
editor.preview();
function commit()
{
var theContent_html = editor.exportFile("README.md", "html");
var theContent_md = editor.exportFile("README.md", "text");
alert(theContent_md);
alert(theContent_html);
//here send data to server to update the file on server side.
}
function preview()
{
editor.preview();
}
function edit()
{
editor.edit();
}
</script>
</body>
</html>
Most of the code above is self explanatory.
A editor represents one file at a time. A file name (here it is README.md) is assigned to the editor. The markdown is stored/updated locally every 100ms. When user clicks the commit button you can retrieve the markdown of the file and send to server.
Whenever page is loaded you can retrieve the markdown of the file from server and load it into the local file using importFile function. Now the editor will show the server version of the file.
