12. Django 1.8 Server Build - CentOS 7 hosted on VPS - TinyMCE 2

This chapter is the continuation from 11. Django 1.8 Server Build - CentOS 7 hosted on VPS - TinyMCE.

TinyMCE is a platform-independent web-based JavaScript/HTML WYSIWYG editor control software under. It has the ability to convert HTML text area fields or other HTML elements to editor instances. TinyMCE is designed to easily integrate with content management systems, including Django, Drupal, Joomla!, WordPress and SOY CMS.

Here is what we've got so far:

If we type in html tags inside the text field, Django actually escape and does not render them :

So, we need to work on our template to tell Django what to do with the tags:

{% extends "base.html" %}
{% block content %}
    <div id="home_copy">
        {{ homepage.homecopy|safe }}
    </div>
    <a href="cars/">View the Cars list</a>
{% endblock %}

Then, we can see it's been rendered with the given color html tag:

But we want to give the user the ability to directly manipulate the document without having to type the html commands. In other words, we want to have WYSIWYG HTML Editor.

We'll use tinyMCE to do that. Here is pages/admin.py:

from django.contrib import admin
from pages.models import HomePage

class TinyMCEAdmin(admin.ModelAdmin):
    class Media:
        js = ('/static/js/tiny_mce/tiny_mce.js', '/static/js/tiny_mce/textareas.js',)

admin.site.register(HomePage, TinyMCEAdmin)

/srv/www/djangotest.sfvue.com/public_html/static/js/tiny_mce/textareas.js:

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,fullscreen,code",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,sub,sup,|,charmap",

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
//content_css : "/css/style.css",

template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",

// Style formats
style_formats : [
    {title : 'Bold text', inline : 'strong'},
    {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
    {title : 'Help', inline : 'strong', classes : 'help'},
    {title : 'Table styles'},
    {title : 'Table row 1', selector : 'tr', classes : 'tablerow'}
],

width: '700',
height: '400'
});

Restart our web server:

$ sudo apachectl restart

Finally, we get WYSIWYG:

Our home page looks like the same as we saw in WYSIWYG!

The last thing we want to do is to limit the capability of the user. Usually, for other users, we should uncheck the in the picture below: