mirror of
https://github.com/UnickSoft/graphonline.git
synced 2026-06-15 21:30:56 +00:00
first commit
This commit is contained in:
Executable
+187
@@ -0,0 +1,187 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
||||
* For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @fileOverview AutoGrow plugin.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
// Actual content height, figured out by appending check the last element's document position.
|
||||
function contentHeight( scrollable ) {
|
||||
var overflowY = scrollable.getStyle( 'overflow-y' );
|
||||
|
||||
var doc = scrollable.getDocument();
|
||||
// Create a temporary marker element.
|
||||
var marker = CKEDITOR.dom.element.createFromHtml( '<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:1px;display:block;">' + ( CKEDITOR.env.webkit ? ' ' : '' ) + '</span>', doc );
|
||||
doc[ CKEDITOR.env.ie ? 'getBody' : 'getDocumentElement' ]().append( marker );
|
||||
|
||||
var height = marker.getDocumentPosition( doc ).y + marker.$.offsetHeight;
|
||||
marker.remove();
|
||||
scrollable.setStyle( 'overflow-y', overflowY );
|
||||
return height;
|
||||
}
|
||||
|
||||
function getScrollable( editor ) {
|
||||
var doc = editor.document,
|
||||
body = doc.getBody(),
|
||||
htmlElement = doc.getDocumentElement();
|
||||
|
||||
// Quirks mode overflows body, standards overflows document element
|
||||
return doc.$.compatMode == 'BackCompat' ? body : htmlElement;
|
||||
}
|
||||
|
||||
// @param editor
|
||||
// @param {Number} lastHeight The last height set by autogrow.
|
||||
// @returns {Number} New height if has been changed, or the passed `lastHeight`.
|
||||
var resizeEditor = function( editor, lastHeight ) {
|
||||
if ( !editor.window )
|
||||
return null;
|
||||
|
||||
var maximize = editor.getCommand( 'maximize' );
|
||||
// Disable autogrow when the editor is maximized .(#6339)
|
||||
if( maximize && maximize.state == CKEDITOR.TRISTATE_ON )
|
||||
return null;
|
||||
|
||||
var scrollable = getScrollable( editor ),
|
||||
currentHeight = editor.window.getViewPaneSize().height,
|
||||
newHeight = contentHeight( scrollable );
|
||||
|
||||
// Additional space specified by user.
|
||||
newHeight += ( editor.config.autoGrow_bottomSpace || 0 );
|
||||
|
||||
var min = editor.config.autoGrow_minHeight != undefined ? editor.config.autoGrow_minHeight : 200,
|
||||
max = editor.config.autoGrow_maxHeight || Infinity;
|
||||
|
||||
newHeight = Math.max( newHeight, min );
|
||||
newHeight = Math.min( newHeight, max );
|
||||
|
||||
// #10196 Do not resize editor if new height is equal
|
||||
// to the one set by previous resizeEditor() call.
|
||||
if ( newHeight != currentHeight && lastHeight != newHeight ) {
|
||||
newHeight = editor.fire( 'autoGrow', { currentHeight: currentHeight, newHeight: newHeight } ).newHeight;
|
||||
editor.resize( editor.container.getStyle( 'width' ), newHeight, true );
|
||||
lastHeight = newHeight;
|
||||
}
|
||||
|
||||
if ( scrollable.$.scrollHeight > scrollable.$.clientHeight && newHeight < max )
|
||||
scrollable.setStyle( 'overflow-y', 'hidden' );
|
||||
else
|
||||
scrollable.removeStyle( 'overflow-y' );
|
||||
|
||||
return lastHeight;
|
||||
};
|
||||
|
||||
CKEDITOR.plugins.add( 'autogrow', {
|
||||
init: function( editor ) {
|
||||
|
||||
// This feature is available only for themed ui instance.
|
||||
if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )
|
||||
return;
|
||||
|
||||
editor.on( 'instanceReady', function() {
|
||||
|
||||
var editable = editor.editable(),
|
||||
lastHeight;
|
||||
|
||||
// Simply set auto height with div wysiwyg.
|
||||
if ( editable.isInline() )
|
||||
editor.ui.space( 'contents' ).setStyle( 'height', 'auto' );
|
||||
// For framed wysiwyg we need to resize the editor.
|
||||
else
|
||||
{
|
||||
editor.addCommand( 'autogrow', {
|
||||
exec: function( editor ) {
|
||||
lastHeight = resizeEditor( editor, lastHeight );
|
||||
},
|
||||
modes:{ wysiwyg:1 },
|
||||
readOnly: 1,
|
||||
canUndo: false,
|
||||
editorFocus: false
|
||||
} );
|
||||
|
||||
var eventsList = { contentDom:1,key:1,selectionChange:1,insertElement:1,mode:1 };
|
||||
for ( var eventName in eventsList ) {
|
||||
editor.on( eventName, function( evt ) {
|
||||
// Some time is required for insertHtml, and it gives other events better performance as well.
|
||||
if ( evt.editor.mode == 'wysiwyg' ) {
|
||||
setTimeout( function() {
|
||||
lastHeight = resizeEditor( evt.editor, lastHeight );
|
||||
// Second pass to make correction upon
|
||||
// the first resize, e.g. scrollbar.
|
||||
lastHeight = resizeEditor( evt.editor, lastHeight );
|
||||
}, 100 );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Coordinate with the "maximize" plugin. (#9311)
|
||||
editor.on( 'afterCommandExec', function( evt ) {
|
||||
if ( evt.data.name == 'maximize' && evt.editor.mode == 'wysiwyg' ) {
|
||||
if ( evt.data.command.state == CKEDITOR.TRISTATE_ON ) {
|
||||
var scrollable = getScrollable( editor );
|
||||
scrollable.removeStyle( 'overflow' );
|
||||
}
|
||||
else
|
||||
lastHeight = resizeEditor( editor, lastHeight );
|
||||
}
|
||||
});
|
||||
|
||||
editor.config.autoGrow_onStartup && editor.execCommand( 'autogrow' );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/**
|
||||
* The minimum height that the editor can reach using the AutoGrow feature.
|
||||
*
|
||||
* config.autoGrow_minHeight = 300;
|
||||
*
|
||||
* @since 3.4
|
||||
* @cfg {Number} [autoGrow_minHeight=200]
|
||||
* @member CKEDITOR.config
|
||||
*/
|
||||
|
||||
/**
|
||||
* The maximum height that the editor can reach using the AutoGrow feature. Zero means unlimited.
|
||||
*
|
||||
* config.autoGrow_maxHeight = 400;
|
||||
*
|
||||
* @since 3.4
|
||||
* @cfg {Number} [autoGrow_maxHeight=0]
|
||||
* @member CKEDITOR.config
|
||||
*/
|
||||
|
||||
/**
|
||||
* Whether to have the auto grow happen on editor creation.
|
||||
*
|
||||
* config.autoGrow_onStartup = true;
|
||||
*
|
||||
* @since 3.6.2
|
||||
* @cfg {Boolean} [autoGrow_onStartup=false]
|
||||
* @member CKEDITOR.config
|
||||
*/
|
||||
|
||||
/**
|
||||
* Extra height in pixel to leave between the bottom boundary of content with document size when auto resizing.
|
||||
*
|
||||
* @since 3.6.2
|
||||
* @cfg {Number} [autoGrow_bottomSpace=0]
|
||||
* @member CKEDITOR.config
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the AutoGrow plugin is about to change the size of the editor.
|
||||
*
|
||||
* @event autogrow
|
||||
* @member CKEDITOR.editor
|
||||
* @param {CKEDITOR.editor} editor This editor instance.
|
||||
* @param data
|
||||
* @param {Number} data.currentHeight The current height of the editor (before resizing).
|
||||
* @param {Number} data.newHeight The new height of the editor (after resizing). It can be changed
|
||||
* to determine a different height value to be used instead.
|
||||
*/
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>AutoGrow Plugin — CKEditor Sample</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="AutoGrow plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/index.html">CKEditor Samples</a> » Using AutoGrow Plugin
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>AutoGrow</strong> (<code>autogrow</code>) plugin that lets the editor window expand
|
||||
and shrink depending on the amount and size of content entered in the editing area.
|
||||
</p>
|
||||
<p>
|
||||
In its default implementation the <strong>AutoGrow feature</strong> can expand the
|
||||
CKEditor window infinitely in order to avoid introducing scrollbars to the editing area.
|
||||
</p>
|
||||
<p>
|
||||
It is also possible to set a maximum height for the editor window. Once CKEditor
|
||||
editing area reaches the value in pixels specified in the
|
||||
<code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-autoGrow_maxHeight">autoGrow_maxHeight</a></code>
|
||||
configuration setting, scrollbars will be added and the editor window will no longer expand.
|
||||
</p>
|
||||
<p>
|
||||
To add a CKEditor instance using the <code>autogrow</code> plugin and its
|
||||
<code>autoGrow_maxHeight</code> attribute, insert the following JavaScript call to your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'autogrow',</strong>
|
||||
autoGrow_maxHeight: 800,
|
||||
|
||||
// Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
|
||||
removePlugins: 'resize'
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor. The maximum height should
|
||||
be given in pixels.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
CKEditor using the <code>autogrow</code> plugin with its default configuration:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'autogrow',
|
||||
removePlugins: 'resize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<label for="editor2">
|
||||
CKEditor using the <code>autogrow</code> plugin with maximum height set to 400 pixels:
|
||||
</label>
|
||||
<textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor2', {
|
||||
extraPlugins: 'autogrow',
|
||||
autoGrow_maxHeight: 400,
|
||||
removePlugins: 'resize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user