Ticket #6703: api-changed.html

File api-changed.html, 5.0 KB (added by Brett, 9 years ago)

File to recreate bug.

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-2010, 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        <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 "' + ev.editor.name + '" loaded.<\/p>';
22
23        // Show this sample buttons.
24        document.getElementById( 'eButtons' ).style.visibility = '';
25
26        var oEditor = CKEDITOR.instances.editor1;
27        oEditor.on('focus',function(){alert('focused')});
28});
29
30
31function InsertHTML()
32{
33        // Get the editor instance that we want to interact with.
34        var oEditor = CKEDITOR.instances.editor1;
35        var value = document.getElementById( 'plainArea' ).value;
36
37        // Check the active editing mode.
38        if ( oEditor.mode == 'wysiwyg' )
39        {
40                // Insert the desired HTML.
41                oEditor.insertHtml( value );
42        }
43        else
44                alert( 'You must be on WYSIWYG mode!' );
45}
46
47function SetContents()
48{
49        // Get the editor instance that we want to interact with.
50        var oEditor = CKEDITOR.instances.editor1;
51        var value = document.getElementById( 'plainArea' ).value;
52
53        // Set the editor contents (replace the actual one).
54        oEditor.setData( value );
55}
56
57function GetContents()
58{
59        // Get the editor instance that we want to interact with.
60        var oEditor = CKEDITOR.instances.editor1;
61
62        // Get the editor contents
63        alert( oEditor.getData() );
64}
65
66function ExecuteCommand( commandName )
67{
68        // Get the editor instance that we want to interact with.
69        var oEditor = CKEDITOR.instances.editor1;
70
71        // Check the active editing mode.
72        if ( oEditor.mode == 'wysiwyg' )
73        {
74                // Execute the command.
75                oEditor.execCommand( commandName );
76        }
77        else
78                alert( 'You must be on WYSIWYG mode!' );
79}
80
81function CheckDirty()
82{
83        // Get the editor instance that we want to interact with.
84        var oEditor = CKEDITOR.instances.editor1;
85        alert( oEditor.checkDirty() );
86}
87
88function ResetDirty()
89{
90        // Get the editor instance that we want to interact with.
91        var oEditor = CKEDITOR.instances.editor1;
92        oEditor.resetDirty();
93        alert( 'The "IsDirty" status has been reset' );
94}
95
96        //]]>
97        </script>
98
99</head>
100<body>
101        <h1>
102                CKEditor Sample
103        </h1>
104        <!-- This <div> holds alert messages to be display in the sample page. -->
105        <div id="alerts">
106                <noscript>
107                        <p>
108                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
109                                support, like yours, you should still see the contents (HTML data) and you should
110                                be able to edit it normally, without a rich editor interface.
111                        </p>
112                </noscript>
113        </div>
114        <form action="sample_posteddata.php" method="post">
115                <p>
116                        This sample shows how to use the CKEditor JavaScript API to interact with the editor
117                        at runtime.</p>
118                <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://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
119
120                <script type="text/javascript">
121                //<![CDATA[
122                        // Replace the <textarea id="editor1"> with an CKEditor instance.
123                        var editor = CKEDITOR.replace( 'editor1' );
124                //]]>
125                </script>
126
127                <div id="eMessage">
128                </div>
129                <div id="eButtons" style="visibility: hidden">
130                        <input onclick="InsertHTML();" type="button" value="Insert HTML" />
131                        <input onclick="SetContents();" type="button" value="Set Editor Contents" />
132                        <input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)" />
133                        <br />
134                        <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>
135                        <br />
136                        <br />
137                        <input onclick="ExecuteCommand('bold');" type="button" value="Execute &quot;bold&quot; Command" />
138                        <input onclick="ExecuteCommand('link');" type="button" value="Execute &quot;link&quot; Command" />
139                        <br />
140                        <br />
141                        <input onclick="CheckDirty();" type="button" value="checkDirty()" />
142                        <input onclick="ResetDirty();" type="button" value="resetDirty()" />
143                </div>
144        </form>
145        <div id="footer">
146                <hr />
147                <p>
148                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
149                </p>
150                <p id="copy">
151                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
152                        Knabben. All rights reserved.
153                </p>
154        </div>
155</body>
156</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy