TinyMCE is a JavaScript WYSIWYG editor that converts an HTML textarea field into an editor instance. django-tinymce is a Django application that contains a widget that renders a form field as a TinyMCE editor.
Features of django-tinymce include:
– Using it as a form widget or with a view
– Integrate the TinyMCE spellchecker
Follow the tutorial below to integrate tinymce in django, to create richer forms for your web development needs. (Note: This tutorial shows you how to install and integrate tinyMCE using a virtual env for development. If you are developing projects in Django without using a virtual env, then this might not be the tutorial for you.)
Before you install:
-Make sure you have a version of Django that is 1.0 or higher (if you do not have Django installed, please install it).
1. Activate your virtualenv first, and then install django-tinymce using pip:
pip install django-tinymce
(also install django-staticfiles if needed)
2. Download a build of TinyMCE from http://www.tinymce.com. If you’re developing with javascript using jQuery, downloading the jQuery package would be fine.)
3. Add tinymce to INSTALLED_APPS in settings.py for your project:
INSTALLED_APPS = (
…
‘tinymce’,
)
4. Go to your urls.py and add tinymce.urls to your project:
urlpatterns = patterns(”,
…
(r’^tinymce/’, include(‘tinymce.urls’)),
…
)
This step isn’t required, though, so you may skip this step.
5. Copy the jscripts/tiny_mce directory from the tinyMCE distribution into a directory named js in your media root. (Or make sure it’s in a directory where you can access your JS files.)
–The next steps are the basic usage for tinymce. Numbers with an asterisk * are steps to integrate tinyMCE differently. –
6. Include the tiny_mce.js file in your <head> tag, like this:
<script type = “text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
7. Render your form’s CharField into a textarea.
8. In your JS Script, initialize tinyMCE, like this:
<script type=”text/javascript”>
tinyMCE.init({
mode:”textareas”
});
</script>
Note: You can customize tinyMCE’s buttons on its toolbar. Visit http://www.tinymce.com/ and read the documentation.
*6. Import tinyMCE in the views file that you’d like to use tinyMCE in:
from tinymce.widgets import TinyMCE
*7. Render your form’s CharField into a TinyMCE widget:
blog_post = CharField(widget= TinyMCE(attrs={‘cols’:100, ‘rows’: 80}))
*8. Make sure django-tinymce is importing from django.forms.util. Check tinymce’s widgets.py and make sure that it looks like:
from django.utils.encoding import smart_unicode
For more information about how to integrate tinyMCE, visit these pages:
http://www.tinymce.com/wiki.php
http://readthedocs.org/docs/django-tinymce/en/latest/index.html