Mercurial > hg > rr-repo

comparison sites/all/libraries/ckeditor/_samples/api.html @ 0:ff03f76ab3fe

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial version
author danieleb <danielebarchiesi@me.com>
date Wed, 21 Aug 2013 18:51:11 +0100
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:ff03f76ab3fe
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <!--
3 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
4 For 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.
18 CKEDITOR.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
27 function 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
44 function 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
61 function 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
72 function 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
82 function 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
98 function 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
108 function 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' );
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
171 Second 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-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
188 Knabben. All rights reserved.
189 </p>
190 </div>
191 </body>
192 </html>