Code


Version 5 (modified by [530], 8 years ago) (diff)

--

RichTextField

A attempt at intergrating tinymce completely as a own field

Adding the field type

project_dir/local_models.py

from django.db.models import fields
from django.utils.html import escape
from django import forms
import settings  
    
class LargeRichTextField(forms.TextField):
    def __init__(self, field_name, rows=10, cols=40, is_required=False, validator_list=[], maxlength=None):
        self.field_name = field_name
        self.rows, self.cols, self.is_required = rows, cols, is_required
        self.validator_list = validator_list[:]
        if maxlength:
            self.validator_list.append(self.isValidLength)
            self.maxlength = maxlength

        # should be able to add the admin js here somehow


    def render(self, data):
        if data is None:
            data = ''
        if isinstance(data, unicode):
            data = data.encode(settings.DEFAULT_CHARSET) 

        # adds a class to activate editor via editor_selector

        return '<textarea id="%s" class="v%s%s mceEditor" name="%s" rows="%s" cols="%s">%s</textarea>' % \
            (self.get_id(), self.__class__.__name__, self.is_required and ' required' or '',
            self.field_name, self.rows, self.cols, escape(data))

class RichTextField(fields.Field):
    def get_manipulator_field_objs(self):
        return [LargeRichTextField]


Adding the neccesary javascript

Unpack tinymce so tiny_mce.js ends up here: /media/js/tinymce/jscripts/tiny_mce/tiny_mce.js

/media/js/tmce.js

	tinyMCE.init({
		mode : "specific_textareas", // only specific textareas
                editor_selector : "mceEditor", // specified by the mceEditor class
		theme : "advanced",
		plugins : "table,save,advhr,advimage,advlink",
		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,sub,sup,removeformat,charmap,separator,justifyleft,justifycenter,justifyright,bullist,numlist,outdent,indent,separator,formatselect,styleselect,code",
        theme_advanced_buttons2 : "cut,copy,paste,separator,search,replace,image,link,anchor,separator,tablecontrols",
		theme_advanced_buttons3 : "",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_path_location : "bottom",
		theme_advanced_styles : "Left=left;Right=right;", // possible classes
        content_css : "/media/js/tmce.css", // add css styles
	    plugin_insertdate_dateFormat : "%Y-%m-%d",
	    plugin_insertdate_timeFormat : "%H:%M:%S",
		extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        width : "640", height : "350" // set size of field
	});

Using the field in the model

project_dir/appdir/models.py

from django.db import models
import local_models       

class Page(models.Model):
        
    label = models.CharField(maxlength=255)

    text = local_models.RichTextField()
    
    def __repr__(self):
        return self.label
        
    class Admin:
        js=['../js/tinymce/jscripts/tiny_mce/tiny_mce.js', '../js/tmce.js'] 
        # this should be added automatically by the field somehow, but only once, not per field instance