Ticket #7: sample13.html

File sample13.html, 5.0 KB (added by Frederico Caldeira Knabben, 18 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<!-- @Packager.Header
3<FileDescription>
4        Sample page.
5</FileDescription>
6<Author name="Alfonso Martinez de Lizarrondo" email="alfonso at uritec dot net" />
7<Author name="Frederico Caldeira Knabben" email="www.fckeditor.net" />
8<Author name="Finn Hakansson" email="finn_hakansson@yahoo.com" />
9-->
10<html xmlns="http://www.w3.org/1999/xhtml">
11<head>
12        <title>FCKeditor - Sample</title>
13        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
14        <meta name="robots" content="noindex, nofollow" />
15        <link href="../sample.css" rel="stylesheet" type="text/css" />
16        <script type="text/javascript" src="../../fckeditor.js"></script>
17        <script type="text/javascript">
18
19function Toggle()
20{
21        // Try to get the FCKeditor instance, if available.
22        var oEditor ;
23        if ( typeof( FCKeditorAPI ) != 'undefined' )
24                oEditor = FCKeditorAPI.GetInstance( '_DataFCKeditor' ) ;
25
26        // Get the _Textarea and _FCKeditor DIVs.
27        var eTextareaDiv        = document.getElementById( '_Textarea' ) ;
28        var eFCKeditorDiv       = document.getElementById( '_FCKeditor' ) ;
29       
30        // If the _Textarea DIV is visible, switch to FCKeditor.
31        if ( eTextareaDiv.style.display != 'none' )
32        {
33                // If it is the first time, create the editor.
34                if ( !oEditor )
35                {
36                        CreateEditor() ;
37                }
38                else
39                {
40                        // Set the current text in the textarea to the editor.
41                        oEditor.SetHTML( document.getElementById('_DataTextarea').value ) ;
42                }
43               
44                // Switch the DIVs display.
45                eTextareaDiv.style.display = 'none' ;
46                eFCKeditorDiv.style.display = '' ;
47               
48                // This is a hack for Gecko 1.0.x ... it stops editing when the editor is hidden.
49                if ( oEditor && !document.all )
50                {
51                        if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
52                                oEditor.MakeEditable() ;
53                }
54        }
55        else
56        {
57                // Set the textarea value to the editor value.
58                document.getElementById('_DataTextarea').value = oEditor.GetXHTML() ;
59
60                // Switch the DIVs display.
61                eTextareaDiv.style.display = '' ;
62                eFCKeditorDiv.style.display = 'none' ;
63        }
64}
65
66function CreateEditor()
67{
68        // Copy the value of the current textarea, to the textarea that will be used by the editor.
69        document.getElementById('_DataFCKeditor').value = document.getElementById('_DataTextarea').value ;
70       
71        // Automatically calculates the editor base path based on the _samples directory.
72        // This is usefull only for these samples. A real application should use something like this:
73        // oFCKeditor.BasePath = '/fckeditor/' ;        // '/fckeditor/' is the default value.
74        var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ;
75
76        // Create an instance of FCKeditor (using the target textarea as the name).
77        var oFCKeditor = new FCKeditor( '_DataFCKeditor' ) ;
78        oFCKeditor.BasePath = sBasePath ;
79        oFCKeditor.Width = '100%' ;
80        oFCKeditor.Height = '350' ;
81        oFCKeditor.ReplaceTextarea() ;
82}
83
84// The FCKeditor_OnComplete function is a special function called everytime and
85// editor instance is completelly loaded and available for API interactions.
86function FCKeditor_OnComplete( editorInstance )
87{
88        // Enable the switch button. It is disabled at startup, waiting the editor to be loaded.
89        document.getElementById('_BtnSwitchTextarea').disabled = false ;
90}
91
92function PrepareSave()
93{
94        // If the textarea isn't visible update the content from the editor.
95        if ( document.getElementById( '_Textarea' ).style.display == 'none' )
96        {
97                var oEditor = FCKeditorAPI.GetInstance( '_DataFCKeditor' ) ;
98                document.getElementById( '_DataTextarea' ).value = oEditor.GetXHTML() ;
99        }
100}
101
102        </script>
103</head>
104<body>
105        <h1>
106                FCKeditor - JavaScript - Sample 13
107        </h1>
108        <div>
109                This sample starts with a normal textarea and provides the ability to switch back
110                and forth between the textarea and FCKeditor. It uses the JavaScript API to do the
111                operations so it will work even if the internal implementation changes.
112        </div>
113        <hr />
114        <form action="sampleposteddata.asp" method="post" target="_blank" onsubmit="PrepareSave();">
115                <div id="_Textarea">
116                        <input type="button" value="Switch to FCKeditor" onclick="Toggle()" />
117                        <br />
118                        <br />
119                        <textarea id="_DataTextarea" name="Data" cols="80" rows="20" style="width: 95%">This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://www.fckeditor.net/"&gt;FCKeditor&lt;/a&gt;.</textarea>
120                </div>
121                <div id="_FCKeditor" style="display: none">
122                        <!-- Note that the following button is disabled at startup.
123                                It will be enabled once the editor is completelly loaded. -->
124                        <input id="_BtnSwitchTextarea" type="button" disabled="disabled" value="Switch to Textarea" onclick="Toggle()" />
125                        <br />
126                        <br />
127                        <!-- Note that the following textarea doesn't have a "name", so it will not be posted. -->
128                        <textarea id="_DataFCKeditor" cols="80" rows="20"></textarea>
129                </div>
130                <br />
131                <input type="submit" value="Submit" />
132        </form>
133</body>
134</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy