Login

TinyMCE Widget

Author:
semente
Posted:
August 28, 2009
Language:
Python
Version:
1.1
Tags:
forms wysiwyg form widget modelform tinymce
Score:
1 (after 1 ratings)

Widget for TinyMCE 3.2.6, a WYSIWYG HTML editor for textarea.

Note:

This snippet uses the TinyMCE package thats contains special jQuery build of TinyMCE and a jQuery integration plugin. Anyway, is easily to adapt to standard package.

Usage example:

from django.contrib.flatpages.admin import FlatpageForm
class MyFlatPageForm(FlatpageForm):
    content = forms.CharField(widget=TinyMCEEditor())

TinyMCE download page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe

class TinyMCEEditor(forms.Textarea):

    class Media:
        js = (
            'js/jquery.js',
            'js/tiny_mce/jquery.tinymce.js',
        )

    def render(self, name, value, attrs=None):
        rendered = super(TinyMCEEditor, self).render(name, value, attrs)
        return rendered + mark_safe(u'''<script type="text/javascript">
    jQuery('#id_%s').tinymce({
        script_url : '%sjs/tiny_mce/tiny_mce.js',
        mode : "textareas",
        convert_urls : false,
        width:  585,
        height: 380,
        theme : "advanced",
        plugins : "table,searchreplace",
        theme_advanced_buttons1 : "bold,italic,underline,separator,link,unlink,image,strikethrough,separator,bullist,numlist,separator,indent,outdent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,undo,redo,separator,formatselect,separator,search,replace,separator,code",
        theme_advanced_buttons2 : "tablecontrols",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_path_location : "bottom",
        extended_valid_elements : "a[name|href|target|title|onclick]"
    });
</script>''' % (name, settings.MEDIA_URL))

More like this

  1. Dynamically change admin widgets at runtime by davisd 4 years, 10 months ago
  2. Cleanup dirty HTML from a WYSIWYG editor by denis 5 years, 9 months ago
  3. Creating custom time entries in Django Date widget by adiq 9 months, 1 week ago
  4. DropDownMultiple widget by marinho 6 years, 9 months ago
  5. Sanitize text field HTML (here from the Dojo Toolkit Editor2 widget) by akaihola 7 years, 10 months ago

Comments

valerio.maggio (on February 27, 2012):

Great Snippet! Simple and Clean!

However, I would like to point out that, if used in Django 1.3x+, it requires to substitute settings.MEDIA_URL with settings.STATIC_URL.

Cheers

#

Please login first before commenting.