htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
add class to img tag


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


mephisto
New User

Aug 9, 2004, 2:50 PM

Post #1 of 5 (3419 views)
Shortcut
add class to img tag Can't Post

Hello,

i need to know how I'm able to add a class to the img tag. For an example:


Code
   

<img src="..." border="0" class="main">



I've tried to add an input to the insert_image.html which gives the the value for the class to the htmlarea.js. That was no problem, but when I added these red lines to the script there is an error:



Code
 HTMLArea.prototype._insertImage = function(image) { 
var editor = this; // for nested functions
var outparam = null;
if (typeof image == "undefined") {
image = this.getParentElement();
if (image && !/^img$/i.test(image.tagName))
image = null;
}
if (image) outparam = {
f_url : HTMLArea.is_ie ? editor.stripBaseURL(image.src) : image.getAttribute("src"),
f_alt : image.alt,
f_border : image.border,
f_class : image.class,
f_align : image.align,
f_vert : image.vspace,
f_horiz : image.hspace
};
this._popupDialog("insert_image.html", function(param) {
if (!param) { // user must have pressed Cancel
return false;
}
var img = image;
if (!img) {
var sel = editor._getSelection();
var range = editor._createRange(sel);
editor._doc.execCommand("insertimage", false, param.f_url);
if (HTMLArea.is_ie) {
img = range.parentElement();
// wonder if this works...
if (img.tagName.toLowerCase() != "img") {
img = img.previousSibling;
}
} else {
img = range.startContainer.previousSibling;
}
} else {
img.src = param.f_url;
}
for (field in param) {
var value = param[field];
switch (field) {
case "f_alt" : img.alt = value; break;
case "f_border" : img.border = parseInt(value || "0"); break;
case "f_class" : img.class = value; break;
case "f_align" : img.align = value; break;
case "f_vert" : img.vspace = parseInt(value || "0"); break;
case "f_horiz" : img.hspace = parseInt(value || "0"); break;
}
}
}, outparam);
};



Why doesn't it accept image.class/img.class? Is there a solution for this problem?



Thanks,

Ingo


mephisto
New User

Aug 10, 2004, 1:57 PM

Post #2 of 5 (3390 views)
Shortcut
Re: [mephisto] add class to img tag [In reply to] Can't Post

Is no one able to help me? I don't know who to do that.


iamdecal
Novice

Jan 10, 2005, 9:27 AM

Post #3 of 5 (3217 views)
Shortcut
Re: [mephisto] add class to img tag [In reply to] Can't Post

im having the same problem at the moment ... did you manage to resolve it.

my work so far


for (var field in param) {
alert('checking (1726): ' + field +' = ' + param[field]);
var value = param[field];
switch (field) {
case "f_alt" : img.alt = value; alert('just done alt =' + img.alt); break;
case "f_border" : img.border = parseInt(value || "0"); break;
case "f_align" : img.align = value; break;
case "f_class" : HTMLArea.is_ie ? img.classname = value : img.setAttribute('class',value,0); break;
case "f_id" : img.id = value; alert('just done alt =' + img.id); break;
case "f_vert" : img.vspace = parseInt(value || "0"); break;
case "f_horiz" : img.hspace = parseInt(value || "0"); break;
}



it seems to be a firefox bug (in that it works fine in IE like this) the problem is ONLY for the class and only if the image your editing dosnt have a class already,

if you have a class already, then the edit works fine.


iamdecal
Novice

Jan 10, 2005, 9:30 AM

Post #4 of 5 (3215 views)
Shortcut
Re: [iamdecal] add class to img tag [In reply to] Can't Post

just to clarify

neither

case "f_class" : HTMLArea.is_ie ? img.classname = value : img.setAttribute('class',value,0); break;

or

case "f_class" : HTMLArea.is_ie ? img.classname = value : img.setAttribute('className',value,0); break;

work



refs
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setattribute.asp
http://www.mozilla.org/docs/dom/domref/dom_el_ref57.html


iamdecal
Novice

Jan 10, 2005, 10:03 AM

Post #5 of 5 (3211 views)
Shortcut
Re: [iamdecal] add class to img tag [In reply to] Can't Post

hmmm, its actually only if its a new image - you can have an existing image with no class, and that works okay...

this is really annoying me now ;-)

 
 
 


Search for (options)