Integration"

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(typo's)
(Javascript API)
Line 16: Line 16:
 
</pre>
 
</pre>
  
With this output:
+
With this output (I aligned the code a bit for readibility):
  
 
<pre>
 
<pre>
Line 41: Line 41:
 
   var s=l(this,n);
 
   var s=l(this,n);
 
   if(!s)throw '[CKEDITOR.editor.setMode] Unknown mode "'+n+'".';
 
   if(!s)throw '[CKEDITOR.editor.setMode] Unknown mode "'+n+'".';
   if(!q)this.on('mode',function(){
+
   if(!q)this.on('mode',
  this.resetDirty();
+
    function(){
  this.removeListener('mode',arguments.callee);
+
      this.resetDirty();
}
+
      this.removeListener('mode',arguments.callee);
);
+
    }
 +
  );
 
   s.load(p,typeof o!='string'?this.getData():o);
 
   s.load(p,typeof o!='string'?this.getData():o);
 
}
 
}
Line 51: Line 52:
 
addMode=function(n,o){
 
addMode=function(n,o){
 
   o.name=n;
 
   o.name=n;
   (this._.modes||(this._.modes={
+
   (this._.modes||(this._.modes={}))[n]=o;
  }
 
))[n]=o;
 
 
}
 
}
  
mode=
+
mode=openDialog=function(l){
openDialog=function(l){
 
 
   var m=a.dialog._.dialogDefinitions[l];
 
   var m=a.dialog._.dialogDefinitions[l];
 
   if(typeof m=='function'){
 
   if(typeof m=='function'){
  var n=this._.storedDialogs||(this._.storedDialogs={
+
    var n=this._.storedDialogs||(this._.storedDialogs={}), o=n[l]||(n[l]=new a.dialog(this,l));
 +
    o.show();
 +
    return o;
 
   }
 
   }
),o=n[l]||(n[l]=new a.dialog(this,l));
+
   var p=a.document.getBody(),q=p.$.style.cursor,r=this;
   o.show();
 
  return o;
 
}
 
var p=a.document.getBody(),q=p.$.style.cursor,r=this;
 
 
   p.setStyle('cursor','wait');
 
   p.setStyle('cursor','wait');
   a.scriptLoader.load(a.getUrl(m),function(){
+
   a.scriptLoader.load(a.getUrl(m),
  r.openDialog(l);
+
    function(){
  p.setStyle('cursor',q);
+
      r.openDialog(l);
}
+
      p.setStyle('cursor',q);
);
+
    }
 +
  );
 
   return null;
 
   return null;
 
}
 
}
Line 84: Line 81:
 
   var p=new a.htmlParser.basicWriter();
 
   var p=new a.htmlParser.basicWriter();
 
   l.writeHtml(p);
 
   l.writeHtml(p);
   var q=p.getHtml(),r={
+
   var q=p.getHtml(),r={'class':m,src:a.getUrl('images/spacer.gif'),_cke_realelement:encodeURIComponent(q)};
  'class':m,src:a.getUrl('images/spacer.gif'),_cke_realelement:encodeURIComponent(q)}
 
;
 
 
   if(n)r._cke_real_element_type=n;
 
   if(n)r._cke_real_element_type=n;
 
   if(o)r._cke_resizable=o;
 
   if(o)r._cke_resizable=o;
Line 93: Line 88:
  
 
createFakeElement=function(l,m,n,o){
 
createFakeElement=function(l,m,n,o){
   var p={
+
   var p={'class':m,src:a.getUrl('images/spacer.gif'),_cke_realelement:encodeURIComponent(l.getOuterHtml())};
  'class':m,src:a.getUrl('images/spacer.gif'),_cke_realelement:encodeURIComponent(l.getOuterHtml())}
 
;
 
 
    
 
    
if(n)p._cke_real_element_type=n;
+
  if(n)p._cke_real_element_type=n;
 
   if(o)p._cke_resizable=o;
 
   if(o)p._cke_resizable=o;
   return this.document.createElement('img',{
+
   return this.document.createElement('img',{attributes:p});
  attributes:p}
 
);
 
 
}
 
}
  
Line 112: Line 103:
 
   var s=u.document?u.document.getSelection():null;
 
   var s=u.document?u.document.getSelection():null;
 
   if(s&&c){
 
   if(s&&c){
  var t=s.getNative().createRange();
+
    var t=s.getNative().createRange();
  if(!t)return null;
+
    if(!t)return null;
  else if(t.item)return t.item(0).ownerDocument==u.document.$?s:null;
+
    else if(t.item)return t.item(0).ownerDocument==u.document.$?s:null;
  else return t.parentElement().ownerDocument==u.document.$?s:null;
+
    else return t.parentElement().ownerDocument==u.document.$?s:null;
}
+
  }
return s;
+
  return s;
 
}
 
}
  
Line 135: Line 126:
 
   var n=this._.styleStateChangeCallbacks;
 
   var n=this._.styleStateChangeCallbacks;
 
   if(!n){
 
   if(!n){
  n=this._.styleStateChangeCallbacks=[];
+
    n=this._.styleStateChangeCallbacks=[];
  this.on('selectionChange',function(o){
+
    this.on('selectionChange',
  for(var p=0;
+
      function(o){
  p  p++){
+
        for(var p=0;p  p++){
  var q=n[p],r=q.style.checkActive(o.data.path)?1:2;
+
          var q=n[p],r=q.style.checkActive(o.data.path)?1:2;
  if(q.state!==r){
+
          if(q.state!==r){
  q.fn.call(this,r);
+
            q.fn.call(this,r);
  q.state!==r;
+
            q.state!==r;
}
+
          }
}
+
        }
}
+
      }
);
+
    );
}
+
  }
n.push({
+
  n.push({style:l,fn:m});
  style:l,fn:m}
 
);
 
 
}
 
}
  
Line 184: Line 173:
  
 
setData=function(l){
 
setData=function(l){
   var m={
+
   var m={dataValue:l};
  dataValue:l}
 
;
 
 
   this.fire('setData',m);
 
   this.fire('setData',m);
 
   this._.data=m.dataValue;
 
   this._.data=m.dataValue;
Line 199: Line 186:
 
   var l=this.fire('getSnapshot');
 
   var l=this.fire('getSnapshot');
 
   if(typeof l!='string'){
 
   if(typeof l!='string'){
  var m=this.element;
+
    var m=this.element;
  if(m&&this.elementMode==1)l=m.is('textarea')?m.getValue():m.getHtml();
+
    if(m&&this.elementMode==1)l=m.is('textarea')?m.getValue():m.getHtml();
}
+
  }
return l;
+
  return l;
 
}
 
}
  
Line 210: Line 197:
 
   var l=n._.data;
 
   var l=n._.data;
 
   if(typeof l!='string'){
 
   if(typeof l!='string'){
  var m=n.element;
+
    var m=n.element;
  if(m&&n.elementMode==1)l=m.is('textarea')?m.getValue():m.getHtml();
+
    if(m&&n.elementMode==1)l=m.is('textarea')?m.getValue():m.getHtml();
  else l='';
+
    else l='';
}
+
  }
l={
+
  l={dataValue:l};
  dataValue:l}
 
;
 
 
   n.fire('getData',l);
 
   n.fire('getData',l);
 
   return l.dataValue;
 
   return l.dataValue;
Line 223: Line 208:
 
getCommand=function(l){
 
getCommand=function(l){
 
   return this._.commands[l];
 
   return this._.commands[l];
 
 
 
}
 
}
  
 
execCommand=function(l,m){
 
execCommand=function(l,m){
   var n=this.getCommand(l),o={
+
   var n=this.getCommand(l),o={name:l,commandData:m,command:n};
  name:l,commandData:m,command:n}
 
;
 
 
   if(n&&n.state!=0)if(this.fire('beforeCommandExec',o)!==true){
 
   if(n&&n.state!=0)if(this.fire('beforeCommandExec',o)!==true){
  o.returnValue=n.exec(o.commandData);
+
    o.returnValue=n.exec(o.commandData);
  if(this.fire('afterCommandExec',o)!==true)return o.returnValue;
+
    if(this.fire('afterCommandExec',o)!==true)return o.returnValue;
}
+
  }
return false;
+
  return false;
 
}
 
}
  
Line 279: Line 261:
 
   delete z._.element;
 
   delete z._.element;
 
   delete z._.instanceConfig;
 
   delete z._.instanceConfig;
   z._.commands={
+
   z._.commands={};
  }
 
;
 
 
   z._.styles=[];
 
   z._.styles=[];
 
   z.element=x;
 
   z.element=x;
Line 301: Line 281:
 
   var h=this._.events[c]||(this._.events[c]=new b(c));
 
   var h=this._.events[c]||(this._.events[c]=new b(c));
 
   if(h.getListenerIndex(d)<0){
 
   if(h.getListenerIndex(d)<0){
  var i=h.listeners;
+
    var i=h.listeners;
  if(!e)e=this;
+
    if(!e)e=this;
  if(isNaN(g))g=10;
+
    if(isNaN(g))g=10;
  var j=this,k=function(m,n,o,p){
+
    var j=this,k=function(m,n,o,p){
  var q={
+
    var q={name:c,sender:this,editor:m,data:n,listenerData:f,stop:o,cancel:p,
  name:c,sender:this,editor:m,data:n,listenerData:f,stop:o,cancel:p,removeListener:function(){
+
      removeListener:function(){
  j.removeListener(c,d);
+
        j.removeListener(c,d);
}
+
      }
}
+
    };
;
 
 
   d.call(e,q);
 
   d.call(e,q);
 
   return q.data;
 
   return q.data;
}
+
};
;
+
 
  k.fn=d;
+
k.fn=d;
  k.priority=g;
+
k.priority=g;
  for(var l=i.length-1;
+
for(var l=i.length-1;l>=0;l--)
  l>=0;
+
  if(i[l].priority<=g){
  l--)if(i[l].priority<=g){
+
    i.splice(l+1,0,k);
  i.splice(l+1,0,k);
+
    return;
  return;
+
  }
}
 
 
i.unshift(k);
 
i.unshift(k);
 +
 
}
 
}
 
}
 
}

Revision as of 10:36, 16 April 2009

Javascript API

I couldn't find documentation on how to talk to the javascript API. I figured that through CKEDITOR.instances.id_of_textarea.setData(string); I could update the contents or get it with getData();

First thing I learned I can also access an instance of an editor through: CKEDITOR.instances["id_of_textarea"].setData(string); //This is more usefull in generic code.

I wanted to see which functions are available for me and show that in... the editor itself. I did the following.

var objEditor=CKEDITOR.instances["id_of_textarea"];
var str="";
for (var item in objEditor) {
  str+="<strong>"+item+"</strong>="+objEditor[item].toString().str_replace("\n", "<br>").str_replace(";", ";<br>  ").str_replace("{", "{<br>  ").str_replace("}", "}<br>").str_replace(";<br>  }", ";<br>}")+"<br>";
}
objEditor.setData(str);

With this output (I aligned the code a bit for readibility):

getThemeSpace=function(l){
  var m='cke_'+l,n=this._[m]||(this._[m]=a.document.getById(m+'_'+this.name));
  return n;
}

focus=function(){
  var n=l(this);
  if(n)n.focus();
}

setMode=function(n){
  var o,p=this.getThemeSpace('contents'),q=this.checkDirty();
  if(this.mode){
  if(n==this.mode)return;
  var r=l(this);
  o=r.getData();
  r.unload(p);
  this.mode='';
}
p.setHtml('');
  var s=l(this,n);
  if(!s)throw '[CKEDITOR.editor.setMode] Unknown mode "'+n+'".';
  if(!q)this.on('mode',
    function(){
      this.resetDirty();
      this.removeListener('mode',arguments.callee);
    }
  );
  s.load(p,typeof o!='string'?this.getData():o);
}

addMode=function(n,o){
  o.name=n;
  (this._.modes||(this._.modes={}))[n]=o;
}

mode=openDialog=function(l){
  var m=a.dialog._.dialogDefinitions[l];
  if(typeof m=='function'){
    var n=this._.storedDialogs||(this._.storedDialogs={}), o=n[l]||(n[l]=new a.dialog(this,l));
    o.show();
    return o;
  }
  var p=a.document.getBody(),q=p.$.style.cursor,r=this;
  p.setStyle('cursor','wait');
  a.scriptLoader.load(a.getUrl(m),
    function(){
      r.openDialog(l);
      p.setStyle('cursor',q);
    }
  );
  return null;
}

restoreRealElement=function(l){
  var m=decodeURIComponent(l.getAttribute('_cke_realelement'));
  return g.createFromHtml(m,this.document);
}

createFakeParserElement=function(l,m,n,o){
  var p=new a.htmlParser.basicWriter();
  l.writeHtml(p);
  var q=p.getHtml(),r={'class':m,src:a.getUrl('images/spacer.gif'),_cke_realelement:encodeURIComponent(q)};
  if(n)r._cke_real_element_type=n;
  if(o)r._cke_resizable=o;
  return new a.htmlParser.element('img',r);
}

createFakeElement=function(l,m,n,o){
  var p={'class':m,src:a.getUrl('images/spacer.gif'),_cke_realelement:encodeURIComponent(l.getOuterHtml())};
   
  if(n)p._cke_real_element_type=n;
  if(o)p._cke_resizable=o;
  return this.document.createElement('img',{attributes:p});
}

forceNextSelectionCheck=function(){
  delete this._.selectionPreviousPath;
}

getSelection=function(){
  var u=this;
  var s=u.document?u.document.getSelection():null;
  if(s&&c){
    var t=s.getNative().createRange();
    if(!t)return null;
    else if(t.item)return t.item(0).ownerDocument==u.document.$?s:null;
    else return t.parentElement().ownerDocument==u.document.$?s:null;
  }
  return s;
}

getMenuItem=function(l){
  return this._.menuItems[l];
}

addMenuItems=function(l){
  for(var m in l)this.addMenuItem(m,l[m]);
}

addMenuItem=function(l,m){
  if(this._.menuGroups[m.group])this._.menuItems[l]=new a.menuItem(this,l,m);
}

attachStyleStateChange=function(l,m){
  var n=this._.styleStateChangeCallbacks;
  if(!n){
    n=this._.styleStateChangeCallbacks=[];
    this.on('selectionChange',
      function(o){
        for(var p=0;p  p++){
          var q=n[p],r=q.style.checkActive(o.data.path)?1:2;
          if(q.state!==r){
            q.fn.call(this,r);
            q.state!==r;
          }
        }
      }
    );
  }
  n.push({style:l,fn:m});
}

insertText=function(l){
  l=e.htmlEncode(l);
  l=l.replace(/(?:\r\n)|\n|\r/g,'
');
  this.insertHtml(l);
}

updateElement=function(){
  var m=this;
  var l=m.element;
  if(l&&m.elementMode==1)if(l.is('textarea'))l.setValue(m.getData());
  else l.setHtml(m.getData());
}

resetDirty=function(){
  if(this.mayBeDirty)this._.previousValue=this.getSnapshot();
}

checkDirty=function(){
  return this.mayBeDirty&&this._.previousValue!==this.getSnapshot();
}

insertElement=function(l){
  this.fire('insertElement',l);
}

insertHtml=function(l){
  this.fire('insertHtml',l);
}

setData=function(l){
  var m={dataValue:l};
  this.fire('setData',m);
  this._.data=m.dataValue;
  this.fire('afterSetData',m);
}

loadSnapshot=function(l){
  this.fire('loadSnapshot',l);
}

getSnapshot=function(){
  var l=this.fire('getSnapshot');
  if(typeof l!='string'){
    var m=this.element;
    if(m&&this.elementMode==1)l=m.is('textarea')?m.getValue():m.getHtml();
  }
  return l;
}

getData=function(){
  var n=this;
  n.fire('beforeGetData');
  var l=n._.data;
  if(typeof l!='string'){
    var m=n.element;
    if(m&&n.elementMode==1)l=m.is('textarea')?m.getValue():m.getHtml();
    else l='';
  }
  l={dataValue:l};
  n.fire('getData',l);
  return l.dataValue;
}

getCommand=function(l){
  return this._.commands[l];
}

execCommand=function(l,m){
  var n=this.getCommand(l),o={name:l,commandData:m,command:n};
  if(n&&n.state!=0)if(this.fire('beforeCommandExec',o)!==true){
    o.returnValue=n.exec(o.commandData);
    if(this.fire('afterCommandExec',o)!==true)return o.returnValue;
  }
  return false;
}

destroy=function(l){
  var m=this;
  if(!l)m.updateElement();
  m.theme.destroy(m);
  a.remove(m);
}

addCss=function(l){
  this._.styles.push(l);
}

addCommand=function(l,m){
  return this._.commands[l]=new a.command(this,m);
}

hasListeners=function(){
  var f=this;
  if(!(f._&&f._.events))a.event.call(f);
  (f[e]=a.event.prototype[e]).apply(f,arguments);
}

removeListener=function(){
  var f=this;
  if(!(f._&&f._.events))a.event.call(f);
  (f[e]=a.event.prototype[e]).apply(f,arguments);
}

fireOnce=function(b,c){
  return a.event.prototype.fireOnce.call(this,b,c,this);
}

fire=function(b,c){
  return a.event.prototype.fire.call(this,b,c,this);
}

_=[object Object]
elementMode=1
_init=function(){
  var z=this;
  var x=g.get(z._.element),y=z._.instanceConfig;
  delete z._.element;
  delete z._.instanceConfig;
  z._.commands={};
  z._.styles=[];
  z.element=x;
  z.name=x&&z.elementMode==1&&(x.getId()||x.getNameAtt())||m();
  z.config=e.prototypedCopy(i);
  z.ui=new k(z);
  z.focusManager=new a.focusManager(z);
  a.fire('instanceCreated',null,z);
  z.on('mode',w);
  p(z,y);
}

element=[object Object]
name=input_memo
config=[object Object]
ui=[object Object]
focusManager=[object Object]
on=function(c,d,e,f,g){
  var h=this._.events[c]||(this._.events[c]=new b(c));
  if(h.getListenerIndex(d)<0){
    var i=h.listeners;
    if(!e)e=this;
    if(isNaN(g))g=10;
    var j=this,k=function(m,n,o,p){
    var q={name:c,sender:this,editor:m,data:n,listenerData:f,stop:o,cancel:p,
      removeListener:function(){
        j.removeListener(c,d);
      }
    };
  d.call(e,q);
  return q.data;
};

k.fn=d;
k.priority=g;
for(var l=i.length-1;l>=0;l--)
  if(i[l].priority<=g){
    i.splice(l+1,0,k);
    return;
  }
i.unshift(k);

}
}

Anybody who wishes to talk to an instance of the CKeditor through the javascript API, now has a starting point and is able to see which functions are available for an instance of an CKeditor.