Ticket #9335: api.html

File api.html, 6.6 KB (added by Jakub Ś, 13 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<!--
3Copyright (c) 2003-2012, 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>API Usage &mdash; CKEditor Sample</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 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 <code>' + ev.editor.name + '<\/code> loaded.<\/p>';
22
23        // Show this sample buttons.
24         document.getElementById( 'eButtons' ).style.display = 'block';
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( 'htmlArea' ).value;
32
33        // Check the active editing mode.
34        if ( oEditor.mode == 'wysiwyg' )
35        {
36                // Insert HTML code.
37                // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
38                oEditor.insertHtml( value );
39        }
40        else
41                alert( 'You must be in WYSIWYG mode!' );
42}
43
44function InsertText()
45{
46        // Get the editor instance that we want to interact with.
47        var oEditor = CKEDITOR.instances.editor1;
48        var value = document.getElementById( 'txtArea' ).value;
49
50        // Check the active editing mode.
51        if ( oEditor.mode == 'wysiwyg' )
52        {
53                // Insert as plain text.
54                // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertText
55                oEditor.insertText( value );
56        }
57        else
58                alert( 'You must be in WYSIWYG mode!' );
59}
60
61function SetContents()
62{
63        // Get the editor instance that we want to interact with.
64        var oEditor = CKEDITOR.instances.editor1;
65        var value = document.getElementById( 'htmlArea' ).value;
66
67        // Set editor contents (replace current contents).
68        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData
69        oEditor.setData( value );
70}
71
72function GetContents()
73{
74        // Get the editor instance that you want to interact with.
75        var oEditor = CKEDITOR.instances.editor1;
76
77        // Get editor contents
78        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData
79        alert( oEditor.getData() );
80}
81
82function ExecuteCommand( commandName )
83{
84        // Get the editor instance that we want to interact with.
85        var oEditor = CKEDITOR.instances.editor1;
86
87        // Check the active editing mode.
88        if ( oEditor.mode == 'wysiwyg' )
89        {
90                // Execute the command.
91                // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
92                oEditor.execCommand( commandName );
93        }
94        else
95                alert( 'You must be in WYSIWYG mode!' );
96}
97
98function CheckDirty()
99{
100        // Get the editor instance that we want to interact with.
101        var oEditor = CKEDITOR.instances.editor1;
102        // Checks whether the current editor contents present changes when compared
103        // to the contents loaded into the editor at startup
104        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#checkDirty
105        alert( oEditor.checkDirty() );
106}
107
108function ResetDirty()
109{
110        // Get the editor instance that we want to interact with.
111        var oEditor = CKEDITOR.instances.editor1;
112        // Resets the "dirty state" of the editor (see CheckDirty())
113        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#resetDirty
114        oEditor.resetDirty();
115        alert( 'The "IsDirty" status has been reset' );
116}
117
118        //]]>
119        </script>
120
121</head>
122<body>
123        <h1 class="samples">
124                CKEditor Sample &mdash; Using CKEditor JavaScript API
125        </h1>
126        <div class="description">
127        <p>
128                This sample shows how to use the
129                <a class="samples" href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html">CKEditor JavaScript API</a>
130                to interact with the editor at runtime.
131        </p>
132        <p>
133                For details on how to create this setup check the source code of this sample page.
134        </p>
135        </div>
136
137        <!-- This <div> holds alert messages to be display in the sample page. -->
138        <div id="alerts">
139                <noscript>
140                        <p>
141                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
142                                support, like yours, you should still see the contents (HTML data) and you should
143                                be able to edit it normally, without a rich editor interface.
144                        </p>
145                </noscript>
146        </div>
147        <form action="sample_posteddata.php" method="post">
148                <textarea cols="100" 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://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
149
150                <script type="text/javascript">
151                //<![CDATA[
152                        // Replace the <textarea id="editor1"> with an CKEditor instance.
153                        var editor = CKEDITOR.replace( 'editor1', {fullPage : true} );
154                //]]>
155                </script>
156
157                <div id="eMessage">
158                </div>
159                <div id="eButtons" style="display: none">
160                        <input onclick="InsertHTML();" type="button" value="Insert HTML" />
161                        <input onclick="SetContents();" type="button" value="Set Editor Contents" />
162                        <input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)" />
163                        <br />
164                        <textarea cols="100" id="htmlArea" 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 code.&lt;/p&gt;</textarea>
165                        <br />
166                        <br />
167                        <input onclick="InsertText();" type="button" value="Insert Text" />
168                        <br />
169                        <textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.
170
171Second line of text preceded by two line breaks.</textarea>
172                        <br />
173                        <input onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command" />
174                        <input onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command" />
175                        <br />
176                        <br />
177                        <input onclick="CheckDirty();" type="button" value="checkDirty()" />
178                        <input onclick="ResetDirty();" type="button" value="resetDirty()" />
179                </div>
180        </form>
181        <div id="footer">
182                <hr />
183                <p>
184                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
185                </p>
186                <p id="copy">
187                        Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
188                        Knabben. All rights reserved.
189                </p>
190        </div>
191</body>
192</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy