Adding Lightbox for Image Plugin Tinymce

The framework of this blog is django + grappeli + filebrowser. The background online editor uses the django-filebrowser to manage tinymce, images, and other resources, in this way, you can use the nsert image plug-in of tinymce to insert images. Because only images may have been processed, you need to add the ightbox function to all images in the blog so that you can view the original images.

Django-filebrowser provides django with the file management function and provides interfaces for tinymce so that "Browser" can be selected on the insert image interface of tinymce to open the filebrowser management interface, this allows you to select the image to be inserted. Tinymce is an online editor that provides powerful plug-ins and complete documentation. Lightbox is a jquery UI plug-in that allows you to click images to view image details, such as larger images. You can also click "prev" and "next ", to view all the "lightbox" images on the page.

Tinymce's insert image plug-in function code is mainly in the file: tiny_mce/themes/advanced/js/image. in js, the interface file is tiny_mce/themes/advanced/image.htm. Our job is to intercept the image when tinymce inserts it into html, and modify the img node to <a> </a> node, because this is the lightbox format requirement:

[Xml]
<A href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image #1 </a>
<A href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image #2 </a>
<A href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image #3 </a>

<A href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image #1 </a>
<A href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image #2 </a>
<A href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image #3 </a> since you use filebrowser to manage resource files, the uploaded images are saved in multiple versions: thumbnail, small, medium, big, large, and the original file. The file name is also _ thumbnail. xxx, hosts, and other processed files, and save the original file.

In the filebrowser management interface, interfaces for selecting these files are provided. For example, you can select different image sizes as needed. If select is selected, the original file is selected.

 

When tinymce inserts an image, it calls the ImageDialog. update method of the image. js file. The last code of this method is as follows:

[Js]
....
El = ed. selection. getNode ();
 
If (el & el. nodeName = 'img '){
Ed. dom. setAttribs (el, args );
TinyMCEPopup.editor.exe cCommand ('trigger ');
TinyMCEPopup. editor. focus ();
} Else {
Ed.exe cCommand ('mceinsertcontent', false, '', {skip_undo: 1 });
Ed. dom. setAttribs ('_ mce_tmp', args );
Ed. dom. setAttrib ('_ mce_tmp', 'id ','');
 
Ed. undoManager. add ();
}
 
TinyMCEPopup. close ();

....
El = ed. selection. getNode ();

If (el & el. nodeName = 'img '){
Ed. dom. setAttribs (el, args );
TinyMCEPopup.editor.exe cCommand ('trigger ');
TinyMCEPopup. editor. focus ();
} Else {
Ed.exe cCommand ('mceinsertcontent', false, '', {skip_undo: 1 });
Ed. dom. setAttribs ('_ mce_tmp', args );
Ed. dom. setAttrib ('_ mce_tmp', 'id ','');

Ed. undoManager. add ();
}

TinyMCEPopup. close (); modify the code:

[Js]
....
El = ed. selection. getNode ();
 
If (el & el. nodeName = 'img '){
Ed. dom. setAttribs (el, args );
TinyMCEPopup.editor.exe cCommand ('trigger ');
TinyMCEPopup. editor. focus ();
} Else {
If (f. lightbox. checked ){
Ed.exe cCommand ('mceinsertcontent', false, '<a id = "_ mce_a_tmp" class = "lightbox" rel = "lightbox [plants]"> </a>', {skip_undo: 1 });
Ed. dom. setAttribs ('_ mce_tmp', args );
Ed. dom. setAttrib ('_ mce_tmp', 'id ','');
Var href = args. src. replace ('_ thumbnail. ','. '). replace ('_ small. ','. '). replace ('_ medium. ','. '). replace ('_ big. ','. '). replace ('_ large. ','. ');

Ed. dom. setAttribs ('_ mce_a_tmp', {'href ': href });
Ed. dom. setAttrib ('_ mce_a_tmp', 'id ','');
} Else {
Ed.exe cCommand ('mceinsertcontent', false, '', {skip_undo: 1 });
Ed. dom. setAttribs ('_ mce_tmp', args );
Ed. dom. setAttrib ('_ mce_tmp', 'id ','');
}
 
Ed. undoManager. add ();
}
 
TinyMCEPopup. close ();

....
El = ed. selection. getNode ();

If (el & el. nodeName = 'img '){
Ed. dom. setAttribs (el, args );
TinyMCEPopup.editor.exe cCommand ('trigger ');
TinyMCEPopup. editor. focus ();
} Else {
If (f. lightbox. checked ){
Ed.exe cCommand ('mceinsertcontent', false, '<a id = "_ mce_a_tmp" class = "lightbox" rel = "lightbox [plants]"> </a>', {skip_undo: 1 });
Ed. dom. setAttribs ('_ mce_tmp', args );
Ed. dom. setAttrib ('_ mce_tmp', 'id ','');
Var href = args. src. replace ('_ thumbnail. ','. '). replace ('_ small. ','. '). replace ('_ medium. ','. '). replace ('_ big. ','. '). replace ('_ large. ','. ');

Ed. dom. setAttribs ('_ mce_a_tmp', {'href ': href });
Ed. dom. setAttrib ('_ mce_a_tmp', 'id ','');
} Else {
Ed.exe cCommand ('mceinsertcontent', false, '', {skip_undo: 1 });
Ed. dom. setAttribs ('_ mce_tmp', args );
Ed. dom. setAttrib ('_ mce_tmp', 'id ','');
}

Ed. undoManager. add ();
}

Tinymcepopup.close(f.lightbox.checkedhere is added to the image.htm file, such:

 

In this way, the html code of the inserted image can be changed from changed to <a href = "" rel = "lightbox [plants]"> </a>. In addition, on the Image Display page, such as the post detial page of this blog, you also need to add the js and css of lightbox, which can be downloaded from http://lokeshdhakar.com/projects/lightbox2/. the latest file is 2.51:

[Xml]
<Link rel = "stylesheet" href = "css/lightbox.css" type = "text/css" media = "screen"/>
<Script src = "js/jquery-1.7.2.min.js"> </script>
<Script src = "js/jquery-ui-1.8.18.custom.min.js"> </script>
<Script src = "js/lightbox. js"> </script>

<Link rel = "stylesheet" href = "css/lightbox.css" type = "text/css" media = "screen"/>
<Script src = "js/jquery-1.7.2.min.js"> </script>
<Script src = "js/jquery-ui-1.8.18.custom.min.js"> </script>
<Script src = "js/lightbox. js"> </script> click the image above to view the effect.

Additionally, images such as prev, next, and loading are involved in lightbox.js and lightbox.css files. Therefore, you need to modify the path of these images during use.