Google App Engine (with Jinja2 and webapp2) – allow hyperlinks in your textarea using CKEditor

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

http://cdn.ckeditor.com/

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}}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s