Ticket #11011: api2.html

File api2.html, 3.1 KB (added by Jakub Ś, 6 years ago)
Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.md or http://ckeditor.com/license
5-->
6<html>
7<head>
8        <meta charset="utf-8">
9        <title>API Usage &mdash; CKEditor Sample</title>
10        <script src="../ckeditor.js"></script>
11        <link href="sample.css" rel="stylesheet"/>
12        <script>
13
14// The instanceReady event is fired, when an instance of CKEditor has finished
15// its initialization.
16CKEDITOR.on( 'instanceReady', function( ev ) {
17        // Show the editor name and description in the browser status bar.
18        document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
19
20        // Show this sample buttons.
21        document.getElementById( 'eButtons' ).style.display = 'block';
22});
23
24
25function ExecuteCommand( name ) {
26        // Get the editor instance that we want to interact with.
27        var editor = CKEDITOR.instances.editor1;
28
29        // Check the active editing mode.
30        if ( editor.mode == 'wysiwyg' )
31        {
32                //4.x code
33                var styleDefinition =  { name: name, element: 'span', attributes: { 'class': name, 'data-element' : name} };
34                var style =  new CKEDITOR.style( styleDefinition );
35                style.type = CKEDITOR.STYLE_INLINE;
36                editor.applyStyle(style);
37               
38                // 3.x code
39                //var style = new CKEDITOR.style( {name: name,  element : 'span', attributes: { 'class': name, 'data-element' : name} });
40                //style.type = CKEDITOR.STYLE_INLINE;           // need to override... dunno why.
41                //style.apply( editor.document );
42        }
43        else
44                alert( 'You must be in WYSIWYG mode!' );
45}
46
47
48
49        </script>
50
51</head>
52<body>
53        <h1 class="samples">
54                <a href="index.html">CKEditor Samples</a> &raquo; Using CKEditor JavaScript API
55        </h1>
56        <div class="description">
57        <p>
58                This sample shows how to use the
59                <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>
60                to interact with the editor at runtime.
61        </p>
62        <p>
63                For details on how to create this setup check the source code of this sample page.
64        </p>
65        </div>
66
67        <!-- This <div> holds alert messages to be display in the sample page. -->
68        <div id="alerts">
69                <noscript>
70                        <p>
71                                CKEditor requires JavaScript to run. In a browser with no JavaScript
72                                support, like yours, you should still see the contents (HTML data) and you should
73                                be able to edit it normally, without a rich editor interface.
74                        </p>
75                </noscript>
76        </div>
77        <form action="../../../samples/sample_posteddata.php" method="post">
78                <textarea cols="100" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some sample text. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
79
80                <script>
81                        // Replace the <textarea id="editor1"> with an CKEditor instance.
82                        CKEDITOR.replace( 'editor1', {
83                                allowedContent:true
84                        });
85                </script>
86
87                <p id="eMessage">
88                </p>
89
90                <div id="eButtons" style="display: none">
91                        <input id="exec-bold" onclick="ExecuteCommand('term');" type="button" value="Execute term style">
92                        <input id="exec-link" onclick="ExecuteCommand('quote');" type="button" value="Execute quote style">
93                </div>
94</body>
95</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy