My webapp allows users to submit questions and answer questions. I wanted to allow users to be able to submit hypelinks as well as format their contents to make it more visual and informative.
I discovered that I needed to use what’s called the “rich-text editor” which allows users to edit their contents within web browsers. This was exactly what I needed.
There are many popular editors available but I used CKEditor just because it is widely used.
Implementation is very simple. It is also on the website so you probably won’t need to read this post but it’s good to review.
In this example, I did not download the file and instead I added the below code to my HTML header.
<script src="//cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
Add the below code to the body. You are replacing your textarea with CKeditor.
<body>
<textarea name="comment"></textarea>
<script>
CKEDITOR.replace( 'comment' );
</script>
</body>
This is on the website. You can click on the following link for more information
Now it’s time to render the content when users input data using the editor. If you store content in db model and render it using Jinja2, don’t forget to use “safe”, otherwise, your website will display all the HTML tags.
Data gets stored into my “Answer” class and within my class I created a property “content” to store submitted contents. The code will look like this.
{{Answer.content | safe}}
Buzzcoding 