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