久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

Adding the "rel" and "title" attributes to im...

 sslit 2012-06-03

CKEditor is the new and improved successor to the venerable FCKeditor JavaScript WYSIWYG editor. I've used TinyMCE and FCKeditor before, but this was my first time trying out the new CKEditor 3.1. I am using it on a new Drupal website via the Drupal CKEditor module. The problem I ran into, however, is using Lightbox2 on images inserted via CKEditor. CK does not provide a way to add the "rel" attribute to image links (or any links for that matter). CK also doesn't allow adding the "title" attribute to image links. Lightbox uses both of these to determine which images to display, group together in galleries, provide a caption, etc. I found a patch for FCKeditor which allows adding a "rel" attribute to image links, but I couldn't find one for the new CKEditor. So here we are. :)

This is a total hack, since I have not looked in to how to properly make a plugin for the new CKEditor, but it works pretty well. Maybe someone who knows how to make plugins to CKEditor can show me the way.

To start hacking, we need to first copy over the minified ckeditor\plugins\image\dialogs\image.js with the indented ckeditor\_source\plugins\image\dialogs\image.js, since it's really hard to work with the minified image.js.

In image.js all of the tabs and fields in the Image popup dialog are defined in the "contents" array (below the onHide function). We will add our new "rel" and "title" fields to the content array, in the "Link" tab's sub-array. I added the new code at the end of the Link tab's definition array after the txtUrl, browse, and cmbTarget fields (around line 1146). The code I added is:

{
id : 'txtTitle',
type : 'text',
label : editor.lang.link.advisoryTitle,
'default' : '',
setup : function( type, element )
{
	if ( type == LINK )
	{
		this.setValue( element.getAttribute( 'title' ) );
	}
},
commit : function( type, element )
{
	if ( type == LINK )
	{
		if ( this.getValue() || this.isChanged() )
		{
			element.setAttribute( 'title', this.getValue() );
		}
	}
}
},
{
id : 'txtRel',
type : 'text',
label : editor.lang.link.rel,
'default' : '',
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() );
		}
	}
}
},

This adds a _txtTitle_ and _txtRel_ field to the Link tab on the Insert Image CKEditor dialog. Look out for commas! The first time I did this I missed a comma between the cmbTarget and txtTitle declarations, which borked everything.

The final thing we need to do is create the "editor.lang.link.rel" English translation definition so the new _txtRel_ field is properly labeled in the dialog (I re-used the existing "editor.lang.link.advisoryTitle" translation for _txtTitle_). To do this, open up _ckeditor\lang\en.js_. I added the following snipped between _styles_ and _selectAnchor_ in the "Link" block, but just make sure it's in the "Link" block of translations.

rel:'Rel',

You could probably hard-code this label, but I kept with the translation system. I didn't do any labels except the English one, but you get the idea. If you are using another language insert the "rel" label into the appropriate file for that language.

You can now set the "rel" and "title" attributes on the image link, and use them with the Lightbox of your choice!

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多