More possibilities in InsertImage - Code included

[henrik.andersen@…]

Added more possibilities to insertimage function, so that users can make their own insertimage plugin with more functionality and don't have to change htmlarea.js ... and more functionality can be added to the insertimage plugin in the future.

Added class, height, width and title

NEW CODE FOR HTMLAREA.JS:

// Called when the user clicks on "InsertImage?" button. If an image is already // there, it will just modify it's properties. HTMLArea.prototype._insertImage = function(image) {

var editor = this; // for nested functions var outparam = null; if ( typeof image == "undefined" ) {

image = this.getParentElement(); if ( image && image.tagName.toLowerCase() != 'img' ) {

image = null;

}

} if ( image ) {

outparam = {

f_base : editor.config.baseHref, f_url : HTMLArea.is_ie ? editor.stripBaseURL(image.src) : image.getAttribute("src"), f_alt : image.alt, f_border : image.border, f_align : image.align, f_vert : image.vspace, f_horiz : image.hspace, f_class : image.className,

f_height : image.height, f_width : image.width, f_title : image.title

};

} this._popupDialog(

editor.config.URIs.insert_image, function(param) {

// user must have pressed Cancel if ( !param ) {

return false;

} var img = image; if ( !img ) {

if ( HTMLArea.is_ie ) {

var sel = editor._getSelection(); var range = editor._createRange(sel); editor._doc.execCommand("insertimage", false, param.f_url); img = range.parentElement(); // wonder if this works... if ( img.tagName.toLowerCase() != "img" ) {

img = img.previousSibling;

}

} else {

img = document.createElement('img'); img.src = param.f_url; editor.insertNodeAtSelection(img); if ( !img.tagName ) {

// if the cursor is at the beginning of the document img = range.startContainer.firstChild;

}

}

} else {

img.src = param.f_url;

}

for ( var field in param ) {

var value = param[field]; switch (field) {

case "f_alt":

img.alt = value;

break; case "f_border":

img.border = parseInt(value "0", 10);

break; case "f_align":

img.align = value;

break; case "f_vert":

img.vspace = parseInt(value "0", 10);

break; case "f_horiz":

img.hspace = parseInt(value "0", 10);

break; case "f_class":

img.className = value;

break; case "f_height":

img.height = value;

break; case "f_width":

img.width = value;

break; case "f_title":

img.title = value;

break;

}

}

}, outparam);

};

[ray]

Could you 1. explain what this change does 2. provide this as a patch?

[henrik.andersen@…]

1. We use Xinha in a CM system, and have made a different Insert image popup to replace the standard insert image popup. We needed the possibility to add a class name to the img tag. I added the width, height and title to give even more possibilities in the future.

To help I provided the code to replace the InsertImage? function in htmlarea.js

2. How do I provide a patch? What do you need and how do I send it to you?

And.. We would like to help making Xinha even better. We are sometimes making plugins and enhances for Xinha. Where and how do we provide the code?

[ray]

To provide changes to existing files

• Install a svn client (e.g. TortoiseSVN).
• Check out http://svn.xinha.python-hosting.com/trunk/
• Use the Create Patch functionality of TortoiseSVN to create a patch (diff file)
• attach this here as a ticket

Plugins just zip and attach to a ticket

Have a look at WikiFormatting. Your code above could have been much better read if it were enclosed in

{{{ }}}

[henrik.andersen@…]

Patch for tickets #884 and #885

[ray]

_insertImage() moved to external file popups/insert_image.js

Everybody who would like to extend link.html can change the function as they wish. No need for a central change here

[gogo]

Just to remind people that they shouldn't edit any of the core Xinha stuff anyway, including files in popups, unless they want to make it harder to upgrade.

A plugin, or even just some javascript code in your own file, can easily override (redefine) any Xinha function it requires (ie the ticket opener could easily have stuck that whole _createImage method definition in thier own file after loading htmlarea.js and it would have worked as they wanted, with no modification to htmlarea.js required).