Introduction
- The ultimate goal of this series is to document my journey as I try to build the mark down editor that Stackoverflow has.
GitHub
Youtube version
The bare minimum
So the ultimate goal is to build a markdown editor from scratch, sound easy, right? Well, as it turns out not really. If you look into it you will notice even the most basic of markdown editors still relies heavily on basic compiler theory. Eventually I will learn all about that kind of stuff and I even found a free online book to help me with all that Computer Sciencey stuff, HERE.
For the moment we just want to be able to type some words have them, show up on screen, be able to add stylings to them and save them to a database. Which means the bare minimum will look like this
- Is it in markdown ?
No
- Does it have good UI?
No
- Does the text update in real time?
Yes
- Can we add stylings to it?
Yes
- Is it good enough for right now?
Yes!!!!!!!!!!!!!!!!!!
How to build it
- We know we want to save it to a database so we start out with a basic HTML form:
<form th:action="@{/admin/blogPost/create}" th:object="${blogPost}" method="post">
<input type="text" th:field="*{title}" id="title" name="title" placeholder="title" class="editorInput">
<input type="submit"/>
<textarea id="my_text_area" th:field="*{body}" name="story" rows="50" cols="90"></textarea>
</form>
<div id="editDisplay" class="display">
</div>
- If you are confused with all the
th:
stuff, don't worry, that is just because I am using spring boot and thymleaf as the templating engine. None of that is really too important to getting the read time display that we want. Just know that we want to be able to type inside of our form and have the text appear inside of the<div id="editDisplay" class="display">
and we do that with JavaScript.
The JavaScript
- To make this happen we really only need 5 lines of java script. Since it is so small I decided to make it inline:
<script th:inline="javascript">
/*<![CDATA[*/
const textArea = document.getElementById('my_text_area');
const editDisplay = document.getElementById('editDisplay');
textArea.addEventListener('input', () => {
editDisplay.innerHTML = textArea.value;
})
/*]]>*/
</script>
- If you are unfamiliar with thymleaf, don't worry about all the weird syntax. What you should care about is that we are using the
input
event to set theinnerHTML
to what we have set in our form.
The database schema
@Entity(name = "blogpost")
public class BlogPost extends AbstractEntity{
public BlogPost(){}
private String title;
@Lob
private String body;
private Integer seriesNumber;
private Date dateCreated;
@ManyToOne
@JoinColumn
private Series series;
//getters and setters below
}
- The schema is pretty straight forward,except for the
@Lob
annotation. We use this to set our body to alarge object
type. This tells Hibernate to store the text as a large object which will take the binary data and store it inside of a table calledpg_largeobject
. If we do not define the body asLob
we can then only store 255 characters in our string, anything more will make the app crash.
Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.
Top comments (0)