Combining CKEditor 3.6.3, prettyPhoto and AjexFileManager

Good time of day!

CKEditor 3.6.3 - Using the visual editor built into the site, it is very easy and convenient to add and edit various information. For example, it can be used in the form of adding comments or a news block, not to mention its use in the admin section.

prettyPhoto - Beautiful photo gallery.

AjexFileManager - File manager. In Our case, he will load the pictures.

When creating one of the sites, I encountered the following problem: I had to install a text editor in the admin panel, with the ability to create photo galleries. After searching for such a combination on the Internet, I found “CKEditor 3.0.1 + lightbox”. Finding the CKEditor version old and the lightbox not as pretty as prettyPhoto. I decided to make my assembly.

Combining CKEditor 3.6.3 and prettyPhoto

To get started, after reading the articles and figured out where to edit CKEditor, to add the code for the "adhesion" of the gallery, I started editing the file "image.js" located along the path: "\ ckeditor \ plugins \ image \ dialogs \ image.js".
But this file is compressed, so we need to replace it with an uncompressed file located in the "\ ckeditor \ _source \ plugins \ image \ dialogs" folder.
Having knowledge of the connection between CKEditor 3.0.1 and lightbox, I did not look long for a place to edit the script.
In line # 1171 after "}" you need to add the code: After adding the code, we need to give each tag its own name for this, edit the fil "ru" (\ func \ ckeditor \ lang \). Change the most recent characters to. So I got this composition:
,{
id:'cmbARFGallery',
type:'select',
label:editor.lang.ARFgallery.title,'default':'',
items:[
[editor.lang.common.notSet,''],
[editor.lang.ARFgallery.prettyPhoto1,'prettyPhoto[gallery1]'],
[editor.lang.ARFgallery.prettyPhoto2,'prettyPhoto[gallery2]'],
[editor.lang.ARFgallery.prettyPhoto3,'prettyPhoto[gallery3]'],
[editor.lang.ARFgallery.prettyPhotoOne,'prettyPhoto'],
],
setup:function(type,element) {
if(type==LINK) this.setValue(element.getAttribute('rel')||'')
},
commit:function(type,element) {
if(type==LINK){
if(this.getValue()||this.isChanged()) {
element.setAttribute('rel',this.getValue());
element.setAttribute('class','imgPrettyPhoto');
}
}
}
}




'}};



'},ARFgallery:{title:'Вид галереи',prettyPhoto1:'prettyPhoto 1',prettyPhoto2:'prettyPhoto 2',prettyPhoto3:'prettyPhoto 3',prettyPhotoOne:'prettyPhoto One'}};

Using CKEditor 3.6.3, prettyPhoto and AjexFileManager

This is the simplest part, which is carried out according to a simple plan.
1. Download scripts. Need to load: 2. After textarea we add: @ script = script 3. Save and use. The result is this kit:
<скрипт type="text/javascript" src="/ckeditor/ckeditor.js">
<скрипт type="text/javascript" src="/AjexFileManager/ajex.js">


<скрипт type="text/javascript">
var editor = CKEDITOR.replace('ID textarea');
AjexFileManager.init({returnTo: 'ckeditor', editor: editor});


Tips and explanations

1. “prettyPhoto [gallery1]”, “prettyPhoto [gallery2]”, “prettyPhoto [gallery3]” - Three series of slides
2. If you need more, add this list by analogy. 3. I advise you not to change the variables, because any other functions may stop working. Because of the variables I have not worked "Tables" and "the iFrame" PS CKEditor 3.6.3 and AjexFileManager Download here narod.ru/disk/51807053001.a4afef46f820a00413d95807fa399293/func.rar.html prettyPhoto - Any recent PPS View and you can play here arfiles.ru/habrahabr
[editor.lang.ARFgallery.prettyPhoto1,'prettyPhoto[gallery1]'],
[editor.lang.ARFgallery.prettyPhoto2,'prettyPhoto[gallery2]'],
[editor.lang.ARFgallery.prettyPhoto3,'prettyPhoto[gallery3]'],