Code

Changes between Version 7 and Version 8 of CookBookAdminTools


Ignore:
Timestamp:
04/21/06 04:49:02 (8 years ago)
Author:
anonymous
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • CookBookAdminTools

    v7 v8  
    77== How to Add WYSIWIG Editor == 
    88 
    9 ''__Warning:__ at present moment (11/26/2005) the Admin (formerly "The new admin") prefixes all js paths with {{{/media/}}} - don't forget to take it into account when you decide where to put (or link) your !JavaScript files. Ticket #914 is filed to resolve the issue.'' 
    10  
    11 There are several free WYSIWYG editors, which can be used with Django's admin pages. Some overview and first hand experience can be found [http://lazutkin.com/blog/2005/aug/26/using_tinymce_djangos_admin/ here]. 
    12  
    13 === TinyMCE === 
    14  
    15 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/example_full.php?example=true examples]. 
    16  
    17 In order to use TinyMCE with Django you have to do three things: 
    18  
    19 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.'' 
    20  
    21 2. Create configuration file for TinyMCE. Below is my '''textareas.js''' file: 
    22  
    23 {{{ 
    24 tinyMCE.init({ 
    25         mode : "textareas", 
    26         theme : "advanced", 
    27         //content_css : "/appmedia/blog/style.css", 
    28         theme_advanced_toolbar_location : "top", 
    29         theme_advanced_toolbar_align : "left", 
    30         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", 
    31         theme_advanced_buttons2 : "", 
    32         theme_advanced_buttons3 : "", 
    33         auto_cleanup_word : true, 
    34         plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,fullscreen", 
    35         plugin_insertdate_dateFormat : "%m/%d/%Y", 
    36         plugin_insertdate_timeFormat : "%H:%M:%S", 
    37         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]", 
    38         fullscreen_settings : { 
    39                 theme_advanced_path_location : "top", 
    40                 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", 
    41                 theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor", 
    42                 theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print" 
    43         } 
    44 }); 
    45 }}} 
    46  
    47 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://tinymce.moxiecode.com/tinymce/docs/index.html TinyMCE Documentation]. 
    48  
    49 3. Add '''js''' option to admin sections of your model (excerpt from my model): 
    50  
    51 {{{ 
    52 class Document(meta.Model): 
    53     # model fields are here 
    54  
    55     class META: 
    56         admin = meta.Admin( 
    57             # various admin options are here 
    58             js = ( 
    59                 '/tiny_mce/tiny_mce.js', 
    60                 '/appmedia/admin/js/textareas.js', 
    61             ), 
    62         ) 
    63 }}} 
    64  
    65 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. 
    66  
    67 That's it. 
    68  
    69 Hints: 
    70  
    71  * Create your text using conventional WYSIWYG editor with all niceties (e.g., Word) and paste the result to TinyMCE. 
    72  * Go to HTML mode to see generated code. You can change it here to make it perfect. 
    739 
    7410=== Xinha ===