Ticket #16825: inlinebycode2.html

File inlinebycode2.html, 2.6 KB (added by Jakub Ś, 3 years ago)
Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2016, 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>Inline Editing by Code &mdash; CKEditor Sample</title>
10        <script src="//cdn.ckeditor.com/4.6.2/full-all/ckeditor.js"></script>
11        <link href="sample.css" rel="stylesheet">
12        <style>
13
14                #editable
15                {
16                        padding: 10px;
17                        float: left;
18                }
19
20        </style>
21</head>
22<body>
23        <h1 class="samples">
24                <a href="index.html">CKEditor Samples</a> &raquo; Inline Editing by Code
25        </h1>
26        <div class="warning deprecated">
27                This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/inline.html">brand new version in CKEditor SDK</a>.
28        </div>
29        <div class="description">
30                <p>
31                        This sample shows how to create an inline editor instance of CKEditor. It is created
32                        with a JavaScript call using the following code:
33                </p>
34<pre class="samples">
35// This property tells CKEditor to not activate every element with contenteditable=true element.
36CKEDITOR.disableAutoInline = true;
37
38var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
39</pre>
40                <p>
41                        Note that <code>editable</code> in the code above is the <code>id</code>
42                        attribute of the <code>&lt;div&gt;</code> element to be converted into an inline instance.
43                </p>
44       
45        <div id="top"></div>
46       
47        <div id="editable" style="float:left;" contenteditable="true">
48                <h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg" /> Apollo 11</h1>
49        </div>
50       
51        <div id="editable2" style="float:right;" contenteditable="true">
52                <h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg" /> Apollo 11</h1>
53        </div>
54
55        <script>
56                // We need to turn off the automatic editor creation first.
57                CKEDITOR.disableAutoInline = true;
58
59                var editor = CKEDITOR.inline( 'editable', {
60                extraPlugins: 'sharedspace',
61                sharedSpaces : {
62                        top: 'top'
63                }
64                } );
65                var editor2 = CKEDITOR.inline( 'editable2', {
66                        extraPlugins: 'sharedspace',
67                        sharedSpaces : {
68                                top: 'top'
69                        }
70                } );
71               
72                window.setTimeout( function() {
73                        editor2.destroy();
74                }, 5000 );
75               
76        </script>
77        <div id="footer">
78                <hr>
79                <p contenteditable="true">
80                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
81                                http://ckeditor.com</a>
82                </p>
83                <p id="copy">
84                        Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a>
85                        - Frederico Knabben. All rights reserved.
86                </p>
87        </div>
88</body>
89</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy