Medium-like editor for Django part one


While browsing through articles in Medium, I was always amazed by simple and neat design style, especially its intuitive and human-friendly editor. Here is a screenshot of how the editor looks.

Create a post on Medium

You just keep typing and follow your stream of thoughts. When you want to format some text, just select them and a tool bar will pop up with the most frequently used format style including bold, italic, adding a link or making a quote. It provides the minimum tools you need to start writing your story and keep you focusing on your flow of ideas instead of distracting you with other useless formatting tools. Looks cool right? Want to have it for your own Django website? Great, you have come to the right place. I added this medium-like editor to my Django website. Here is how to write a post on nisprime.com.

Create a post on Nisprime

Adding pictures or embed youtube videos with two clicks? No problem.

When you open a newline, a small plus sign will appear. This is addon button. When you click on that, two more buttons will show up like this.

No need for more explanations. Very intuitive.

Enough talking. Lets dive into this.


Prerequisite

In this article, I assume you have some experience with python and Django web framework. If your are new to these, no problem. I am new too! I will try to use my humble plain english to explain the concepts as clear as possible and I will provide you with lots of external sources that will help you understand the materials. 

Django is a very powerful and flexible python web framework. It provides you with all the handy tools to build your cool websites. Basic info for Django can be found here. It provides you with a step-by-step tutorial and explains the concepts along the way. You need the concepts of url mapping, views, templates, models, forms and some Javascript, CSS knowledge to implement your own medium-like editor.

Basically, Django takes Http request and search the url mapping rules in url.py files to match the request. If a match is found, it will pass the data to the corresponding view methods to serve the request. If it is a GET request, you may lookup your database to fetch the request data through your models and return back the data to your clients. If it is a POST request, you will normally feed the POST data to a Django form object which will help you to manipulate data in your database. In case of writing a post, you will need to save the title, text and date to your database. After you have processed the client's request, you will need to pass your results to Django templates where you can write python codes together with HTML. And then the final HTML will be send back to the clients with some decorations specified in your CSS files. PyCon 2014 has a great video about the python web stack which gives you the whole picture.