Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

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