[Sommaire] [Imprimer]

   1  <html>
   2  <head>
   3  <title>Example of HTMLArea 3.0</title>
   4  
   5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6  
   7  <!-- Configure the path to the editor.  We make it relative now, so that the
   8      example ZIP file will work anywhere, but please NOTE THAT it's better to
   9      have it an absolute path, such as '/htmlarea/'. -->
  10  <script type="text/javascript">
  11    _editor_url = "../";
  12    _editor_lang = "en";
  13  </script>
  14  <script type="text/javascript" src="../htmlarea.js"></script>
  15  
  16  <style type="text/css">
  17  html, body {
  18    font-family: Verdana,sans-serif;
  19    background-color: #fea;
  20    color: #000;
  21  }
  22  a:link, a:visited { color: #00f; }
  23  a:hover { color: #048; }
  24  a:active { color: #f00; }
  25  
  26  textarea { background-color: #fff; border: 1px solid 00f; }
  27  </style>
  28  
  29  <script type="text/javascript">
  30  var editor = null;
  31  function initEditor() {
  32    editor = new HTMLArea("ta");
  33  
  34    // comment the following two lines to see how customization works
  35    editor.generate();
  36    return false;
  37  
  38    var cfg = editor.config; // this is the default configuration
  39    cfg.registerButton({
  40      id        : "my-hilite",
  41      tooltip   : "Highlight text",
  42      image     : "ed_custom.gif",
  43      textMode  : false,
  44      action    : function(editor) {
  45                    editor.surroundHTML("<span class=\"hilite\">", "</span>");
  46                  },
  47      context   : 'table'
  48    });
  49  
  50    cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
  51  
  52    // BEGIN: code that adds a custom button
  53    // uncomment it to test
  54    var cfg = editor.config; // this is the default configuration
  55    /*
  56    cfg.registerButton({
  57      id        : "my-hilite",
  58      tooltip   : "Highlight text",
  59      image     : "ed_custom.gif",
  60      textMode  : false,
  61      action    : function(editor) {
  62                    editor.surroundHTML("<span class=\"hilite\">", "</span>");
  63                  }
  64    });
  65    */
  66  
  67  function clickHandler(editor, buttonId) {
  68    switch (buttonId) {
  69      case "my-toc":
  70        editor.insertHTML("<h1>Table Of Contents</h1>");
  71        break;
  72      case "my-date":
  73        editor.insertHTML((new Date()).toString());
  74        break;
  75      case "my-bold":
  76        editor.execCommand("bold");
  77        editor.execCommand("italic");
  78        break;
  79      case "my-hilite":
  80        editor.surroundHTML("<span class=\"hilite\">", "</span>");
  81        break;
  82    }
  83  };
  84  cfg.registerButton("my-toc",  "Insert TOC", "ed_custom.gif", false, clickHandler);
  85  cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler);
  86  cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler);
  87  cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler);
  88  
  89  cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false,
  90    function(editor) {
  91      if (HTMLArea.is_ie) {
  92        editor.insertHTML("<span class=\"sample\">&nbsp;&nbsp;</span>");
  93        var r = editor._doc.selection.createRange();
  94        r.move("character", -2);
  95        r.moveEnd("character", 2);
  96        r.select();
  97      } else { // Gecko/W3C compliant
  98        var n = editor._doc.createElement("span");
  99        n.className = "sample";
 100        editor.insertNodeAtSelection(n);
 101        var sel = editor._iframe.contentWindow.getSelection();
 102        sel.removeAllRanges();
 103        var r = editor._doc.createRange();
 104        r.setStart(n, 0);
 105        r.setEnd(n, 0);
 106        sel.addRange(r);
 107      }
 108    }
 109  );
 110  
 111  
 112    /*
 113    cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false,
 114      function(editor) {
 115        editor.surroundHTML('<span class="hilite">', '</span>');
 116      }
 117    );
 118    */
 119    cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+
 120                    ".sample { color: green; font-family: monospace; }";
 121    cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar
 122    // END: code that adds a custom button
 123  
 124    editor.generate();
 125  }
 126  function insertHTML() {
 127    var html = prompt("Enter some HTML code here");
 128    if (html) {
 129      editor.insertHTML(html);
 130    }
 131  }
 132  function highlight() {
 133    editor.surroundHTML('<span style="background-color: yellow">', '</span>');
 134  }
 135  </script>
 136  
 137  </head>
 138  
 139  <!-- use <body onload="HTMLArea.replaceAll()" if you don't care about
 140       customizing the editor.  It's the easiest way! :) -->
 141  <body onload="initEditor()">
 142  
 143  <h1>HTMLArea 3.0</h1>
 144  
 145  <p>A replacement for <code>TEXTAREA</code> elements.  &copy; <a
 146  href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p>
 147  
 148  <form action="test.cgi" method="post" id="edit" name="edit">
 149  
 150  <textarea id="ta" name="ta" style="width:100%" rows="20" cols="80">
 151    &lt;p&gt;Here is some sample text: &lt;b&gt;bold&lt;/b&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;u&gt;underline&lt;/u&gt;. &lt;/p&gt;
 152    &lt;p align=center&gt;Different fonts, sizes and colors (all in bold):&lt;/p&gt;
 153    &lt;p&gt;&lt;b&gt;
 154     &lt;font face="arial"           size="7" color="#000066"&gt;arial&lt;/font&gt;,
 155     &lt;font face="courier new"     size="6" color="#006600"&gt;courier new&lt;/font&gt;,
 156     &lt;font face="georgia"         size="5" color="#006666"&gt;georgia&lt;/font&gt;,
 157     &lt;font face="tahoma"          size="4" color="#660000"&gt;tahoma&lt;/font&gt;,
 158     &lt;font face="times new roman" size="3" color="#660066"&gt;times new roman&lt;/font&gt;,
 159     &lt;font face="verdana"         size="2" color="#666600"&gt;verdana&lt;/font&gt;,
 160     &lt;font face="tahoma"          size="1" color="#666666"&gt;tahoma&lt;/font&gt;
 161    &lt;/b&gt;&lt;/p&gt;
 162    &lt;p&gt;Click on &lt;a href="http://www.interactivetools.com/"&gt;this link&lt;/a&gt; and then on the link button to the details ... OR ... select some text and click link to create a &lt;b&gt;new&lt;/b&gt; link.&lt;/p&gt;
 163  </textarea>
 164  
 165  <p />
 166  
 167  <input type="submit" name="ok" value="  submit  " />
 168  <input type="button" name="ins" value="  insert html  " onclick="return insertHTML();" />
 169  <input type="button" name="hil" value="  highlight text  " onclick="return highlight();" />
 170  
 171  <a href="javascript:mySubmit()">submit</a>
 172  
 173  <script type="text/javascript">
 174  function mySubmit() {
 175  // document.edit.save.value = "yes";
 176  document.edit.onsubmit(); // workaround browser bugs.
 177  document.edit.submit();
 178  };
 179  </script>
 180  
 181  </form>
 182  
 183  </body>
 184  </html>