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