Ticket #9351: _divarea_autogrow.html

File _divarea_autogrow.html, 7.3 KB (added by Jakub Ś, 11 years ago)

Autogrow for divarea - complete

Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.html or http://ckeditor.com/license
5-->
6<html>
7<head>
8        <title>Replace Textarea with a "DIV-based" editor &mdash; CKEditor Sample</title>
9        <meta charset="utf-8">
10        <script src="../ckeditor.js"></script>
11        <link href="sample.css" rel="stylesheet">
12        <style>
13 .cke_wysiwyg_div
14 {
15  min-height: 200px;
16  max-height: 600px;
17 }
18</style>
19
20</head>
21<body>
22        <h1 class="samples">
23                <a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea with a "DIV-based" editor
24        </h1>
25        <form action="sample_posteddata.php" method="post">
26                <div class="description">
27                        <p>
28                                This editor is using a <code>&lt;div&gt;</code> element-based editing area, provided by the <strong>Divarea</strong> plugin.
29                        </p>
30<pre class="samples">
31CKEDITOR.replace( '<em>textarea_id</em>', {
32        extraPlugins: 'divarea'
33});</pre>
34                </div>
35                <textarea cols="80" id="editor1" name="editor1" rows="10">
36                        &lt;h1&gt;
37                                &lt;img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px; margin-right: 10px; float: left; width: 120px; height: 168px;" /&gt;Little Red Riding Hood&lt;/h1&gt;
38                        &lt;p&gt;
39                                &quot;&lt;b&gt;Little Red Riding Hood&lt;/b&gt;&quot; is a famous &lt;a href="http://en.wikipedia.org/wiki/Fairy_tale" title="Fairy tale"&gt;fairy tale&lt;/a&gt; about a young girl&#39;s encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.&lt;/p&gt;
40                        &lt;table align="right" cellpadding="1" cellspacing="1" style="width: 200px;"&gt;
41                                &lt;caption&gt;
42                                        &lt;strong&gt;International Names&lt;/strong&gt;&lt;/caption&gt;
43                                &lt;tbody&gt;
44                                        &lt;tr&gt;
45                                                &lt;td&gt;
46                                                        Chinese&lt;/td&gt;
47                                                &lt;td&gt;
48                                                        &lt;i&gt;小紅帽&lt;/i&gt;&lt;/td&gt;
49                                        &lt;/tr&gt;
50                                        &lt;tr&gt;
51                                                &lt;td&gt;
52                                                        Italian&lt;/td&gt;
53                                                &lt;td&gt;
54                                                        &lt;i&gt;Cappuccetto Rosso&lt;/i&gt;&lt;/td&gt;
55                                        &lt;/tr&gt;
56                                        &lt;tr&gt;
57                                                &lt;td&gt;
58                                                        Spanish&lt;/td&gt;
59                                                &lt;td&gt;
60                                                        &lt;i&gt;Caperucita Roja&lt;/i&gt;&lt;/td&gt;
61                                        &lt;/tr&gt;
62                                &lt;/tbody&gt;
63                        &lt;/table&gt;
64                        &lt;p&gt;
65                                The version most widely known today is based on the &lt;a href="http://en.wikipedia.org/wiki/Brothers_Grimm" title="Brothers Grimm"&gt;Brothers Grimm&lt;/a&gt; variant. It is about a girl called Little Red Riding Hood, after the red &lt;a href="http://en.wikipedia.org/wiki/Hood_%28headgear%29" title="Hood (headgear)"&gt;hooded&lt;/a&gt; &lt;a href="http://en.wikipedia.org/wiki/Cape" title="Cape"&gt;cape&lt;/a&gt; or &lt;a href="http://en.wikipedia.org/wiki/Cloak" title="Cloak"&gt;cloak&lt;/a&gt; she wears. The girl walks through the woods to deliver food to her sick grandmother.&lt;/p&gt;
66                        &lt;p&gt;
67                                A wolf wants to eat the girl but is afraid to do so in public. He approaches the girl, and she na&iuml;vely tells him where she is going. He suggests the girl pick some flowers, which she does. In the meantime, he goes to the grandmother&#39;s house and gains entry by pretending to be the girl. He swallows the grandmother whole, and waits for the girl, disguised as the grandmother.&lt;/p&gt;
68                        &lt;p&gt;
69                                When the girl arrives, she notices he looks very strange to be her grandma. In most retellings, this eventually culminates with Little Red Riding Hood saying, &quot;My, what big teeth you have!&quot;&lt;br /&gt;
70                                To which the wolf replies, &quot;The better to eat you with,&quot; and swallows her whole, too.&lt;/p&gt;
71                        &lt;p&gt;
72                                A &lt;a href="http://en.wikipedia.org/wiki/Hunter" title="Hunter"&gt;hunter&lt;/a&gt;, however, comes to the rescue and cuts the wolf open. Little Red Riding Hood and her grandmother emerge unharmed. They fill the wolf&#39;s body with heavy stones, which drown him when he falls into a well. Other versions of the story have had the grandmother shut in the closet instead of eaten, and some have Little Red Riding Hood saved by the hunter as the wolf advances on her rather than after she is eaten.&lt;/p&gt;
73                        &lt;p&gt;
74                                The tale makes the clearest contrast between the safe world of the village and the dangers of the &lt;a href="http://en.wikipedia.org/wiki/Enchanted_forest" title="Enchanted forest"&gt;forest&lt;/a&gt;, conventional antitheses that are essentially medieval, though no written versions are as old as that.&lt;/p&gt;
75                </textarea>
76                <script>
77
78                        // This call can be placed at any point after the
79                        // <textarea>, or inside a <head><script> in a
80                        // window.onload event handler.
81
82                        // Replace the <textarea id="editor"> with an CKEditor
83                        // instance, using default configurations.
84                        var editor = CKEDITOR.replace( 'editor1', {
85                                extraPlugins: 'divarea',
86                                height : 'auto'
87                        });
88                       
89                        /*zmiany w textarea nie rośnie bo ma height ustawiony a na zmianie na wysiwyg sie zmieni height
90                        Zmiany w wysiwyg maximized nie bedzie widoczne w textarea*/
91                        editor.on( 'instanceReady', function( e ) {             
92                                var contentDiv = document.getElementById( 'cke_' +editor.name ).getElementsByTagName( 'div' )[0];
93                                var contentParent = contentDiv.parentNode;                             
94                                var computedHeight;     
95                                                               
96                                editor.on( 'beforeModeUnload', function( evt ) { 
97                                        if ( evt.editor.mode == 'wysiwyg' && evt.editor.getCommand( 'maximize' ).state == CKEDITOR.TRISTATE_OFF )
98                                                computedHeight = window.getComputedStyle(contentDiv,null).getPropertyValue("height");                                           
99                                        computedHeight = (computedHeight == '100%') ? window.getComputedStyle(contentParent,null).getPropertyValue("height") : computedHeight;                                 
100                                });     
101                               
102                                editor.on( 'mode', function( evt ) {                           
103                                        if ( evt.editor.mode == 'source' && evt.editor.getCommand( 'maximize' ).state == CKEDITOR.TRISTATE_OFF ) {     
104                                                var textAreaStyle = contentParent.getElementsByTagName( 'textarea' )[0].style;
105                                                textAreaStyle.height = computedHeight;                                         
106                                                if(document.all && textAreaStyle.width && !parseInt(textAreaStyle.width)){//if width is 0px in IE set it to 100%
107                                                        textAreaStyle.width = '100%';
108                                                }
109                                        }       
110                                });
111                               
112                                editor.on( 'beforeCommandExec', function( evt ) { 
113                                        if( evt.data.name == 'maximize' && evt.editor.mode == 'source' ) {                                             
114                                                if( evt.editor.getCommand( 'maximize' ).state == CKEDITOR.TRISTATE_OFF ) {                                                     
115                                                        contentParent.getElementsByTagName( 'textarea' )[0].style.height = '100%';
116                                                } else 
117                                                        contentParent.getElementsByTagName( 'textarea' )[0].style.height = computedHeight;                                                             
118                                                       
119                                        } else if ( evt.data.name == 'maximize' && evt.editor.mode == 'wysiwyg' ) {
120                                                computedHeight = window.getComputedStyle(contentDiv,null).getPropertyValue("height");                                           
121                                                computedHeight = (computedHeight == '100%') ? window.getComputedStyle(contentParent,null).getPropertyValue("height") : computedHeight;                                                         
122                                        }
123                                });
124                        });
125                       
126
127                </script>
128                <p>
129                        <input type="submit" value="Submit">
130                </p>
131        </form>
132        <div id="footer">
133                <hr>
134                <p>
135                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
136                </p>
137                <p id="copy">
138                        Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
139                        Knabben. All rights reserved.
140                </p>
141        </div>
142</body>
143</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy