Ticket #7: sample12.html

File sample12.html, 4.6 KB (added by Alfonso, 19 years ago)

file for /fckeditor/_samples/html/sample12.html

Line 
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
4 * Copyright (C) 2003-2006 Frederico Caldeira Knabben
5 *
6 * Licensed under the terms of the GNU Lesser General Public License:
7 *              http://www.opensource.org/licenses/lgpl-license.php
8 *
9 * For further information visit:
10 *              http://www.fckeditor.net/
11 *
12 * "Support Open Source software. What about a donation today?"
13 *
14 * File Name: sample12.html
15 *      Sample page.
16 *
17 * File Authors:
18 *              Alfonso Martinez de Lizarrondo (alfonso at uritec dot net)
19 *              based on a testcase by Finn Hakansson <finn_hakansson@yahoo.com>
20-->
21<html xmlns="http://www.w3.org/1999/xhtml">
22<head>
23        <title>FCKeditor - Sample</title>
24        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
25        <meta name="robots" content="noindex, nofollow" />
26        <link href="../sample.css" rel="stylesheet" type="text/css" />
27        <script type="text/javascript" src="../../fckeditor.js"></script>
28
29        <script type="text/javascript">
30
31var first_time = true;
32
33function new_editor(name)
34{
35        var e = new FCKeditor( name + '_fckeditor_textarea' ) ;
36        e.Width = '100%' ;
37        e.Height = '350' ;
38
39        // Automatically calculates the editor base path based on the _samples directory.
40        // This is usefull only for these samples. A real application should use something like this:
41        // oFCKeditor.BasePath = '/fckeditor/' ;        // '/fckeditor/' is the default value.
42        var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ;
43
44        e.BasePath = sBasePath ;
45        e.ReplaceTextarea() ;
46}
47
48
49function fckeditor_loaded( name )
50{
51        if ( typeof(FCKeditorAPI) == 'undefined' )
52                return false;
53
54        var oEditor = FCKeditorAPI.GetInstance( name + '_fckeditor_textarea' ) ;
55                return ( typeof(oEditor) != 'undefined' );
56}
57
58
59function toggle_editor( name )
60{
61        if ( first_time )
62        {
63                first_time = false ;
64                new_editor( name ) ;
65        }
66
67        if ( !fckeditor_loaded( name ) )
68        { 
69                window.setTimeout( "toggle_editor('" + name + "')" , 1000 ) ;
70                return ;
71        }
72
73        var oEditor = FCKeditorAPI.GetInstance( name + '_fckeditor_textarea' ) ;
74
75        var x = ['', 'none'];
76        var i = 0;
77
78        if (document.getElementById( name + '_textarea_div' ).style.display == '' )
79        {
80                var content = document.getElementById( name + '_textarea' ).value ;
81                oEditor.SetHTML( content ) ;
82                i++ ;
83        }
84        else
85        {
86                var content = oEditor.GetXHTML() ;
87                document.getElementById( name + '_textarea' ).value = content ;
88        }
89
90        document.getElementById( name + '_textarea_div' ).style.display = x[i++] ;
91        document.getElementById( name + '_fckeditor_div' ).style.display = x[i % 2] ;
92
93        // This is a hack for Gecko... it stops editing when the editor is hidden.
94        if ( !document.all )
95        {
96                if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG)
97                        oEditor.MakeEditable() ;
98        }
99}
100
101function prepare_save(name)
102{
103        //if the textarea isn't visible update the content from the editor
104        if ( document.getElementById( name + '_textarea_div' ).style.display == 'none' )
105        {
106                var oEditor = FCKeditorAPI.GetInstance( name + '_fckeditor_textarea' ) ;
107                document.getElementById( name + '_textarea' ).value = oEditor.GetXHTML() ;
108        }
109}
110
111</script>
112</head>
113<body>
114        <h1>
115                FCKeditor - JavaScript - Sample 12
116        </h1>
117        <div>
118                This sample starts with a normal Textarea and provides the ability to switch back and forth between the regular textarea and FCKeditor.<br />
119                It uses the javascript API to do the operations so it will work even if the internal implementation changes.<br />
120                <br />
121                It's also a simple example about how to change a textarea (the hidden one) with an instace of FCKeditor at runtime.
122        </div>
123        <hr />
124
125        <form action="sampleposteddata.asp" method="post" target="_blank">
126
127                <table width="100%">
128                        <tr>
129                                <td>
130
131                                        <div id="XYZ_textarea_div">
132                                                <table>
133                                                        <tr>
134                                                                <td>Regular Textarea</td>
135                                                                <td><a href="javascript:toggle_editor('XYZ')">FCKeditor</a></td>
136                                                        </tr>
137                                                </table>
138                                                <br />
139                                                <textarea id="XYZ_textarea" cols="80" rows="20" style="width:100%">&lt;b&gt;Some&lt;/b&gt; text to start with.</textarea>
140                                        </div>
141
142                                        <div id="XYZ_fckeditor_div" style="display:none">
143                                                <table>
144                                                        <tr>
145                                                                <td><a href="javascript:toggle_editor('XYZ');">Regular Textarea</a></td>
146                                                                <td>FCKeditor</td>
147                                                        </tr>
148                                                </table>
149                                                <br />
150                                                <textarea id="XYZ_fckeditor_textarea"></textarea>
151                                        </div>
152
153                                </td>
154                        </tr>
155                </table>
156
157                <input type="submit" onclick="prepare_save();" name="save" />
158        </form>
159</body>
160</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy