← Back to branch summary

~ubuntu-branches/ubuntu/natty/moin/natty-updates

« back to all changes in this revision

Viewing changes to wiki/htdocs/applets/FCKeditor/_samples/html/sample08.html

  • Committer: Bazaar Package Importer
  • Author(s): Jonas Smedegaard
  • Date: 2008-06-22 21:17:13 UTC
  • mto: This revision was merged to the branch mainline in revision 18.
  • Revision ID: james.westby@ubuntu.com-20080622211713-inlv5k4eifxckelr
Import upstream version 1.7.0

Show diffs side-by-side

added added

removed removed

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