[Sommaire] [Imprimer]

   1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2  <!--
   3   * FCKeditor - The text editor for Internet - http://www.fckeditor.net
   4   * Copyright (C) 2003-2007 Frederico Caldeira Knabben
   5   * 
   6   * == BEGIN LICENSE ==
   7   * 
   8   * Licensed under the terms of any of the following licenses at your
   9   * choice:
  10   * 
  11   *  - GNU General Public License Version 2 or later (the "GPL")
  12   *    http://www.gnu.org/licenses/gpl.html
  13   * 
  14   *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
  15   *    http://www.gnu.org/licenses/lgpl.html
  16   * 
  17   *  - Mozilla Public License Version 1.1 or later (the "MPL")
  18   *    http://www.mozilla.org/MPL/MPL-1.1.html
  19   * 
  20   * == END LICENSE ==
  21   * 
  22   * File Name: sample08.html
  23   *     Sample page.
  24   * 
  25   * File Authors:
  26   *         Frederico Caldeira Knabben (www.fckeditor.net)
  27  -->
  28  <html xmlns="http://www.w3.org/1999/xhtml">
  29  <head>
  30      <title>FCKeditor - Sample</title>
  31      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  32      <meta name="robots" content="noindex, nofollow" />
  33      <link href="../sample.css" rel="stylesheet" type="text/css" />
  34      <script type="text/javascript" src="../../fckeditor.js"></script>
  35      <script type="text/javascript">
  36  
  37  // FCKeditor_OnComplete is a special function that is called when an editor
  38  // instance is loaded ad available to the API. It must be named exactly in
  39  // this way.
  40  function FCKeditor_OnComplete( editorInstance )
  41  {
  42      // Show the editor name and description in the browser status bar.
  43      document.getElementById('eMessage').innerHTML = 'Instance "' + editorInstance.Name + '" loaded - ' + editorInstance.Description ;
  44  
  45      // Show this sample buttons.
  46      document.getElementById('eButtons').style.visibility = '' ;
  47  }
  48  
  49  function InsertHTML()
  50  {
  51      // Get the editor instance that we want to interact with.
  52      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
  53  
  54      // Check the active editing mode.
  55      if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
  56      {
  57          // Insert the desired HTML.
  58          oEditor.InsertHtml( '- This is some <a href="/Test1.html">sample</a> HTML -' ) ;
  59      }
  60      else
  61          alert( 'You must be on WYSIWYG mode!' ) ;
  62  }
  63  
  64  function SetContents()
  65  {
  66      // Get the editor instance that we want to interact with.
  67      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
  68  
  69      // Set the editor contents (replace the actual one).
  70      oEditor.SetHTML( 'This is the <b>new content</b> I want in the editor.' ) ;
  71  }
  72  
  73  function GetContents()
  74  {
  75      // Get the editor instance that we want to interact with.
  76      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
  77  
  78      // Get the editor contents in XHTML.
  79      alert( oEditor.GetXHTML( true ) ) ;        // "true" means you want it formatted.
  80  }
  81  
  82  function ExecuteCommand( commandName )
  83  {
  84      // Get the editor instance that we want to interact with.
  85      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
  86  
  87      // Execute the command.
  88      oEditor.Commands.GetCommand( commandName ).Execute() ;
  89  }
  90  
  91  function GetLength()
  92  {
  93      // This functions shows that you can interact directly with the editor area
  94      // DOM. In this way you have the freedom to do anything you want with it.
  95  
  96      // Get the editor instance that we want to interact with.
  97      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
  98  
  99      // Get the Editor Area DOM (Document object).
 100      var oDOM = oEditor.EditorDocument ;
 101  
 102      var iLength ;
 103  
 104      // The are two diffent ways to get the text (without HTML markups).
 105      // It is browser specific.
 106  
 107      if ( document.all )        // If Internet Explorer.
 108      {
 109          iLength = oDOM.body.innerText.length ;
 110      }
 111      else                    // If Gecko.
 112      {
 113          var r = oDOM.createRange() ;
 114          r.selectNodeContents( oDOM.body ) ;
 115          iLength = r.toString().length ;
 116      }
 117  
 118      alert( 'Actual text length (without HTML markups): ' + iLength + ' characters' ) ;
 119  }
 120  
 121  function GetInnerHTML()
 122  {
 123      // Get the editor instance that we want to interact with.
 124      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
 125  
 126      alert( oEditor.EditorDocument.body.innerHTML ) ;
 127  }
 128  
 129  function CheckIsDirty()
 130  {
 131      // Get the editor instance that we want to interact with.
 132      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
 133      alert( oEditor.IsDirty() ) ;    
 134  }
 135  
 136  function ResetIsDirty()
 137  {
 138      // Get the editor instance that we want to interact with.
 139      var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
 140      oEditor.ResetIsDirty() ;    
 141      alert( 'The "IsDirty" status has been reset' ) ;
 142  }
 143  
 144      </script>
 145  </head>
 146  <body>
 147      <h1>
 148          FCKeditor - JavaScript - Sample 8
 149      </h1>
 150      <div>
 151          This sample shows how to use the FCKeditor JavaScript API to interact with the editor
 152          at runtime.
 153      </div>
 154      <hr />
 155      <form action="sampleposteddata.asp" method="post" target="_blank">
 156          <script type="text/javascript">
 157  <!--
 158  // Automatically calculates the editor base path based on the _samples directory.
 159  // This is usefull only for these samples. A real application should use something like this:
 160  // oFCKeditor.BasePath = '/fckeditor/' ;    // '/fckeditor/' is the default value.
 161  var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ;
 162  
 163  var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
 164  oFCKeditor.BasePath    = sBasePath ;
 165  oFCKeditor.Value    = 'This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.' ;
 166  oFCKeditor.Create() ;
 167  //-->
 168          </script>
 169          <br />
 170          <input type="submit" value="Submit" />
 171      </form>
 172      <div>
 173          &nbsp;
 174      </div>
 175      <hr />
 176      <div id="eMessage">
 177          &nbsp;
 178      </div>
 179      <div>
 180          &nbsp;
 181      </div>
 182      <div id="eButtons" style="visibility: hidden">
 183          <input type="button" value="Insert HTML" onclick="InsertHTML();" />
 184          <input type="button" value="Set Editor Contents" onclick="SetContents();" />
 185          <input type="button" value="Get Editor Contents (XHTML)" onclick="GetContents();" />
 186          <br />
 187          <br />
 188          <input type="button" value='Execute "Bold" Command' onclick="ExecuteCommand('Bold');" />
 189          <input type="button" value='Execute "Link" Command' onclick="ExecuteCommand('Link');" />
 190          <br />
 191          <br />
 192          <input type="button" value="Interact with the Editor Area DOM" onclick="GetLength();" />
 193          <input type="button" value="Get innerHTML" onclick="GetInnerHTML();" />
 194          <br />
 195          <br />
 196          <input type="button" value="Check IsDirty()" onclick="CheckIsDirty();" />
 197          <input type="button" value="Reset IsDirty()" onclick="ResetIsDirty();" />
 198      </div>
 199  </body>
 200  </html>