Changes between Version 37 and Version 38 of AddWYSIWYGEditor


Ignore:
Timestamp:
May 22, 2013, 3:08:53 AM (12 years ago)
Author:
Adam Nelson
Comment:

Deleted the page and sent people to Django Packages. The content was old and misleading . Rewriting it would be good but for now it's best to delete it and put a link to Django Packages

Legend:

Unmodified
Added
Removed
Modified

  • AddWYSIWYGEditor

    v37 v38  
    1 This page describes various ways to add a "What you see is what you get" rich text editing function for editing textfields in django. See also [http://lazutkin.com/blog/2005/aug/26/using_tinymce_djangos_admin].
    2 
    3 === Dojo's dijit.Editor ===
    4 
    5 Why Dojo's dijit.Editor? Modular, simple to use, simple to extend, hosted on Google CDN - the only thing you need is to add two simple static files. No file copying, no upgrade hassles, no server-side code. Detailed description can be found in [http://lazutkin.com/blog/2011/mar/13/using-dojo-rich-editor-djangos-admin/ Using Dojo Rich Editor with Django's Admin]. All necessary snippets can be found in [https://gist.github.com/868595 this Gist on Github].
    6 
    7 === TinyMCE - Via django-tinymce ===
    8 
    9 See the [http://code.google.com/p/django-tinymce/ django-tinymce] application.
    10 
    11 === TinyMCE - Direct ===
    12 
    13 Why TinyMCE? Some reasons are given in [http://www.socialistsoftware.com/post/django-and-tinymce/ Django and TinyMCE] and [http://lazutkin.com/blog/2005/aug/26/using_tinymce_djangos_admin/ Using TinyMCE with Django's Admin]. Try [http://tinymce.moxiecode.com/examples/full.php].
    14 
    15 In order to use TinyMCE with Django you have to do three things:
    16 
    17 1. Go to http://tinymce.moxiecode.com/ and download TinyMCE. Install it somewhere on your web server. It's better to serve it directly bypassing Django machinery. ''Optional: download TinyMCE compressor. You can use it, if your server supports PHP.''
    18 
    19 2. Create configuration file for TinyMCE. Below is my '''textareas.js''' file:
    20 
    21 {{{
    22 tinyMCE.init({
    23         mode : "textareas",
    24         theme : "advanced",
    25         //content_css : "/appmedia/blog/style.css",
    26         theme_advanced_toolbar_location : "top",
    27         theme_advanced_toolbar_align : "left",
    28         theme_advanced_buttons1 : "fullscreen,separator,preview,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,separator,image,cleanup,help,separator,code",
    29         theme_advanced_buttons2 : "",
    30         theme_advanced_buttons3 : "",
    31         auto_cleanup_word : true,
    32         plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,fullscreen",
    33         plugin_insertdate_dateFormat : "%m/%d/%Y",
    34         plugin_insertdate_timeFormat : "%H:%M:%S",
    35         extended_valid_elements : "a[name|href|target=_blank|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]",
    36         fullscreen_settings : {
    37                 theme_advanced_path_location : "top",
    38                 theme_advanced_buttons1 : "fullscreen,separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help",
    39                 theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
    40                 theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print"
    41         }
    42 });
    43 }}}
    44 
    45 Mode "textareas" instructs TinyMCE to convert '''all''' textareas to WYSIWYG editors. I use the advanced theme, and practically all standard plugins, which don't require server support. In inline mode you have minimalistic toolbar with the most essential tools. When you switch to full-screen mode (tool's icon looks like a monitor), you have practically all tools available for advanced editing. You can look up all options in [http://wiki.moxiecode.com/index.php/TinyMCE:Index TinyMCE Documentation].
    46 
    47 (4/22/2010 - note: I tried this today with the latest TinyMCE (3.3.3 Main Package).  I needed to modify the textareas.js file, removing ",zoom,flash" from the "plugins:" section.  The Firebug 'Net' panel showed that the files for these plugins were not there.)
    48 
    49 (8/18/2010 - note: Use tinymce [http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/media "media" plugin] instead, also add "media" to the buttons. Then your '''textareas.js''' could be:
    50 
    51 {{{
    52 tinyMCE.init({
    53         mode : "textareas",
    54         theme : "advanced",
    55         //content_css : "/appmedia/blog/style.css",
    56         theme_advanced_toolbar_location : "top",
    57         theme_advanced_toolbar_align : "left",
    58         theme_advanced_buttons1 : "fullscreen,separator,preview,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,separator,image,media,cleanup,help,separator,code",
    59         theme_advanced_buttons2 : "",
    60         theme_advanced_buttons3 : "",
    61         auto_cleanup_word : true,
    62         plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,searchreplace,print,contextmenu,fullscreen,media",
    63         plugin_insertdate_dateFormat : "%m/%d/%Y",
    64         plugin_insertdate_timeFormat : "%H:%M:%S",
    65         extended_valid_elements : "a[name|href|target=_blank|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]",
    66         fullscreen_settings : {
    67                 theme_advanced_path_location : "top",
    68                 theme_advanced_buttons1 : "fullscreen,separator,preview,separator,media,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help",
    69                 theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
    70                 theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print"
    71         }
    72 });
    73 
    74 }}}
    75 
    76 
    77 
    78 3. Add '''js''' option to admin sections of your model (excerpt from my model):
    79 
    80 {{{
    81 class Document(meta.Model):
    82     # model fields are here
    83 
    84     class META:
    85         admin = meta.Admin(
    86             # various admin options are here
    87             js = (
    88                 '/tiny_mce/tiny_mce.js',
    89                 '/appmedia/admin/js/textareas.js',
    90             ),
    91         )
    92 }}}
    93 
    94 Note that the above only works in Django 0.91 and older; for versions more recent than this, use the following as an example:
    95 
    96 {{{
    97 class Document(models.Model):
    98     # model fields are here
    99    
    100     class Admin:
    101         # various admin options are here
    102         js = (
    103                 '/tiny_mce/tiny_mce.js',
    104                 '/appmedia/admin/js/textareas.js',
    105             )
    106 }}}
    107 
    108 Basically '''js''' option includes tuple items as !JavaScript files in the header of CRUD pages for this model (see [http://www.djangoproject.com/documentation/model_api/#admin-options Django Model Reference / Admin Options]). The first script is the main TinyMCE file. '' If you use TinyMCE compressor, include '/tiny_mce/tiny_mce_gzip.php' instead.'' The second script is your configuration file created in step !#2.
    109 
    110 === With newforms-admin ===
    111 Add a media definition to a your ModelAdmin instance:
    112 
    113 {{{
    114 #!python
    115 
    116 class MyModelOptions(admin.ModelAdmin):
    117 
    118     class Media:
    119         js = ('js/tiny_mce/tiny_mce.js',
    120               'js/tiny_mce/textareas.js',)
    121 
    122 admin.site.register(MyModel, MyModelOptions)
    123 
    124 }}}
    125 
    126 MEDIA_URL will be prepended to the above urls, so adjust your paths accordingly.
    127 
    128 === Using TinyMCE with flatpages (oldforms) ===
    129 
    130 If you want to use TinyMCE in the admin's textarea for flatpages this thing is a little bit different because you don't have direct access to the model (unless you modify the contrib code which would cause difficulties when upgrading Django). So one way of doing this is to extend the flatpage's admin template.
    131 
    132 To do so you need to:
    133   * Create the directory <your_template_dir>/admin_copies/
    134   * Copy <your_django_source>/contrib/admin/templates/admin/change_form.html  to <your_template_dir>/admin_copies/   This is needed because you are going to extend it and can't access the admin template directly from your local template (acctually a symlink would work fine if you're working in some *nix)
    135   * Create the directory <your_template_dir>/admin/flatpages/flatpage/
    136   * Create a template in that directory called change_form.html that extends the original admin template
    137 here's mine:
    138 {{{
    139 {% extends "admin_copies/change_form.html" %}
    140 {% block extrahead %}{{ block.super }}
    141 <script type="text/javascript" src="/site-media/js/tiny_mce/tiny_mce.js"></script>
    142 <script type="text/javascript" src="/site-media/js/tiny_mce/textareas.js"></script>
    143 {% endblock %}
    144 }}}
    145 
    146   --NL
    147 
    148 === Using TinyMCE with flatpages (newforms) ===
    149 In an admin.py '''in some application''' add the following:
    150 {{{
    151 from django.contrib import admin
    152 from django.contrib.flatpages.models import FlatPage
    153 from django.contrib.flatpages.admin import FlatPageAdmin as FlatPageAdminOld
    154 
    155 class FlatPageAdmin(FlatPageAdminOld):
    156     class Media:
    157         js = ('js/tiny_mce/tiny_mce.js',
    158               'js/tiny_mce/textareas.js',)
    159 
    160 # We have to unregister it, and then reregister
    161 admin.site.unregister(FlatPage)
    162 admin.site.register(FlatPage, FlatPageAdmin)
    163 }}}
    164 
    165 ----
    166 
    167 That's it.
    168 
    169 Hints:
    170 
    171  * Create your text using conventional WYSIWYG editor with all niceties (e.g., Word) and paste the result to TinyMCE.
    172  * Go to HTML mode to see generated code. You can change it here to make it perfect.
    173  * If you find problems while using certain tags in the editor (like all newlines between <pre> tags being substituted by </pre><pre>), just add to the file textareas.js the line  '''remove_linebreaks : false,''' This problem arises because the option [http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/remove_linebreaks remove_linebreaks] is enabled by default.
    174  * If you want to enlarge the default textarea provided by django (and you don't want to wait for this [http://code.djangoproject.com/ticket/2596]) add an onpageload callback to your init call ([http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/onpageload onpageload]). Called after pageload but before tinymce initialisation so you can change textarea sizes in the callback.
    175  * Alternatively you can change the default textarea size by using:
    176 {{{
    177 tinyMCE.init({
    178         ...
    179         width : "800",
    180         height : "500",
    181 }}}
    182  * If you are a Safari user and TinyMCE isn't loading properly make sure that you have all the plugins specified in your textareas.js file. The plugins listed on the textareas.js file for this wikipage include plugins that are not included with the default TinyMCE download. This issue appears to only occur in Safari on OSX.
     1The previous content is outdated.  Please see [https://www.djangopackages.com/grids/g/wysiwyg/ Django Packages] for updated information on available WYSIWYG editors
Back to Top