source: sandbox/2.3-MailArchiver/filemanager/tp/ckeditor/_samples/api.html @ 6779

Revision 6779, 5.0 KB checked in by rafaelraymundo, 12 years ago (diff)

Ticket #2946 - Liberado Expresso(branch 2.3) integrado ao MailArchiver?.
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<!--
3Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.html or http://ckeditor.com/license
5-->
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head>
8        <title>Sample - CKEditor</title>
9        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
10        <script type="text/javascript" src="../ckeditor.js"></script>
11        <script src="sample.js" type="text/javascript"></script>
12        <link href="sample.css" rel="stylesheet" type="text/css"/>
13        <script id="headscript" type="text/javascript">
14        //<![CDATA[
15
16// The instanceReady event is fired when an instance of CKEditor has finished
17// its initialization.
18CKEDITOR.on( 'instanceReady', function( ev )
19        {
20                // Show the editor name and description in the browser status bar.
21                document.getElementById('eMessage').innerHTML = '<p>Instance "' + ev.editor.name + '" loaded.<\/p>' ;
22
23                // Show this sample buttons.
24                document.getElementById('eButtons').style.visibility = '' ;
25        });
26
27function InsertHTML()
28{
29        // Get the editor instance that we want to interact with.
30        var oEditor = CKEDITOR.instances.editor1 ;
31        var value = document.getElementById( 'plainArea' ).value ;
32
33        // Check the active editing mode.
34        if (oEditor.mode == 'wysiwyg' )
35        {
36                // Insert the desired HTML.
37                oEditor.insertHtml( value ) ;
38        }
39        else
40                alert( 'You must be on WYSIWYG mode!' ) ;
41}
42
43function SetContents()
44{
45        // Get the editor instance that we want to interact with.
46        var oEditor = CKEDITOR.instances.editor1 ;
47        var value = document.getElementById( 'plainArea' ).value ;
48
49        // Set the editor contents (replace the actual one).
50        oEditor.setData( value ) ;
51}
52
53function GetContents()
54{
55        // Get the editor instance that we want to interact with.
56        var oEditor = CKEDITOR.instances.editor1 ;
57
58        // Get the editor contents
59        alert( oEditor.getData() ) ;
60}
61
62function ExecuteCommand( commandName )
63{
64        // Get the editor instance that we want to interact with.
65        var oEditor = CKEDITOR.instances.editor1 ;
66
67        // Check the active editing mode.
68        if (oEditor.mode == 'wysiwyg' )
69        {
70                // Execute the command.
71                oEditor.execCommand( commandName ) ;
72        }
73        else
74                alert( 'You must be on WYSIWYG mode!' ) ;
75}
76
77function CheckDirty()
78{
79        // Get the editor instance that we want to interact with.
80        var oEditor = CKEDITOR.instances.editor1 ;
81        alert( oEditor.checkDirty() ) ;
82}
83
84function ResetDirty()
85{
86        // Get the editor instance that we want to interact with.
87        var oEditor = CKEDITOR.instances.editor1 ;
88        oEditor.resetDirty() ;
89        alert( 'The "IsDirty" status has been reset' ) ;
90}
91
92        //]]>
93        </script>
94</head>
95<body>
96        <h1>
97                CKEditor Sample
98        </h1>
99        <!-- This <div> holds alert messages to be display in the sample page. -->
100        <div id="alerts">
101                <noscript>
102                        <p>
103                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
104                                support, like yours, you should still see the contents (HTML data) and you should
105                                be able to edit it normally, without a rich editor interface.
106                        </p>
107                </noscript>
108        </div>
109        <!-- This <fieldset> holds the HTML that you will usually find in your
110             pages. -->
111        <form action="sample_posteddata.php" method="post">
112                <p>
113                This sample shows how to use the CKeditor JavaScript API to interact with the editor
114                at runtime.</p>
115                <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://www.fckeditor.net/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
116                <script type="text/javascript">
117                //<![CDATA[
118                        // Replace the <textarea id="editor1"> with an CKEditor instance.
119                        var editor = CKEDITOR.replace( 'editor1');
120                //]]>
121                </script>
122                <div id="eMessage">
123
124                </div>
125                <div id="eButtons" style="visibility: hidden">
126                        <input onclick="InsertHTML();" type="button" value="Insert HTML"/>
127                        <input onclick="SetContents();" type="button" value="Set Editor Contents"/>
128                        <input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)"/>
129                        <br/>
130                        <textarea cols="80" id="plainArea" rows="3">&lt;h2&gt;Test&lt;/h2&gt;&lt;p&gt;This is some &lt;a href="/Test1.html"&gt;sample&lt;/a&gt; HTML&lt;/p&gt;</textarea>
131                        <br/>
132                        <br/>
133                        <input onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command"/>
134                        <input onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command"/>
135                <br/>
136                <br/>
137                <input onclick="CheckDirty();" type="button" value="checkDirty()"/>
138                <input onclick="ResetDirty();" type="button" value="resetDirty()"/>
139                </div>
140                </form>
141        <div id="footer">
142                <hr/>
143                <p>
144                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/" shape="rect">http://ckeditor.com</a>
145                </p>
146                <p id="copy">
147                        Copyright © 2003-2009, <a href="http://cksource.com/" shape="rect">CKSource</a> - Frederico Knabben. All rights reserved.
148                </p>
149        </div>
150</body>
151</html>
Note: See TracBrowser for help on using the repository browser.