R@c (X`qH)=-i JM$#Y.c4-A[ SΛyӮ/UK!V7-|FOaDm4*:]ّh,)Md\l/ӏ d#~l!,ΑD\>9PR4R߃޻tGgy4׋3=+Ŧ4jTVZoPb{*17uXmcUyˠM BP/`"!')pI*#0;Gs&x?aUb52:%d QNMߊNaoƚzwh"8SBY%~2VݕcJś|Y`,3 dD4AyzRp.pĈI;_gU\Px[}Mz| m&P|Y`,3 dD|Si>͎ Uyڹ%qҍ:כ=K`"J+n\3]gN׬Dωכ=K`"J+u}Ι Eno3iU2BҒTj{/s_X ˨C,XzH{< 0K$N-o^ĖR:K'pZ{\co|T*sɃL7VaYȸא+&eg6; /lTmd{t+F%zC:NN8#;Q)Q%؄YAɾkH}m~j\Pa8V7qݓܔ/9м=˞cT_eݫ;%Ev೭y؎{ƵVe2^&<=+by,q<]w97qDZh(jxs-dlAX#w< hn$Y{B؝YŦ\KRXg.M.5یPˡeۃCN=p.^tYT#͖+#4E:2]S%(+uOo芩ʩbN$'rV޳b#nNSTPUZCZV 006rձuA(߃zK "y)V*6Bׅ$IkQ(ޜx0a>캭 \f3d)xqp,]Рg˞TD Ġ/nUs4?^\Aa|Q1#Mt0Gr|3+;Ξ)^h60H`P.HWrS-=iOx웗!=[۔F9,AG߯js'6}"ˎ5F۸o/=a<6xEPJRyV\E դe <+q^jR50nVo 1ZR4+25Om'7-;"hԒxeoC;zS6>j43v)$ē@~!X^~"ky*-%ء^YIF+V$HC 0b%0j&Yua7B8 l:+szYPH^F"y +g0.dMDNu/wC@{% qzU0ƫ_a;:ܸ/{¨5ֶwo(ĤK@r%5*iLY 4[tt}t+U$}eNԄJ̻k&=Y6״erIUk}*hq)Vd hXTb\8+)woJDO+ѐ㯜hhe=00sԤ}$>3}b݇}G2`S'Q(9mrkG;H@j$n&G1GQ`qs>F'icCi/(}_uwX3FگO!p5_>iVWKnu0SX8VʆYV53Dji/G{Ƶ^Ks{4#$;Qk@Ir3&xݣ>1'Yua/Kn {UyQSUl= o:վ{t*>EGCXAq>8 rYz.-%J(<@^VTa/ *k(9(VƩMNϸqӒMITO2 Nrkm*`=Ez%8Nk:B!]3EG]Ndst%tw0`נQκڴl~sB-:8(XnMENmoGXM>w|doqK xfϰ8K֦e`2o3+IƜcr$$Ũ8H7;&<8;7J PO-5!lXa0"f*54T Yհ {^J-&vwږ|1xlc E:5 dj}4c\H(*1Gii?ovjJ>mOey"pAhQ9v?= 5ra!nvİΟ8ݤvK¡,jqTIgEchq0jԔZ3G'w$t63BUNyr_@T[^ח]Ǘ@U ~3'HԅQTl̕V#A$O5<$oHӭ񾡷Tڎ*vbYA.TƓ ,/[~DdSr43jwB%hdɀ[!aZ&Ù+X\kY+kݸH#Qq e;BpE #nMT%OfT.WRq%W34'Nה:!QAGbY/lY6`G C$3Kl$v*S%eк\k Fm09 ~v 879\i.xp&Q =ᴦDjS=i U' KVܫ4pKP"盝 F ! D EK}TMx*K(lY#ʟ%<_ ^^`":\qMH<-^>"No&$Y4O@JJd?"WzqUfJO <'|^3U,l$Aּ:rz߉f<-{ * K&%JX M︝%hdɀ[!?nuJ^Q=;.V2[±4' Z(dǧcG!KԖ]!HU|Y6Ȝw>-V%R*.EE\0=:٩^Y9pz_,( 'tab1', 'customField' ); urlField.select(); }; } }); var config = { extraPlugins: 'dialog', toolbar: [ [ 'MyButton' ] ] };

CKEditor Samples » Using CKEditor Dialog API

This sample is not maintained anymore. Check out the brand new samples in CKEditor Examples.

This sample shows how to use the CKEditor Dialog API to customize CKEditor dialog windows without changing the original editor code. The following customizations are being done in the example below:

For details on how to create this setup check the source code of this sample page.

A custom dialog is added to the editors using the pluginsLoaded event, from an external dialog definition file:

  1. Creating a custom dialog window – "My Dialog" dialog window opened with the "My Dialog" toolbar button.
  2. Creating a custom button – Add button to open the dialog with "My Dialog" toolbar button.

The below editor modify the dialog definition of the above added dialog using the dialogDefinition event:

  1. Adding dialog tab – Add new tab "My Tab" to dialog window.
  2. Removing a dialog window tab – Remove "Second Tab" page from the dialog window.
  3. Adding dialog window fields – Add "My Custom Field" to the dialog window.
  4. Removing dialog window field – Remove "Select Field" selection field from the dialog window.
  5. Setting default values for dialog window fields – Set default value of "Text Field" text field.
  6. Setup initial focus for dialog window – Put initial focus on "My Custom Field" text field.