Use wysiwyg editor in django admin
When the site structure was finished we had to migrate our content to it. In FeinCMS there are two content types available for storing data: Raw Content and Rich Text. Raw Content is storing and showing simple html code. Rich Text also does the same, just it uses the TinyMCE Wysiwyg Editor to show end edit the data. TinyMCE is a simple javascript based wysiwyg editor what can be integrated to any textarea, because its javascript based, you have to enable javascript in you browser. This way in Rich Text it is much simpler to format texts, tags, links, etc. The latest Mingus also has the TinyMCE integrated to it so it can be used there, too.
In the following you can read the most simplest way to integrate TinyMCE with your admin page:
1. You can download TinyMCE from here.
2. Now, unzip the package you've just downloaded and go to "script" and copy the whole "tiny_mce" folder and put it in your settings.MEDIA_ROOT directory in your project.
3. Create a new HTML file at the following location: "templates/admin/base_site.html". This will replace the default "base_site.html" from the admin app templates.
4. Add the following code to the newly created file, reload your admin page and voila, it works:
{% extends "admin/base.html" %}
{% load i18n %}
{% block title %}{{ title }} | {% trans "Django Admin" %}{% endblock %}
{% block extrahead %}
<script type="text/javascript" src="/{{media_root}}/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,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",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
</script>
{% endblock %}
blog comments powered by Disqus