SL::DB::Object: Methode update_collections für One-To-Many-Relationships
[kivitendo-erp.git] / js / ckeditor / samples / old / api.html
1 <!DOCTYPE html>\r
2 <!--\r
3 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
4 For licensing, see LICENSE.md or http://ckeditor.com/license\r
5 -->\r
6 <html>\r
7 <head>\r
8         <meta charset="utf-8">\r
9         <title>API Usage &mdash; CKEditor Sample</title>\r
10         <script src="../../ckeditor.js"></script>\r
11         <link href="sample.css" rel="stylesheet">\r
12         <script>\r
13 \r
14 // The instanceReady event is fired, when an instance of CKEditor has finished\r
15 // its initialization.\r
16 CKEDITOR.on( 'instanceReady', function( ev ) {\r
17         // Show the editor name and description in the browser status bar.\r
18         document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';\r
19 \r
20         // Show this sample buttons.\r
21         document.getElementById( 'eButtons' ).style.display = 'block';\r
22 });\r
23 \r
24 function InsertHTML() {\r
25         // Get the editor instance that we want to interact with.\r
26         var editor = CKEDITOR.instances.editor1;\r
27         var value = document.getElementById( 'htmlArea' ).value;\r
28 \r
29         // Check the active editing mode.\r
30         if ( editor.mode == 'wysiwyg' )\r
31         {\r
32                 // Insert HTML code.\r
33                 // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml\r
34                 editor.insertHtml( value );\r
35         }\r
36         else\r
37                 alert( 'You must be in WYSIWYG mode!' );\r
38 }\r
39 \r
40 function InsertText() {\r
41         // Get the editor instance that we want to interact with.\r
42         var editor = CKEDITOR.instances.editor1;\r
43         var value = document.getElementById( 'txtArea' ).value;\r
44 \r
45         // Check the active editing mode.\r
46         if ( editor.mode == 'wysiwyg' )\r
47         {\r
48                 // Insert as plain text.\r
49                 // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText\r
50                 editor.insertText( value );\r
51         }\r
52         else\r
53                 alert( 'You must be in WYSIWYG mode!' );\r
54 }\r
55 \r
56 function SetContents() {\r
57         // Get the editor instance that we want to interact with.\r
58         var editor = CKEDITOR.instances.editor1;\r
59         var value = document.getElementById( 'htmlArea' ).value;\r
60 \r
61         // Set editor contents (replace current contents).\r
62         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData\r
63         editor.setData( value );\r
64 }\r
65 \r
66 function GetContents() {\r
67         // Get the editor instance that you want to interact with.\r
68         var editor = CKEDITOR.instances.editor1;\r
69 \r
70         // Get editor contents\r
71         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData\r
72         alert( editor.getData() );\r
73 }\r
74 \r
75 function ExecuteCommand( commandName ) {\r
76         // Get the editor instance that we want to interact with.\r
77         var editor = CKEDITOR.instances.editor1;\r
78 \r
79         // Check the active editing mode.\r
80         if ( editor.mode == 'wysiwyg' )\r
81         {\r
82                 // Execute the command.\r
83                 // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand\r
84                 editor.execCommand( commandName );\r
85         }\r
86         else\r
87                 alert( 'You must be in WYSIWYG mode!' );\r
88 }\r
89 \r
90 function CheckDirty() {\r
91         // Get the editor instance that we want to interact with.\r
92         var editor = CKEDITOR.instances.editor1;\r
93         // Checks whether the current editor contents present changes when compared\r
94         // to the contents loaded into the editor at startup\r
95         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty\r
96         alert( editor.checkDirty() );\r
97 }\r
98 \r
99 function ResetDirty() {\r
100         // Get the editor instance that we want to interact with.\r
101         var editor = CKEDITOR.instances.editor1;\r
102         // Resets the "dirty state" of the editor (see CheckDirty())\r
103         // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty\r
104         editor.resetDirty();\r
105         alert( 'The "IsDirty" status has been reset' );\r
106 }\r
107 \r
108 function Focus() {\r
109         CKEDITOR.instances.editor1.focus();\r
110 }\r
111 \r
112 function onFocus() {\r
113         document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';\r
114 }\r
115 \r
116 function onBlur() {\r
117         document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';\r
118 }\r
119 \r
120         </script>\r
121 \r
122 </head>\r
123 <body>\r
124         <h1 class="samples">\r
125                 <a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API\r
126         </h1>\r
127         <div class="warning deprecated">\r
128                 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/api.html">brand new version in CKEditor SDK</a>.\r
129         </div>\r
130         <div class="description">\r
131         <p>\r
132                 This sample shows how to use the\r
133                 <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>\r
134                 to interact with the editor at runtime.\r
135         </p>\r
136         <p>\r
137                 For details on how to create this setup check the source code of this sample page.\r
138         </p>\r
139         </div>\r
140 \r
141         <!-- This <div> holds alert messages to be display in the sample page. -->\r
142         <div id="alerts">\r
143                 <noscript>\r
144                         <p>\r
145                                 <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript\r
146                                 support, like yours, you should still see the contents (HTML data) and you should\r
147                                 be able to edit it normally, without a rich editor interface.\r
148                         </p>\r
149                 </noscript>\r
150         </div>\r
151         <form action="../../../samples/sample_posteddata.php" method="post">\r
152                 <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>\r
153 \r
154                 <script>\r
155                         // Replace the <textarea id="editor1"> with an CKEditor instance.\r
156                         CKEDITOR.replace( 'editor1', {\r
157                                 on: {\r
158                                         focus: onFocus,\r
159                                         blur: onBlur,\r
160 \r
161                                         // Check for availability of corresponding plugins.\r
162                                         pluginsLoaded: function( evt ) {\r
163                                                 var doc = CKEDITOR.document, ed = evt.editor;\r
164                                                 if ( !ed.getCommand( 'bold' ) )\r
165                                                         doc.getById( 'exec-bold' ).hide();\r
166                                                 if ( !ed.getCommand( 'link' ) )\r
167                                                         doc.getById( 'exec-link' ).hide();\r
168                                         }\r
169                                 }\r
170                         });\r
171                 </script>\r
172 \r
173                 <p id="eMessage">\r
174                 </p>\r
175 \r
176                 <div id="eButtons" style="display: none">\r
177                         <input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command">\r
178                         <input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command">\r
179                         <input onclick="Focus();" type="button" value="Focus">\r
180                         <br><br>\r
181                         <input onclick="InsertHTML();" type="button" value="Insert HTML">\r
182                         <input onclick="SetContents();" type="button" value="Set Editor Contents">\r
183                         <input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">\r
184                         <br>\r
185                         <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>\r
186                         <br>\r
187                         <br>\r
188                         <input onclick="InsertText();" type="button" value="Insert Text">\r
189                         <br>\r
190                         <textarea cols="100" id="txtArea" rows="3">   First line with some leading whitespaces.\r
191 \r
192 Second line of text preceded by two line breaks.</textarea>\r
193                         <br>\r
194                         <br>\r
195                         <input onclick="CheckDirty();" type="button" value="checkDirty()">\r
196                         <input onclick="ResetDirty();" type="button" value="resetDirty()">\r
197                 </div>\r
198         </form>\r
199         <div id="footer">\r
200                 <hr>\r
201                 <p>\r
202                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
203                 </p>\r
204                 <p id="copy">\r
205                         Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
206                         Knabben. All rights reserved.\r
207                 </p>\r
208         </div>\r
209 </body>\r
210 </html>\r