Changes between Version 1 and Version 2 of Documentation/MultipleEditors


Ignore:
Timestamp:
01/12/07 14:16:17 (11 years ago)
Author:
ray
Comment:

changed reference to HTMLArea and htmlarea.js and added mime types for syntax highlighting of the examples

Legend:

Unmodified
Added
Removed
Modified
  • Documentation/MultipleEditors

    v1 v2  
    33 
    44== Include main script == 
    5 Please report to [wiki:Documentation/BasicUsage Basic usage] if the following lines are obscurs. 
     5Please see to [wiki:Documentation/BasicUsage Basic usage] if the following lines are obscure. 
    66 
    77{{{ 
     8#!text/html 
    89<script type="text/javascript"> 
    910 _editor_url = "/xinha/"; 
    1011 _editor_lang = "en"; 
    1112</script> 
    12 <script type="text/javascript" src="/xinha/htmlarea.js"></script> 
     13<script type="text/javascript" src="/xinha/XinhaCore.js"></script> 
    1314}}} 
    1415 
     
    1617Every single TEXTAREA needing to be transformed to a Xinha editor obviously must have a uniq ID. In this sample, the form contains 4 TEXTAREA and only the fields description, resume and memo will be transformed. 
    1718{{{ 
     19#!text/html 
    1820<form> 
    1921<textarea id="description"></textarea> 
     
    2729We once again need to create a generic variable to hold the Xinha object to let us manipulate editors by javascript from anywhere on the page. 
    2830We can also create every single javascript variable for each editors, method we will explore further when we will manipulate Xinha on HTML document having no clue about what is Xinha. 
    29 For this sample here, we will use the fact that HTMLArea.makeEditors() return the array of every editors. 
    30 In the first [wiki:Documentation/BasicUsage Basic usage], you may have noticed the brackets around the ID of the textarea transformed - HTMLArea.makeEditors(['description'], config). 
     31For this sample here, we will use the fact that Xinha.makeEditors() return the array of every editors. 
     32In the first [wiki:Documentation/BasicUsage Basic usage], you may have noticed the brackets around the ID of the textarea transformed - Xinha.makeEditors(['description'], config). 
    3133It is because the parameter transmited is in fact an array of the ID to transform, which let us create many editors at once. 
    3234{{{ 
    33  editeurs = HTMLArea.makeEditors(['description', 'resume', 'memo'], config); 
     35#!text/x-javascript 
     36 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config); 
    3437}}} 
    3538 
    3639== Sample 1 == 
    3740{{{ 
     41#!text/html 
    3842<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 
    3943<html> 
     
    4549_editor_lang = "en"; 
    4650</script> 
    47 <script type="text/javascript" src="/xinha/htmlarea.js"></script> 
     51<script type="text/javascript" src="/xinha/XinhaCore.js"></script> 
    4852<script type="text/javascript"> 
    4953var editeurs = null; 
    5054function initXinha() { 
    51  var config = new HTMLArea.Config(); 
    52  editeurs = HTMLArea.makeEditors(['description', 'resume', 'memo'], config); 
    53  HTMLArea.startEditors(editeurs); 
     55 var config = new Xinha.Config(); 
     56 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config); 
     57 Xinha.startEditors(editeurs); 
    5458} 
    5559window.onload = initXinha; 
     
    7377Obviously it is possible to force every editors to render in a different way. We will start by configure the global with and height we want by manipulating the global config object. 
    7478{{{ 
    75  var config = new HTMLArea.Config(); 
     79#!text/x-javascript 
     80 var config = new Xinha.Config(); 
    7681 config.width = '400px'; 
    7782 config.height = '200px'; 
    7883}}} 
    7984 
    80 Then we will individually update some of the config for each editors. This manipulation is very simple, because the method HTMLArea.makeEditors() return a javascript object which contain every single textarea transformed and their own config object.[[BR]] 
     85Then we will individually update some of the config for each editors. This manipulation is very simple, because the method Xinha.makeEditors() return a javascript object which contain every single textarea transformed and their own config object.[[BR]] 
    8186In the second sample, description will have its status bar removed, resume height will be increased to 300 and memo will have its width set to auto. 
    8287{{{ 
    83  editeurs = HTMLArea.makeEditors(['description', 'resume', 'memo'], config); 
     88#!text/x-javascript 
     89 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config); 
    8490 editeurs.description.config.statusBar = false; 
    8591 editeurs.resume.config.height = '300px'; 
     
    8995== Sample 2 == 
    9096{{{ 
     97#!text/html 
    9198<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 
    9299<html> 
     
    98105_editor_lang = "en"; 
    99106</script> 
    100 <script type="text/javascript" src="/xinha/htmlarea.js"></script> 
     107<script type="text/javascript" src="/xinha/XinhaCore.js"></script> 
    101108<script type="text/javascript"> 
    102109var editeurs = null; 
    103110function initXinha() { 
    104  var config = new HTMLArea.Config(); 
     111 var config = new Xinha.Config(); 
    105112 config.width = '600px'; 
    106113 config.height = '200px'; 
    107  editeurs = HTMLArea.makeEditors(['description', 'resume', 'memo'], config); 
     114 editeurs = Xinha.makeEditors(['description', 'resume', 'memo'], config); 
    108115 editeurs.description.config.statusBar = false; 
    109116 editeurs.resume.config.height = '300px'; 
    110117 editeurs.memo.config.width = 'auto'; 
    111  HTMLArea.startEditors(editeurs); 
     118 Xinha.startEditors(editeurs); 
    112119} 
    113120window.onload = initXinha;