<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=338168267432629&amp;ev=PageView&amp;noscript=1">
Programming

Django-tinymce: A WYSIWYG editor for Django

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 …


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

Similar posts

Get notified about the latest in Tech

Be the first to know about new tech from the experts at Bixly!