Ticket #321: mutation.html

File mutation.html, 7.6 KB (added by Alfonso Martínez de Lizarrondo, 18 years ago)

This page could evolve to provide bigger understanding of the mutation events. You'll need firefox with Firebug to see the events in the console (or wrap the calls and call FCKDebug for non-firebug tests)

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
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 * Test page.
23-->
24<html>
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="testcases.css" rel="stylesheet" type="text/css">
30                <script type="text/javascript" src="../fckeditor.js"></script>
31                <script type="text/javascript">
32
33function Show()
34{
35        document.getElementById('eEditor').style.display        = '' ;
36        document.getElementById('eNoEditor').style.display      = 'none' ;
37/*
38        // This is a hack for Gecko... it stops editing when the editor is hidden.
39        if ( !document.all )
40        {
41                var oEditor = FCKeditorAPI.GetInstance( 'FCKeditor1' ) ;
42
43                if (  oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
44                        oEditor.MakeEditable() ;
45        }
46*/
47}
48
49function Hide()
50{
51        document.getElementById('eEditor').style.display        = 'none' ;
52        document.getElementById('eNoEditor').style.display      = '' ;
53}
54
55function FCKeditor_OnComplete( editorInstance )
56{
57        var oDoc = editorInstance.EditorDocument ;
58        return;
59
60console.debug(oDoc);
61//      oDoc.addEventListener("DOMAttrModified", AttributeNodeModified, false);
62        oDoc.defaultView.addEventListener("DOMAttrModified", AttributeNodeModified, false);
63//      oDoc.body.addEventListener("DOMAttrModified", AttributeNodeModified, false);
64
65        var oWindow = oDoc.defaultView;
66        var oParentDoc = oWindow.frameElement;
67        oParentDoc.addEventListener("DOMAttrModified", AttributeNodeModified, false);
68       
69        oDoc.body.addEventListener("DOMCharacterDataModified", CharacterDataModified, false);
70
71
72        oDoc.addEventListener("DOMNodeInsertedIntoDocument", NodeInsertedIntoDocument, false);
73
74        oDoc.addEventListener("DOMNodeRemovedFromDocument", NodeRemovedFromDocument, false);
75
76        oDoc.body.addEventListener("DOMNodeInserted", NodeInserted, false);
77
78        oDoc.body.addEventListener("DOMNodeRemoved", NodeRemoved, false);
79
80        oDoc.body.addEventListener("DOMSubtreeModified", SubTreeOfDivModified, false);
81
82        oDoc.addEventListener("DOMSubtreeModified", SubTreeOfDivModified, false);
83
84}
85
86/* MUTATION TESTS */
87function init()
88{
89if(document.addEventListener)
90        {
91        document.getElementById("eEditor").addEventListener("DOMCharacterDataModified", CharacterDataModified, false);
92
93        document.getElementById("eEditor").addEventListener("DOMAttrModified", AttributeNodeModified, false);
94
95        document.getElementById("wrapper").addEventListener("DOMAttrModified", AttributeNodeModified, false);
96
97
98        document.addEventListener("DOMNodeInsertedIntoDocument", NodeInsertedIntoDocument, false);
99
100        document.addEventListener("DOMNodeRemovedFromDocument", NodeRemovedFromDocument, false);
101
102        document.getElementById("eEditor").addEventListener("DOMNodeInserted", NodeInserted, false);
103
104        document.getElementById("eEditor").addEventListener("DOMNodeRemoved", NodeRemoved, false);
105
106        document.getElementById("eEditor").addEventListener("DOMSubtreeModified", SubTreeOfDivModified, false);
107
108 document.addEventListener("DOMSubtreeModified", SubTreeOfDivModified, false);
109        };
110}
111
112
113
114function CharacterDataModified(evt)
115{
116console.debug("A text node of " + evt.target.parentNode.nodeName + "#" + evt.target.parentNode.id + " has been modified.\nThe previous value was \"" + evt.prevValue + "\"\nand its new value is \"" + evt.newValue + "\"");
117}
118
119
120function AttributeNodeModified(evt)
121{
122console.debug("The attribute \"" + evt.attrName + "\" node of the " + evt.target.nodeName + "#" + evt.target.id + " has been modified. The type of change which triggered the DOMAttrModified event is " + evt.attrChange + " and the name of the attribute is " + evt.attrName + ".\nThe previous value was \"" + evt.prevValue + "\"\nand its new value is \"" + evt.newValue + "\"\nThe relatedNode property value is " + evt.relatedNode + " and the relatedNode nodeName is " + evt.relatedNode.nodeName);
123}
124
125function NodeInsertedIntoDocument(evt)
126{
127console.debug("DOMNodeInsertedIntoDocument A new node has just been inserted into the document.\nThis alert proves that the current browser supports the " + evt.type + " mutation event. DOMNodeInsertedIntoDocument");
128}
129
130
131function NodeInserted(evt)
132{
133console.debug("A new node has just been inserted into the node " + evt.relatedNode + ", " + evt.relatedNode.nodeName + "#" + evt.relatedNode.id );
134
135console.debug(evt);
136}
137
138function NodeRemovedFromDocument(evt)
139{
140console.debug(" A new node has just been removed from the document. This alert proves that the current browser supports the " + evt.type + " mutation event. DOMNodeRemovedFromDocument");
141
142}
143
144function NodeRemoved(evt)
145{
146console.debug("A new node has just been removed from the node " + evt.relatedNode + ", " + evt.relatedNode.nodeName + "#" + evt.relatedNode.id );
147
148console.debug(evt);
149}
150
151function SubTreeOfDivModified(evt)
152{
153console.debug("A node located in the subtree of the node identified as " + evt.relatedNode.id + " has been modified.\nThis alert proves that the current browser supports the " + evt.type + " mutation event.\nThe event is now at phase " + evt.eventPhase + ".");
154}
155
156function CreateEvent()
157{
158var x = document.createEvent("MutationEvent");
159x.initMutationEvent("DOMSubtreeModified", true, false, null, "", "", "", 0);
160document.dispatchEvent(x);
161}
162
163 //window.onload = init ;
164                </script>
165        </head>
166        <body>
167                <h1 id="Prova">FCKeditor - Test 004</h1>
168                <P>
169                        <STRONG>Expected results</STRONG> : The editor must still work when hidding it
170                        programmatically (through javascript).<BR>
171                        <STRONG>Configurations</STRONG>: Default<BR>
172                        <STRONG>Steps to&nbsp;Reproduce</STRONG>:
173                </P>
174                <OL>
175                        <LI>
176                        Wait the page to load.
177                        <LI>
178                        Hit the "Show Editor" button.
179                        <LI>
180                        Insert some text and format it.
181                        <LI>
182                        Hit the "Hide Editor" button.
183                        <LI>
184                        Hit the "Submit" and check the posted HTML.
185                        <LI>
186                        Close the "Submit" window.
187                        <LI>
188                        Hit the "Show Editor" button.
189                        <LI>
190                                Repeat steps 2 and 4.</LI></OL>
191                <P>
192                        <hr>
193                <P></P>
194                <form action="sampleposteddata.asp" method="post" target="_blank">
195                        <div id="eNoEditor">
196                                <input type="button" value="Show Editor" onclick="Show();">
197                        </div>
198                        <div id="eEditor" style="DISPLAY: none">
199                                <input type="button" value="Hide Editor" onclick="Hide();">
200                                <br><br>
201                                <div id="wrapper">hola</div>
202                                <script type="text/javascript">
203
204// Automatically calculates the editor base path based on the _samples directory.
205// This is usefull only for these samples. A real application should use something like this:
206// oFCKeditor.BasePath = '/fckeditor/' ;        // '/fckeditor/' is the default value.
207var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_testcases')) ;
208
209var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
210oFCKeditor.BasePath     = sBasePath ;
211oFCKeditor.Value        = 'This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.' ;
212oFCKeditor.Create() ;
213
214                        </script>
215                        </div>
216                        <br>
217                        <input type="submit" value="Submit">
218                </form>
219        </body>
220</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy