Talk:CKEditor 3.x/Developers Guide/Integration - Revision history

Fredck at 08:42, 12 October 2009

2009-10-12T08:42:20Z

Ekangas1 at 19:09, 9 October 2009

2009-10-09T19:09:43Z

Nathfy: /* getting the CKeditor focus using the API */ new section

2009-07-02T11:31:49Z

‎getting the CKeditor focus using the API: new section

Cjw: used a javascript beautifier for the code

2009-04-16T09:01:37Z

used a javascript beautifier for the code

Show changes

Cjw: /* Javascript API */

2009-04-16T08:39:38Z

‎Javascript API

Cjw: /* Javascript API */

2009-04-16T08:36:53Z

‎Javascript API

Show changes

Cjw: typo's

2009-04-16T08:24:59Z

typo's

Cjw: /* Javascript API */

2009-04-15T13:07:58Z

‎Javascript API

Cjw: /* Javascript API */

2009-04-15T13:00:10Z

‎Javascript API

Cjw: New page: =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 ...

2009-04-15T12:53:15Z

New page: =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 ...

New page

=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.
<pre>
var objEditor=CKEDITOR.instances["id_of_textarea"].];
var str="";
for (var item in objEditor) {
str+=""+item+"="+objEditor[item].toString().str_replace("\n", " ").str_replace(";", ";   ").str_replace("{", "{   ").str_replace("}", "} ").str_replace(";   }", "; }")+" ";
}
CKEDITOR.instances["id_of_textarea"].].setData(str);
</pre>

With this output:

<pre>
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);
}
}

</pre>

← Older revision		Revision as of 08:42, 12 October 2009
Line 2:		Line 2:

	If you do not use "ckeditor.js" in your install, either because you roll this into a larger script or because you use a different suffix like ".var", you will need to set the global varaible "CKEDITOR_BASEPATH" to the path to the CKEditor install -- otherwise CKEditor will fail to auto-detect the base path and various things like the language libraries will not load. Note that this global JavaScript variable must be set before you include the ckeditor script.		If you do not use "ckeditor.js" in your install, either because you roll this into a larger script or because you use a different suffix like ".var", you will need to set the global varaible "CKEDITOR_BASEPATH" to the path to the CKEditor install -- otherwise CKEditor will fail to auto-detect the base path and various things like the language libraries will not load. Note that this global JavaScript variable must be set before you include the ckeditor script.
		+
		+	> I've added this information to the page. --[[User:Fredck\|FredCK]] 08:42, 12 October 2009 (UTC)

	=Javascript API=		=Javascript API=

← Older revision		Revision as of 19:09, 9 October 2009
Line 1:		Line 1:
		+	=Script Name=
		+
		+	If you do not use "ckeditor.js" in your install, either because you roll this into a larger script or because you use a different suffix like ".var", you will need to set the global varaible "CKEDITOR_BASEPATH" to the path to the CKEditor install -- otherwise CKEditor will fail to auto-detect the base path and various things like the language libraries will not load. Note that this global JavaScript variable must be set before you include the ckeditor script.
		+
	=Javascript API=		=Javascript API=

← Older revision		Revision as of 11:31, 2 July 2009
Line 345:		Line 345:

	If you find yourself able to use any of these functions, please create your account here on the wiki and document it. The developers of CKeditor are working crazily on coding CKEditor v3.		If you find yourself able to use any of these functions, please create your account here on the wiki and document it. The developers of CKeditor are working crazily on coding CKEditor v3.
		+
		+	== getting the CKeditor focus using the API ==
		+
		+	<br>
		+
		+
		+
		+	To respond to the focus event of the editor:
		+
		+
		+
		+	<pre>var my_id='your_editor_id'; //this is the same as the id of the replaced text field
		+	var the_ed=CKEDITOR.instances[my_id]
		+	//respond to focus event
		+	the_ed.on( 'focus', function()
		+
		+	//show the editor data as example
		+	alert(this.getData());
		+	});</pre>

← Older revision		Revision as of 08:39, 16 April 2009
Line 309:		Line 309:

	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.		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.
		+
		+	If you find yourself able to use any of these functions, please create your account here on the wiki and document it. The developers of CKeditor are working crazily on coding CKEditor v3.

@@ Line 13: / Line 13: @@
    str+="<strong>"+item+"</strong>="+objEditor[item].toString().str_replace("\n", "<br>").str_replace(";", ";<br>&nbsp;&nbsp;").str_replace("{", "{<br>&nbsp;&nbsp;").str_replace("}", "}<br>").str_replace(";<br>&nbsp;&nbsp;}", ";<br>}")+"<br>";
+}
-CKEDITOR.instances["id_of_textarea"].].setData(str);
+objEditor.setData(str);
 </pre>

@@ Line 3: / Line 3: @@
 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:
+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.
 <pre>
-var objEditor=CKEDITOR.instances["id_of_textarea"].];
+var objEditor=CKEDITOR.instances["id_of_textarea"];
 var str="";
 for (var item in objEditor) {

← Older revision		Revision as of 13:00, 15 April 2009
Line 328:		Line 328:

	</pre>		</pre>
		+
		+	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.