Ticket #4606: 4606_2.patch

File 4606_2.patch, 6.0 KB (added by Sa'ar Zac Elias, 14 years ago)

  • _samples/autogrow.html

     
     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2<!--
     3Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     4For licensing, see LICENSE.html or http://ckeditor.com/license
     5-->
     6<html xmlns="http://www.w3.org/1999/xhtml">
     7<head>
     8        <title>AutoGrow Plugin - CKEditor Sample</title>
     9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
     10        <!-- CKReleaser %REMOVE_LINE%
     11        <script type="text/javascript" src="../ckeditor.js"></script>
     12        CKReleaser %REMOVE_START% -->
     13        <script type="text/javascript" src="../ckeditor_source.js"></script>
     14        <!-- CKReleaser %REMOVE_END% -->
     15        <script src="sample.js" type="text/javascript"></script>
     16        <link href="sample.css" rel="stylesheet" type="text/css" />
     17</head>
     18<body>
     19        <h1>
     20                CKEditor Sample
     21        </h1>
     22        <!-- This <div> holds alert messages to be display in the sample page. -->
     23        <div id="alerts">
     24                <noscript>
     25                        <p>
     26                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
     27                                support, like yours, you should still see the contents (HTML data) and you should
     28                                be able to edit it normally, without a rich editor interface.
     29                        </p>
     30                </noscript>
     31        </div>
     32        <form action="sample_posteddata.php" method="post">
     33                <p>
     34                        In this sample the AutoGrow plugin is available. It makes the editor grow to fit the size of the content.</p>
     35                <p>
     36                        <label for="editor1">
     37                                With default configuration:</label><br />
     38                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
     39                        <script type="text/javascript">
     40                        //<![CDATA[
     41
     42                                CKEDITOR.replace( 'editor1', {
     43                                        extraPlugins : 'autogrow'
     44                                });
     45
     46                        //]]>
     47                        </script>
     48                </p>
     49                <p>
     50                        <label for="editor2">
     51                                With maximum height set to 400:</label><br />
     52                        <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
     53                        <script type="text/javascript">
     54                        //<![CDATA[
     55
     56                                CKEDITOR.replace( 'editor2', {
     57                                        extraPlugins : 'autogrow',
     58                                        autoGrow_maxHeight : 400
     59                                });
     60
     61                        //]]>
     62                        </script>
     63                </p>
     64                <p>
     65                        <input type="submit" value="Submit" />
     66                </p>
     67        </form>
     68        <div id="footer">
     69                <hr />
     70                <p>
     71                        CKEditor - The text editor for Internet - <a href="http://ckeditor.com/">http://ckeditor.com</a>
     72                </p>
     73                <p id="copy">
     74                        Copyright &copy; 2003-2010, <a href="http://cksource.com/">CKSource</a> - Frederico
     75                        Knabben. All rights reserved.
     76                </p>
     77        </div>
     78</body>
     79</html>

  • _samples/index.html

     
    4141                <li><a href="jqueryadapter.html">jQuery adapter example</a></li>
    4242                <li><a href="output_xhtml.html">Output XHTML</a></li>
    4343                <li><a href="output_html.html">Output HTML</a></li>
     44                <li><a href="autogrow.html">AutoGrow plugin</a></li>
    4445        </ul>
    4546        <div id="footer">
    4647                <hr />

  • _source/plugins/autogrow/plugin.js

     
     1/*
     2Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5
     6/**
     7 * @file AutoGrow plugin
     8 */
     9(function(){
     10        var resizeEditor = function( editor )
     11        {
     12                var doc = editor.document,
     13                        documentElement = doc.getDocumentElement().$,
     14                        currentHeight = editor.window.getViewPaneSize().height,
     15                        newHeight;
     16
     17                if ( CKEDITOR.env.ie )
     18                        newHeight = documentElement.scrollHeight;
     19                else
     20                        newHeight = documentElement.offsetHeight;
     21
     22                var min = editor.config.autoGrow_minHeight,
     23                        max = editor.config.autoGrow_maxHeight;
     24                ( min == undefined ) && ( min = 200 );
     25                if ( min )
     26                        newHeight = Math.max( newHeight === undefined ? 200 : newHeight, min );
     27                if ( max )
     28                        newHeight = Math.min( newHeight, max );
     29
     30                if ( newHeight != currentHeight )
     31                {
     32                        newHeight = editor.fire( 'autoGrow', { currentHeight : currentHeight, newHeight : newHeight } ).newHeight;
     33                        editor.resize( editor.container.getStyle( 'width' ), newHeight, true );
     34                }
     35        };
     36        CKEDITOR.plugins.add( 'autogrow',
     37        {
     38                init : function( editor )
     39                {
     40                        for ( var eventName in { contentDom:1, key:1, selectionChange:1, insertElement:1 } )
     41                        {
     42                                editor.on( eventName, function( evt )
     43                                {
     44                                        // Some time is required for insertHtml, and it gives other events better performance as well.
     45                                        if ( evt.editor.mode == 'wysiwyg' )
     46                                                setTimeout( function(){ resizeEditor( evt.editor ); }, 100 );
     47                                });
     48                        }
     49                }
     50        });
     51})();
     52/**
     53 * The minimum height to which the editor can reach using AutoGrow.
     54 * @name CKEDITOR.config.autoGrow_minHeight
     55 * @type Number
     56 * @default 200
     57 * @example
     58 * config.autoGrow_minHeight = 300;
     59 */
     60
     61/**
     62 * The maximum height to which the editor can reach using AutoGrow. Zero means unlimited.
     63 * @name CKEDITOR.config.autoGrow_maxHeight
     64 * @type Number
     65 * @default 0
     66 * @example
     67 * config.autoGrow_maxHeight = 400;
     68 */
     69
     70/**
     71 * Fired when the AutoGrow plugin is about to change the size of the editor.
     72 * @name CKEDITOR#autogrow
     73 * @event
     74 * @param {Number} data.currentHeight The current height of the editor (before the resizing).
     75 * @param {Number} data.newHeight The new height of the editor (after the resizing). It can be changed
     76 *                              to determine another height to be used instead.
     77 */
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy