Ticket #2749: replacebycode3.html

File replacebycode3.html, 6.0 KB (added by Jakub Ś, 8 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>Replace Textarea by Code &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        <link href="sample.css" rel="stylesheet" type="text/css" />
12
13</head>
14<body>
15        <h1 class="samples">
16                CKEditor Sample &mdash; Replace Textarea Elements Using JavaScript Code
17        </h1>
18        <div class="description">
19        <p>
20                This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
21                with a CKEditor instance by using a JavaScript call.
22        </p>
23        <p>
24                To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
25                after the <code>&lt;textarea&gt;</code> element or inside a <code>&lt;script&gt;</code> element located
26                in the <code>&lt;head&gt;</code> section of the page, in a <code>window.onload</code> event handler:
27        </p>
28        <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>' );</pre>
29        <p>
30                Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
31                the <code>&lt;textarea&gt;</code> element to be replaced.
32        </p>
33        </div>
34
35        <!-- This <div> holds alert messages to be display in the sample page. -->
36        <div id="alerts">
37                <noscript>
38                        <p>
39                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
40                                support, like yours, you should still see the contents (HTML data) and you should
41                                be able to edit it normally, without a rich editor interface.
42                        </p>
43                </noscript>
44        </div>
45        <form action="sample_posteddata.php" method="post">     
46        <p id="abc">Some text </p>     
47                <p>             
48                        <label for="editor1">
49                                Editor 1:</label>
50                        <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
51        <div>   
52                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('A')">&nbsp;A&nbsp;</span>
53                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('B')">&nbsp;B&nbsp;</span>
54                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('C')">&nbsp;C&nbsp;</span>
55                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('D')">&nbsp;D&nbsp;</span>
56                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('E')">&nbsp;E&nbsp;</span>
57                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('F')">&nbsp;F&nbsp;</span>
58                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('G')">&nbsp;G&nbsp;</span>
59                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('H')">&nbsp;H&nbsp;</span>
60                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('I')">&nbsp;I&nbsp;</span>
61                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('J')">&nbsp;J&nbsp;</span>
62                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('K')">&nbsp;K&nbsp;</span>
63                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('L')">&nbsp;L&nbsp;</span>
64                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('M')">&nbsp;M&nbsp;</span>
65                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('N')">&nbsp;N&nbsp;</span>
66                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('O')">&nbsp;O&nbsp;</span>
67                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('P')">&nbsp;P&nbsp;</span>
68                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('Q')">&nbsp;Q&nbsp;</span>
69                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('R')">&nbsp;R&nbsp;</span>
70                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('S')">&nbsp;S&nbsp;</span>
71                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('T')">&nbsp;T&nbsp;</span>
72                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('U')">&nbsp;U&nbsp;</span>
73                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('V')">&nbsp;V&nbsp;</span>
74                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('W')">&nbsp;W&nbsp;</span>
75                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('X')">&nbsp;X&nbsp;</span>
76                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('Y')">&nbsp;Y&nbsp;</span>
77                <span style="cursor: pointer; "onmousedown="InsertAtFCKCursor('Z')">&nbsp;Z&nbsp;</span>
78        </div> 
79                       
80                        <script type="text/javascript">
81                       
82                        function InsertAtFCKCursor(strInsertion) {
83                                var oEditor = CKEDITOR.instances['editor1'];
84                                //oEditor.focus();             
85                                oEditor.insertHtml(strInsertion);
86                        }
87                       
88                        //<![CDATA[
89
90                                // This call can be placed at any point after the
91                                // <textarea>, or inside a <head><script> in a
92                                // window.onload event handler.
93
94                                // Replace the <textarea id="editor"> with an CKEditor
95                                // instance, using default configurations.
96                                var editor = CKEDITOR.replace( 'editor1',{      } );   
97                        //]]>
98                        </script>
99                </p>
100                <p>
101                        <label for="editor2">
102                                Editor 2:</label>
103                        <textarea cols="80" id="editor2" name="editor2" 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>
104                        <script type="text/javascript">
105                        //<![CDATA[
106
107                                // This call can be placed at any point after the
108                                // <textarea>, or inside a <head><script> in a
109                                // window.onload event handler.
110
111                                // Replace the <textarea id="editor"> with an CKEditor
112                                // instance, using default configurations.
113                                CKEDITOR.replace( 'editor2' );
114                        //]]>
115                        </script>
116                </p>
117                <p>     
118                        <input type="submit" value="Submit" />
119                </p>
120        </form>
121        <div id="footer">
122                <hr />
123                <p>
124                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
125                </p>
126                <p id="copy">
127                        Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
128                        Knabben. All rights reserved.
129                </p>
130        </div>
131</body>
132</html>
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy