Ticket #10670: inlineall2.html

File inlineall2.html, 6.1 KB (added by Jakub Ś, 8 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        <title>Massive inline editing &mdash; CKEditor Sample</title>
9        <meta charset="utf-8">
10        <script src="../ckeditor.js"></script>
11        <script>
12
13                // This code is generally not necessary, but it is here to demonstrate
14                // how to customize specific editor instances on the fly. This fits well
15                // this demo because we have editable elements (like headers) that
16                // require less features.
17
18                // The "instanceCreated" event is fired for every editor instance created.
19                CKEDITOR.on( 'instanceCreated', function( event ) {
20                        var editor = event.editor,
21                                element = editor.element;
22
23                        // Customize editors for headers and tag list.
24                        // These editors don't need features like smileys, templates, iframes etc.
25                        if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
26                                // Customize the editor configurations on "configLoaded" event,
27                                // which is fired after the configuration file loading and
28                                // execution. This makes it possible to change the
29                                // configurations before the editor initialization takes place.
30                                editor.on( 'configLoaded', function() {
31
32                                        // Remove unnecessary plugins to make the editor simpler.
33                                        editor.config.removePlugins = 'colorbutton,find,flash,font,' +
34                                                'forms,iframe,image,newpage,removeformat,' +
35                                                'smiley,specialchar,stylescombo,templates';
36
37                                        // Rearrange the layout of the toolbar.
38                                        editor.config.toolbarGroups = [
39                                                { name: 'editing',              groups: [ 'basicstyles', 'links' ] },
40                                                { name: 'undo' },
41                                                { name: 'clipboard',    groups: [ 'selection', 'clipboard' ] },
42                                                { name: 'about' }
43                                        ];
44                                });
45                        }
46                });
47        </script>
48        <link href="sample.css" rel="stylesheet">
49        <style>
50
51                /* The following styles are just to make the page look nice. */
52
53                /* Workaround to show Arial Black in Firefox. */
54                @font-face
55                {
56                        font-family: 'arial-black';
57                        src: local('Arial Black');
58                }
59
60                *[contenteditable="true"]
61                {
62                        padding: 10px;
63                }
64
65                #container
66                {
67                        width: 960px;
68                        margin: 30px auto 0;
69                }
70
71                #header
72                {
73                        overflow: hidden;
74                        padding: 0 0 30px;
75                        border-bottom: 5px solid #05B2D2;
76                        position: relative;
77                }
78
79                #headerLeft,
80                #headerRight
81                {
82                        width: 49%;
83                        overflow: hidden;
84                }
85
86                #headerLeft
87                {
88                        float: left;
89                        padding: 10px 1px 1px;
90                }
91
92                #headerLeft h2,
93                #headerLeft h3
94                {
95                        text-align: right;
96                        margin: 0;
97                        overflow: hidden;
98                        font-weight: normal;
99                }
100
101                #headerLeft h2
102                {
103                        font-family: "Arial Black",arial-black;
104                        font-size: 4.6em;
105                        line-height: 1.1em;
106                        text-transform: uppercase;
107                }
108
109                #headerLeft h3
110                {
111                        font-size: 2.3em;
112                        line-height: 1.1em;
113                        margin: .2em 0 0;
114                        color: #666;
115                }
116
117                #headerRight
118                {
119                        float: right;
120                        padding: 1px;
121                }
122
123                #headerRight p
124                {
125                        line-height: 1.8em;
126                        text-align: justify;
127                        margin: 0;
128                }
129
130                #headerRight p + p
131                {
132                        margin-top: 20px;
133                }
134
135                #headerRight > div
136                {
137                        padding: 20px;
138                        margin: 0 0 0 30px;
139                        font-size: 1.4em;
140                        color: #666;
141                }
142
143                #columns
144                {
145                        color: #333;
146                        overflow: hidden;
147                        padding: 20px 0;
148                }
149
150                #columns > div
151                {
152                        float: left;
153                        width: 33.3%;
154                }
155
156                #columns #column1 > div
157                {
158                        margin-left: 1px;
159                }
160
161                #columns #column3 > div
162                {
163                        margin-right: 1px;
164                }
165
166                #columns > div > div
167                {
168                        margin: 0px 10px;
169                        padding: 10px 20px;
170                }
171
172                #columns blockquote
173                {
174                        margin-left: 15px;
175                }
176
177                #tagLine
178                {
179                        border-top: 5px solid #05B2D2;
180                        padding-top: 20px;
181                }
182
183                #taglist {
184                        display: inline-block;
185                        margin-left: 20px;
186                        font-weight: bold;
187                        margin: 0 0 0 20px;
188                }
189
190        </style>
191</head>
192<body>
193<div>
194        <h1 class="samples"><a href="index.html">CKEditor Samples</a> &raquo; Massive inline editing</h1>
195        <div class="description">
196                <p>This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with <strong>contentEditable</strong> attribute set to value <strong>true</strong>:</p>
197                <pre class="samples">&lt;div <strong>contenteditable="true</strong>" &gt; ... &lt;/div&gt;</pre>
198                <p>Click inside of any element below to start editing.</p>
199        </div>
200</div>
201<div id="container">
202
203        <div id="columns">
204                <div id="column1">
205                        <div contenteditable="true">
206                                <h3>
207                                        Fusce vitae porttitor
208                                </h3>
209                                <p>
210                                        <strong>
211                                                Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
212                                        </strong>
213                                </p>
214                                <p>
215                                        Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a href="http://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat volutpat.
216                                </p>
217                                <blockquote>
218                                        <p>
219                                                Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
220                                                Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
221                                        </p>
222                                </blockquote>
223                                <blockquote>
224                                        <p>
225                                                Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
226                                        </p>
227                                </blockquote>
228                                <p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
229                                <p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>
230                        </div>
231                </div>
232                <input type="text" id="input_box"/>
233        </div>
234       
235        <script>
236                //setTimeout(function(){document.getElementById("input_box").focus();}, 500);
237                document.getElementById("input_box").focus();
238        </script>
239       
240       
241       
242</div>
243<div id="footer">
244        <hr>
245        <p>
246                CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
247                        http://ckeditor.com</a>
248        </p>
249        <p id="copy">
250                Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a>
251                - Frederico Knabben. All rights reserved.
252        </p>
253</div>
254</body>
255</html>
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy