Ticket #4254: api.html

File api.html, 3.8 KB (added by Alfonso Martínez de Lizarrondo, 12 years ago)

Proposed sample file

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>API usage - CKEditor Sample</title>
9        <script type="text/javascript" src="sample.js"></script>
10        <script id="headscript" type="text/javascript">
11        //<![CDATA[
12
13// The instanceReady event is fired when an instance of CKEditor has finished
14// its initialization.
15CKEDITOR.on( 'instanceReady', function( ev )
16        {
17                // Show the editor name and description in the browser status bar.
18                document.getElementById('eMessage').innerHTML = '<p>Instance "' + ev.editor.name + '" loaded.</p>' ;
19
20                // Show this sample buttons.
21                document.getElementById('eButtons').style.visibility = '' ;
22        });
23
24
25function InsertHTML()
26{
27        // Get the editor instance that we want to interact with.
28        var oEditor = CKEDITOR.instances.editor1 ;
29        var value = document.getElementById( 'plainArea' ).value ;
30
31        // Check the active editing mode.
32        if (oEditor.mode == 'wysiwyg' )
33        {
34                // Insert the desired HTML.
35                oEditor.insertHtml( value ) ;
36        }
37        else
38                alert( 'You must be on WYSIWYG mode!' ) ;
39}
40
41function SetContents()
42{
43        // Get the editor instance that we want to interact with.
44        var oEditor = CKEDITOR.instances.editor1 ;
45        var value = document.getElementById( 'plainArea' ).value ;
46
47        // Set the editor contents (replace the actual one).
48        oEditor.setData( value ) ;
49}
50
51function GetContents()
52{
53        // Get the editor instance that we want to interact with.
54        var oEditor = CKEDITOR.instances.editor1 ;
55
56        // Get the editor contents
57        alert( oEditor.getData() ) ;   
58}
59
60function ExecuteCommand( commandName )
61{
62        // Get the editor instance that we want to interact with.
63        var oEditor = CKEDITOR.instances.editor1 ;
64
65        // Execute the command.
66        oEditor.execCommand( commandName ) ;
67}
68
69function CheckDirty()
70{
71        // Get the editor instance that we want to interact with.
72        var oEditor = CKEDITOR.instances.editor1 ;
73        alert( oEditor.checkDirty() ) ;
74}
75
76function ResetDirty()
77{
78        // Get the editor instance that we want to interact with.
79        var oEditor = CKEDITOR.instances.editor1 ;
80        oEditor.resetDirty() ;
81        alert( 'The "IsDirty" status has been reset' ) ;
82}
83
84        //]]>
85        </script>
86</head>
87<body>
88        <div id="html">
89                <p>
90                This sample shows how to use the CKeditor JavaScript API to interact with the editor
91                at runtime.</p>
92                <textarea id="editor1" name="editor1" rows="10" cols="80">&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>
93                <script type="text/javascript">
94                //<![CDATA[
95                        // Replace the <textarea id="editor1"> with an CKEditor instance.
96                        var editor = CKEDITOR.replace( 'editor1');
97                //]]>
98                </script>
99                <div id="eMessage">
100                        &nbsp;
101                </div>
102                <div id="eButtons" style="visibility: hidden">
103                        <input type="button" value="Insert HTML" onclick="InsertHTML();" />
104                        <input type="button" value="Set Editor Contents" onclick="SetContents();" />
105                        <input type="button" value="Get Editor Contents (XHTML)" onclick="GetContents();" />
106                        <br />
107                        <textarea id="plainArea" cols="80" 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>
108                        <br />
109                        <br />
110                        <input type="button" value='Execute "bold" Command' onclick="ExecuteCommand('bold');" />
111                        <input type="button" value='Execute "link" Command' onclick="ExecuteCommand('link');" />
112                <br />
113                <br />
114                <input type="button" value="checkDirty()" onclick="CheckDirty();" />
115                <input type="button" value="resetDirty()" onclick="ResetDirty();" />
116                </div>
117
118        </div>
119</body>
120</html>
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy