1 //<script type="text/javascript">
4 * @class Roo.form.FCKeditor
5 * @extends Roo.form.TextArea
6 * Wrapper around the FCKEditor http://www.fckeditor.net
8 * Creates a new FCKeditor
9 * @param {Object} config Configuration options
11 Roo.form.FCKeditor = function(config){
12 Roo.form.FCKeditor.superclass.constructor.call(this, config);
16 * Fired when the editor is initialized - you can add extra handlers here..
17 * @param {FCKeditor} this
18 * @param {Object} the FCK object.
25 Roo.form.FCKeditor.editors = { };
26 Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
28 //defaultAutoCreate : {
29 // tag : "textarea",style : "width:100px;height:60px;" ,autocomplete : "off"
33 * @cfg {Object} fck options - see fck manual for details.
38 * @cfg {Object} fck toolbar set (Basic or Default)
42 * @cfg {Object} fck BasePath
44 basePath : '/fckeditor/',
52 onRender : function(ct, position)
55 this.defaultAutoCreate = {
57 style:"width:300px;height:60px;",
58 autocomplete: "new-password"
61 Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
64 this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
65 if(this.preventScrollbars){
66 this.el.setStyle("overflow", "hidden");
68 this.el.setHeight(this.growMin);
71 //console.log('onrender' + this.getId() );
72 Roo.form.FCKeditor.editors[this.getId()] = this;
75 this.replaceTextarea() ;
79 getEditor : function() {
80 return this.fckEditor;
83 * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
84 * @param {Mixed} value The value to set
88 setValue : function(value)
90 //console.log('setValue: ' + value);
92 if(typeof(value) == 'undefined') { // not sure why this is happending...
95 Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
97 //if(!this.el || !this.getEditor()) {
98 // this.value = value;
99 //this.setValue.defer(100,this,[value]);
103 if(!this.getEditor()) {
107 this.getEditor().SetData(value);
114 * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
115 * @return {Mixed} value The field value
117 getValue : function()
120 if (this.frame && this.frame.dom.style.display == 'none') {
121 return Roo.form.FCKeditor.superclass.getValue.call(this);
124 if(!this.el || !this.getEditor()) {
126 // this.getValue.defer(100,this);
131 var value=this.getEditor().GetData();
132 Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
133 return Roo.form.FCKeditor.superclass.getValue.call(this);
139 * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
140 * @return {Mixed} value The field value
142 getRawValue : function()
144 if (this.frame && this.frame.dom.style.display == 'none') {
145 return Roo.form.FCKeditor.superclass.getRawValue.call(this);
148 if(!this.el || !this.getEditor()) {
149 //this.getRawValue.defer(100,this);
156 var value=this.getEditor().GetData();
157 Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
158 return Roo.form.FCKeditor.superclass.getRawValue.call(this);
162 setSize : function(w,h) {
166 //if (this.frame && this.frame.dom.style.display == 'none') {
167 // Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
170 //if(!this.el || !this.getEditor()) {
171 // this.setSize.defer(100,this, [w,h]);
177 Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
179 this.frame.dom.setAttribute('width', w);
180 this.frame.dom.setAttribute('height', h);
181 this.frame.setSize(w,h);
185 toggleSourceEdit : function(value) {
189 this.el.dom.style.display = value ? '' : 'none';
190 this.frame.dom.style.display = value ? 'none' : '';
197 if (this.frame.dom.style.display == 'none') {
198 return Roo.form.FCKeditor.superclass.focus.call(this);
200 if(!this.el || !this.getEditor()) {
201 this.focus.defer(100,this, [tag]);
208 var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
209 this.getEditor().Focus();
211 if (!this.getEditor().Selection.GetSelection()) {
212 this.focus.defer(100,this, [tag]);
217 var r = this.getEditor().EditorDocument.createRange();
218 r.setStart(tgs[0],0);
220 this.getEditor().Selection.GetSelection().removeAllRanges();
221 this.getEditor().Selection.GetSelection().addRange(r);
222 this.getEditor().Focus();
229 replaceTextarea : function()
231 if ( document.getElementById( this.getId() + '___Frame' ) ) {
234 //if ( !this.checkBrowser || this._isCompatibleBrowser() )
236 // We must check the elements firstly using the Id and then the name.
237 var oTextarea = document.getElementById( this.getId() );
239 var colElementsByName = document.getElementsByName( this.getId() ) ;
241 oTextarea.style.display = 'none' ;
243 if ( oTextarea.tabIndex ) {
244 this.TabIndex = oTextarea.tabIndex ;
247 this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
248 this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
249 this.frame = Roo.get(this.getId() + '___Frame')
252 _getConfigHtml : function()
256 for ( var o in this.fckconfig ) {
257 sConfig += sConfig.length > 0 ? '&' : '';
258 sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
261 return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
265 _getIFrameHtml : function()
267 var sFile = 'fckeditor.html' ;
268 /* no idea what this is about..
271 if ( (/fcksource=true/i).test( window.top.location.search ) )
272 sFile = 'fckeditor.original.html' ;
277 var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
278 sLink += this.toolbarSet ? ( '&Toolbar=' + this.toolbarSet) : '';
281 var html = '<iframe id="' + this.getId() +
282 '___Frame" src="' + sLink +
283 '" width="' + this.width +
284 '" height="' + this.height + '"' +
285 (this.tabIndex ? ' tabindex="' + this.tabIndex + '"' :'' ) +
286 ' frameborder="0" scrolling="no"></iframe>' ;
291 _insertHtmlBefore : function( html, element )
293 if ( element.insertAdjacentHTML ) {
295 element.insertAdjacentHTML( 'beforeBegin', html ) ;
297 var oRange = document.createRange() ;
298 oRange.setStartBefore( element ) ;
299 var oFragment = oRange.createContextualFragment( html );
300 element.parentNode.insertBefore( oFragment, element ) ;
313 //Roo.reg('fckeditor', Roo.form.FCKeditor);
315 function FCKeditor_OnComplete(editorInstance){
316 var f = Roo.form.FCKeditor.editors[editorInstance.Name];
317 f.fckEditor = editorInstance;
318 //console.log("loaded");
319 f.fireEvent('editorinit', f, editorInstance);