Ticket #9814: display_none.html

File display_none.html, 9.9 KB (added by cheesypoof, 5 years ago)
Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2014, 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>Massive inline editing &mdash; CKEditor Sample</title>
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
48        </script>
49        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
50        <script>
51
52                $(function() {
53                        $( '#toggle_vis' ).click( function() {
54                                $( '#sampleTitle' ).toggle();
55                        });
56
57                        $( '#disable_ro_mode' ).click( function() {
58                                CKEDITOR.instances.sampleTitle.setReadOnly( false );
59                        });
60                });
61
62        </script>
63        <link href="sample.css" rel="stylesheet">
64        <style>
65
66                /* The following styles are just to make the page look nice. */
67
68                /* Workaround to show Arial Black in Firefox. */
69                @font-face
70                {
71                        font-family: 'arial-black';
72                        src: local('Arial Black');
73                }
74
75                *[contenteditable="true"]
76                {
77                        padding: 10px;
78                }
79
80                #container
81                {
82                        width: 960px;
83                        margin: 30px auto 0;
84                }
85
86                #header
87                {
88                        overflow: hidden;
89                        padding: 0 0 30px;
90                        border-bottom: 5px solid #05B2D2;
91                        position: relative;
92                }
93
94                #headerLeft,
95                #headerRight
96                {
97                        width: 49%;
98                        overflow: hidden;
99                }
100
101                #headerLeft
102                {
103                        float: left;
104                        padding: 10px 1px 1px;
105                }
106
107                #headerLeft h2,
108                #headerLeft h3
109                {
110                        text-align: right;
111                        margin: 0;
112                        overflow: hidden;
113                        font-weight: normal;
114                }
115
116                #headerLeft h2
117                {
118                        font-family: "Arial Black",arial-black;
119                        font-size: 4.6em;
120                        line-height: 1.1;
121                        text-transform: uppercase;
122                }
123
124                #headerLeft h3
125                {
126                        font-size: 2.3em;
127                        line-height: 1.1;
128                        margin: .2em 0 0;
129                        color: #666;
130                }
131
132                #headerRight
133                {
134                        float: right;
135                        padding: 1px;
136                }
137
138                #headerRight p
139                {
140                        line-height: 1.8;
141                        text-align: justify;
142                        margin: 0;
143                }
144
145                #headerRight p + p
146                {
147                        margin-top: 20px;
148                }
149
150                #headerRight > div
151                {
152                        padding: 20px;
153                        margin: 0 0 0 30px;
154                        font-size: 1.4em;
155                        color: #666;
156                }
157
158                #columns
159                {
160                        color: #333;
161                        overflow: hidden;
162                        padding: 20px 0;
163                }
164
165                #columns > div
166                {
167                        float: left;
168                        width: 33.3%;
169                }
170
171                #columns #column1 > div
172                {
173                        margin-left: 1px;
174                }
175
176                #columns #column3 > div
177                {
178                        margin-right: 1px;
179                }
180
181                #columns > div > div
182                {
183                        margin: 0px 10px;
184                        padding: 10px 20px;
185                }
186
187                #columns blockquote
188                {
189                        margin-left: 15px;
190                }
191
192                #tagLine
193                {
194                        border-top: 5px solid #05B2D2;
195                        padding-top: 20px;
196                }
197
198                #taglist {
199                        display: inline-block;
200                        margin-left: 20px;
201                        font-weight: bold;
202                        margin: 0 0 0 20px;
203                }
204
205        </style>
206</head>
207<body>
208<div>
209        <h1 class="samples"><a href="index.html">CKEditor Samples</a> &raquo; Massive inline editing</h1>
210        <div class="description">
211                <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>
212                <pre class="samples">&lt;div <strong>contenteditable="true</strong>" &gt; ... &lt;/div&gt;</pre>
213                <p>Click inside of any element below to start editing.</p>
214        </div>
215</div>
216<div id="container">
217        <div id="header">
218                <div id="headerLeft">
219                        <ol>
220                                <li><a href="#" id="toggle_vis">Toggle visibility</a></li>
221                                <li><a href="#" id="disable_ro_mode">Disable read-only mode</a></li>
222                        </ol>
223                        <h2 id="sampleTitle" contenteditable="true" style="display:none;">
224                                CKEditor<br> Goes Inline!
225                        </h2>
226                        <h3 contenteditable="true">
227                                Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
228                        </h3>
229                </div>
230                <div id="headerRight">
231                        <div contenteditable="true">
232                                <p>
233                                        Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
234                                </p>
235                                <p>
236                                        Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.
237                                </p>
238                        </div>
239                </div>
240        </div>
241        <div id="columns">
242                <div id="column1">
243                        <div contenteditable="true">
244                                <h3>
245                                        Fusce vitae porttitor
246                                </h3>
247                                <p>
248                                        <strong>
249                                                Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
250                                        </strong>
251                                </p>
252                                <p>
253                                        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.
254                                </p>
255                                <blockquote>
256                                        <p>
257                                                Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
258                                                Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
259                                        </p>
260                                </blockquote>
261                                <blockquote>
262                                        <p>
263                                                Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
264                                        </p>
265                                </blockquote>
266                                <p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
267                                <p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>
268                        </div>
269                </div>
270                <div id="column2">
271                        <div contenteditable="true">
272                                <h3>
273                                        Integer condimentum sit amet
274                                </h3>
275                                <p>
276                                        <strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
277                                        Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
278                                <p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
279                                <p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
280                        </div>
281                        <div contenteditable="true">
282                                <h3>
283                                        Praesent wisi accumsan sit amet nibh
284                                </h3>
285                                <p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
286                                <p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="http://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
287                                <p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
288                        </div>
289                </div>
290                <div id="column3">
291                        <div contenteditable="true">
292                                <p>
293                                        <img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">
294                                </p>
295                                <p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>
296                                <h3>
297                                        Nullam laoreet vel consectetuer tellus suscipit
298                                </h3>
299                                <ul>
300                                        <li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
301                                        <li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>
302                                        <li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
303                                </ul>
304                                <p>Quisque justo neque, mattis sed, <a href="http://ckeditor.com/">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>
305                                <p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>
306                                <p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>
307                        </div>
308                </div>
309        </div>
310        <div id="tagLine">
311                Tags of this article:
312                <p id="taglist" contenteditable="true">
313                        inline, editing, floating, CKEditor
314                </p>
315        </div>
316</div>
317<div id="footer">
318        <hr>
319        <p>
320                CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
321                        http://ckeditor.com</a>
322        </p>
323        <p id="copy">
324                Copyright &copy; 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a>
325                - Frederico Knabben. All rights reserved.
326        </p>
327</div>
328</body>
329</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy