jQuery adapter - CKEditor Sample

Index: /CKEditor/branches/versions/3.1.x/_samples/index.html =================================================================== --- /CKEditor/branches/versions/3.1.x/_samples/index.html (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_samples/index.html (revision 4480) @@ -37,4 +37,5 @@

Index: /CKEditor/branches/versions/3.1.x/_samples/jqueryadapter.html =================================================================== --- /CKEditor/branches/versions/3.1.x/_samples/jqueryadapter.html (revision 4480) +++ /CKEditor/branches/versions/3.1.x/_samples/jqueryadapter.html (revision 4480) @@ -0,0 +1,68 @@ + + + + + jQuery adapter - CKEditor Sample + + + + + + + + +

+ +

+<script type="text/javascript">
+	$( function()
+	{
+		$( '.jquery_ckeditor' ).ckeditor();
+	} );
+</script>
+

+<form action="">
+  <p>
+    <label for="editor1">
+      Editor 1:</label><br />
+    <textarea id="editor1" name="editor1" class="jquery_ckeditor" rows="10" cols="80"><p>This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">CKEditor</a>.</p></textarea>
+  </p>
+  <p>
+</form>
+

+ + Index: /CKEditor/branches/versions/3.1.x/_source/adapters/jquery.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/adapters/jquery.js (revision 4480) +++ /CKEditor/branches/versions/3.1.x/_source/adapters/jquery.js (revision 4480) @@ -0,0 +1,283 @@ +/* +Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.html or http://ckeditor.com/license +*/ + +/** + * @fileOverview jQuery adapter provides easy use of basic CKEditor functions + * and access to internal API. It also integrates some aspects of CKEditor with + * jQuery framework. + * + * Every TEXTAREA, DIV and P elements can be converted to working editor. + * + * Plugin exposes some of editor's event to jQuery event system. All of those are namespaces inside + * ".ckeditor" namespace and can be binded/listened on supported textarea, div and p nodes. + * + * Available jQuery events: + * - instanceReady.ckeditor( editor, rootNode ) + * Triggered when new instance is ready. + * - destroy.ckeditor( editor ) + * Triggered when instance is destroyed. + * - getData.ckeditor( editor, eventData ) + * Triggered when getData event is fired inside editor. It can change returned data using eventData reference. + * - setData.ckeditor( editor ) + * Triggered when getData event is fired inside editor. + * + * @example + * + * + * + */ + +(function() +{ + /** + * Allow CKEditor to override jQuery.fn.val(). This results in ability to use val() + * function on textareas as usual and having those calls synchronized with CKEditor + * Rich Text Editor component. + * + * This config option is global and executed during plugin load. + * Can't be customized across editor instances. + * + * @type Boolean + * @example + * $( 'textarea' ).ckeditor(); + * // ... + * $( 'textarea' ).val( 'New content' ); + */ + CKEDITOR.config.jqueryOverrideVal = typeof CKEDITOR.config.jqueryOverrideVal == 'undefined' + ? true : CKEDITOR.config.jqueryOverrideVal; + + if ( typeof jQuery == 'undefined' ) + return; + + // jQuery object methods. + jQuery.extend( jQuery.fn, + /** @lends jQuery.fn */ + { + /** + * Return existing CKEditor instance for first matched element. + * Allows to easily use internal API. Doesn't return jQuery object. + * + * Raised exception if editor doesn't exist or isn't ready yet. + * + * @name jQuery.ckeditorGet + * @return CKEDITOR.editor + * @see CKEDITOR.editor + */ + ckeditorGet: function() + { + var instance = this.eq( 0 ).data( 'ckeditorInstance' ); + if ( !instance ) + throw "CKEditor not yet initialized, use ckeditor() with callback."; + return instance; + }, + /** + * Triggers creation of CKEditor in all matched elements (reduced to DIV, P and TEXTAREAs). + * Binds callback to instanceReady event of all instances. If editor is already created, than + * callback is fired right away. + * + * Mixed parameter order allowed. + * + * @param callback Function to be run on editor instance. Passed parameters: [ textarea ]. + * Callback is fiered in "this" scope being ckeditor instance and having source textarea as first param. + * + * @param config Configuration options for new instance(s) if not already created. + * See URL + * + * @example + * $( 'textarea' ).ckeditor( function( textarea ) { + * $( textarea ).val( this.getData() ) + * } ); + * + * @name jQuery.fn.ckeditor + * @return jQuery.fn + */ + ckeditor: function( callback, config ) + { + if ( !jQuery.isFunction( callback )) + { + var tmp = config; + config = callback; + callback = tmp; + } + config = config || {}; + + this.filter( 'textarea, div, p' ).each( function() + { + var $element = jQuery( this ), + editor = $element.data( 'ckeditorInstance' ), + instanceLock = $element.data( '_ckeditorInstanceLock' ), + element = this; + + if ( editor && !instanceLock ) + { + if ( callback ) + callback.apply( editor, [ this ] ); + } + else if ( !instanceLock ) + { + // CREATE NEW INSTANCE + + // Handle config.autoUpdateElement inside this plugin if desired. + if ( config.autoUpdateElement + || ( typeof config.autoUpdateElement == 'undefined' && CKEDITOR.config.autoUpdateElement ) ) + { + config.autoUpdateElementJquery = true; + } + + // Always disable config.autoUpdateElement. + config.autoUpdateElement = false; + $element.data( '_ckeditorInstanceLock', true ); + + // Set instance reference in element's data. + editor = CKEDITOR.replace( element, config ); + $element.data( 'ckeditorInstance', editor ); + + // Register callback. + editor.on( 'instanceReady', function( event ) + { + var editor = event.editor; + setTimeout( function() + { + // Delay bit more if editor is still not ready. + if ( !editor.element ) + return setTimeout( arguments.callee, 100 ); + + // Remove this listener. + event.removeListener( 'instanceReady', this.callee ); + + // Forward setData on dataReady. + editor.on( 'dataReady', function() + { + $element.trigger( 'setData' + '.ckeditor', [ editor ] ); + }); + + // Forward getData. + editor.on( 'getData', function( event ) { + $element.trigger( 'getData' + '.ckeditor', [ editor, event.data ] ); + }, 999 ); + + // Forward destroy event. + editor.on( 'destroy', function() + { + $element.trigger( 'destroy.ckeditor', [ editor ] ); + }); + + // Integrate with form submit. + if ( editor.config.autoUpdateElementJquery && $element.is( 'textarea' ) && $element.parents( 'form' ).length ) + { + var onSubmit = function() + { + $element.ckeditor( function() + { + editor.updateElement(); + }); + }; + + // Bind to submit event. + $element.parents( 'form' ).submit( onSubmit ); + + // Unbind when editor destroyed. + $element.bind( 'destroy.ckeditor', function() + { + $element.parents( 'form' ).unbind( 'submit', onSubmit ); + }); + } + + // Garbage collect on destroy. + editor.on( 'destroy', function() + { + $element.data( 'ckeditorInstance', null ); + }); + + // Remove lock. + $element.data( '_ckeditorInstanceLock', null ); + + // Fire instanceReady event. + $element.trigger( 'instanceReady.ckeditor', [ editor ] ); + + // Run given (first) code. + if ( callback ) + callback.apply( editor, [ element ] ); + }, 0 ); + }, null, null, 9999); + } + else + { + // Editor is already during creation process, bind our code to the event. + CKEDITOR.on( 'instanceReady', function( event ) + { + var editor = event.editor; + setTimeout( function() + { + // Delay bit more if editor is still not ready. + if ( !editor.element ) + return setTimeout( arguments.callee, 100 ); + + if ( editor.element.$ == element ) + { + // Run given code. + if ( callback ) + callback.apply( editor, [ element ] ); + } + }, 0 ); + }, null, null, 9999); + } + }); + return this; + } + }); + + // New val() method for objects. + if ( CKEDITOR.config.jqueryOverrideVal ) + { + jQuery.fn.val = CKEDITOR.tools.override( jQuery.fn.val, function( oldValMethod ) + { + /** + * CKEditor-aware val() method. + * + * Acts same as original jQuery val(), but for textareas which have CKEditor instances binded to them, method + * returns editor's content. It also works for settings values. + * + * @param oldValMethod + * @name jQuery.fn.val + */ + return function( newValue, forceNative ) + { + var isSetter = typeof newValue != 'undefined', + result; + + this.each( function() + { + var $this = jQuery( this ), + editor = $this.data( 'ckeditorInstance' ); + + if ( !forceNative && $this.is( 'textarea' ) && editor ) + { + if ( isSetter ) + editor.setData( newValue ); + else + { + result = editor.getData(); + // break; + return null; + } + } + else + { + if ( isSetter ) + oldValMethod.call( $this, newValue ); + else + { + result = oldValMethod.call( $this ); + // break; + return null; + } + } + }); + return isSetter ? this : result; + }; + }); + } +})(); Index: /CKEditor/branches/versions/3.1.x/_source/core/dom/document.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/core/dom/document.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/core/dom/document.js (revision 4480) @@ -53,19 +53,4 @@ }, - appendStyleText : function( cssStyleText ) - { - if ( this.$.createStyleSheet ) - { - var styleSheet = this.$.createStyleSheet( "" ); - styleSheet.cssText = cssStyleText ; - } - else - { - var style = new CKEDITOR.dom.element( 'style', this ); - style.append( new CKEDITOR.dom.text( cssStyleText, this ) ); - this.getHead().append( style ); - } - }, - createElement : function( name, attribsAndStyles ) { Index: /CKEditor/branches/versions/3.1.x/_source/core/dom/range.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/core/dom/range.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/core/dom/range.js (revision 4480) @@ -1184,5 +1184,6 @@ blockBoundary, !blockBoundary.is( 'br' ) && - ( !enlargeable || blockBoundary.contains( enlargeable ) ) ? + ( !enlargeable && this.checkStartOfBlock() + || enlargeable && blockBoundary.contains( enlargeable ) ) ? CKEDITOR.POSITION_AFTER_START : CKEDITOR.POSITION_AFTER_END ); @@ -1209,6 +1210,6 @@ this.setEndAt( blockBoundary, - !blockBoundary.is( 'br' ) && - ( !enlargeable || blockBoundary.contains( enlargeable ) ) ? + ( !enlargeable && this.checkEndOfBlock() + || enlargeable && blockBoundary.contains( enlargeable ) ) ? CKEDITOR.POSITION_BEFORE_END : CKEDITOR.POSITION_BEFORE_START ); Index: /CKEditor/branches/versions/3.1.x/_source/core/editor.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/core/editor.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/core/editor.js (revision 4480) @@ -125,5 +125,5 @@ // Load language file. - loadSkin( editor ); + loadLang( editor ); }; @@ -247,5 +247,5 @@ // Load the editor skin. editor.fire( 'pluginsLoaded' ); - loadTheme( editor ); + loadSkin( editor ); }); }); @@ -256,5 +256,5 @@ CKEDITOR.skins.load( editor, 'editor', function() { - loadLang( editor ); + loadTheme( editor ); }); }; Index: /CKEditor/branches/versions/3.1.x/_source/core/resourcemanager.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/core/resourcemanager.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/core/resourcemanager.js (revision 4480) @@ -87,6 +87,5 @@ throw '[CKEDITOR.resourceManager.add] The resource name "' + name + '" is already registered.'; - CKEDITOR.fire( name + CKEDITOR.tools.capitalize( this.fileName ) + 'Ready', - this.registered[ name ] = definition || {} ); + this.registered[ name ] = definition || {}; }, Index: /CKEditor/branches/versions/3.1.x/_source/core/skins.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/core/skins.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/core/skins.js (revision 4480) @@ -21,5 +21,5 @@ var paths = {}; - var loadPart = function( skinName, part, callback ) + var loadedPart = function( skinName, part, callback ) { // Get the skin definition. @@ -34,16 +34,4 @@ }; - function fixCSSTextRelativePath( cssStyleText, baseUrl ) - { - return cssStyleText.replace( /url\s*$([\s'"]*)(.*?)([\s"']*)$/g, - function( match, opener, path, closer ) - { - if ( /^\/|^\w?:/.test( path ) ) - return match; - else - return 'url(' + baseUrl + opener + path + closer + ')'; - } ); - } - // Check if we need to preload images from it. if ( !preloaded[ skinName ] ) @@ -56,5 +44,5 @@ { preloaded[ skinName ] = 1; - loadPart( skinName, part, callback ); + loadedPart( skinName, part, callback ); } ); return; @@ -109,22 +97,9 @@ if ( !cssIsLoaded ) { - var cssPart = part.css; + appendSkinPath( part.css ); - if ( CKEDITOR.tools.isArray( cssPart ) ) - { - appendSkinPath( cssPart ); - for ( var c = 0 ; c < cssPart.length ; c++ ) - CKEDITOR.document.appendStyleSheet( cssPart[ c ] ); - } - else - { - cssPart = fixCSSTextRelativePath( - cssPart, CKEDITOR.getUrl( paths[ skinName ] ) ); - // Processing Inline CSS part. - CKEDITOR.document.appendStyleText( cssPart ); - } + for ( var c = 0 ; c < part.css.length ; c++ ) + CKEDITOR.document.appendStyleSheet( part.css[ c ] ); - part.css = cssPart; - cssIsLoaded = 1; } @@ -182,5 +157,14 @@ if ( loaded[ skinName ] ) - loadPart( skinName, skinPart, callback ); + { + loadedPart( skinName, skinPart, callback ); + + // Get the skin definition. + var skinDefinition = loaded[ skinName ]; + + // Trigger init function if any. + if ( skinDefinition.init ) + skinDefinition.init( editor ); + } else { @@ -188,12 +172,12 @@ CKEDITOR.scriptLoader.load( skinPath + 'skin.js', function() { + loadedPart( skinName, skinPart, callback ); + // Get the skin definition. - var skinDefinition = editor.skin = loaded[ skinName ]; + var skinDefinition = loaded[ skinName ]; // Trigger init function if any. if ( skinDefinition.init ) skinDefinition.init( editor ); - - loadPart( skinName, skinPart, callback ); }); } Index: /CKEditor/branches/versions/3.1.x/_source/core/tools.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/core/tools.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/core/tools.js (revision 4480) @@ -99,13 +99,4 @@ /** - * Turn the first letter of string to upper-case. - * @param {String} str - */ - capitalize: function( str ) - { - return str.charAt( 0 ).toUpperCase() + str.substring( 1 ).toLowerCase(); - }, - - /** * Copy the properties from one object to another. By default, properties * already present in the target object are not overwritten. @@ -239,25 +230,4 @@ /** - * Build the HTML snippet of a set of '); - else - retval.push(''); - } - return retval.join( '' ); - }, - - /** * Replace special HTML characters in a string with their relative HTML * entity values. Index: /CKEditor/branches/versions/3.1.x/_source/plugins/colorbutton/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/colorbutton/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/colorbutton/plugin.js (revision 4480) @@ -32,5 +32,5 @@ panel : { - css : editor.skin.editor.css + css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ] }, Index: /CKEditor/branches/versions/3.1.x/_source/plugins/dialog/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/dialog/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/dialog/plugin.js (revision 4480) @@ -7,4 +7,9 @@ * @fileOverview The floating dialog plugin. */ + +CKEDITOR.plugins.add( 'dialog', + { + requires : [ 'dialogui' ] + }); /** @@ -68,4 +73,7 @@ return null; } + + // Stores dialog related data from skin definitions. e.g. margin sizes. + var skinData = {}; /** @@ -1430,5 +1438,5 @@ editor = dialog.getParentEditor(), magnetDistance = editor.config.dialog_magnetDistance, - margins = editor.skin.margins || [ 0, 0, 0, 0 ]; + margins = skinData[ editor.skinName ].margins || [ 0, 0, 0, 0 ]; if ( typeof magnetDistance == 'undefined' ) @@ -1508,5 +1516,5 @@ minHeight = definition.minHeight || 0, resizable = definition.resizable, - margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ]; + margins = skinData[ dialog.getParentEditor().skinName ].margins || [ 0, 0, 0, 0 ]; function topSizer( coords, dy ) @@ -2665,4 +2673,15 @@ }; })(); + + // Grab the margin data from skin definition and store it away. + CKEDITOR.skins.add = ( function() + { + var original = CKEDITOR.skins.add; + return function( skinName, skinDefinition ) + { + skinData[ skinName ] = { margins : skinDefinition.margins }; + return original.apply( this, arguments ); + }; + } )(); })(); @@ -2716,9 +2735,4 @@ return null; } - }); - -CKEDITOR.plugins.add( 'dialog', - { - requires : [ 'dialogui' ] }); Index: /CKEditor/branches/versions/3.1.x/_source/plugins/font/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/font/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/font/plugin.js (revision 4480) @@ -37,5 +37,5 @@ panel : { - css : editor.skin.editor.css.concat( config.contentsCss ), + css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ].concat( config.contentsCss ), voiceLabel : lang.panelVoiceLabel }, Index: /CKEditor/branches/versions/3.1.x/_source/plugins/format/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/format/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/format/plugin.js (revision 4480) @@ -34,5 +34,5 @@ panel : { - css : editor.skin.editor.css.concat( config.contentsCss ), + css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ].concat( config.contentsCss ), voiceLabel : lang.panelVoiceLabel }, Index: /CKEditor/branches/versions/3.1.x/_source/plugins/menu/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/menu/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/menu/plugin.js (revision 4480) @@ -133,5 +133,5 @@ panel = this._.panel = new CKEDITOR.ui.floatPanel( this.editor, CKEDITOR.document.getBody(), { - css : editor.skin.editor.css, + css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ], level : this._.level - 1, className : editor.skinClass + ' cke_contextmenu' Index: /CKEditor/branches/versions/3.1.x/_source/plugins/panel/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/panel/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/panel/plugin.js (revision 4480) @@ -161,5 +161,5 @@ // after , so it (body) becames immediatelly // available. (#3031) - CKEDITOR.tools.buildStyleHtml( this.css ) + + '' + '<\/html>' ); doc.$.close(); Index: /CKEditor/branches/versions/3.1.x/_source/plugins/preview/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/preview/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/preview/plugin.js (revision 4480) @@ -38,5 +38,7 @@ baseTag + '' + editor.lang.preview + '' + - CKEDITOR.tools.buildStyleHtml( editor.config.contentsCss ) + + '' + '' + bodyHtml + editor.getData() + Index: /CKEditor/branches/versions/3.1.x/_source/plugins/stylescombo/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/stylescombo/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/stylescombo/plugin.js (revision 4480) @@ -27,5 +27,5 @@ panel : { - css : editor.skin.editor.css.concat( config.contentsCss ), + css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ].concat( config.contentsCss ), voiceLabel : lang.panelVoiceLabel }, Index: /CKEditor/branches/versions/3.1.x/_source/plugins/wysiwygarea/plugin.js =================================================================== --- /CKEditor/branches/versions/3.1.x/_source/plugins/wysiwygarea/plugin.js (revision 4479) +++ /CKEditor/branches/versions/3.1.x/_source/plugins/wysiwygarea/plugin.js (revision 4480) @@ -564,5 +564,7 @@ '' + '' + - CKEDITOR.tools.buildStyleHtml( editor.config.contentsCss ) + + '' + '