You are not logged in.
Pages: 1
Hi!
I am trying to customize the InsertImage (of Xinha 0.92beta) module so that it not only inserts the img-tag but also a surrounding dl-list so that I can display a proper caption. It works quite fine - in Firefox. Sadly IE7 gets the nesting wrong and dt is inside dd... Can anybody tell me how to avoid this?
Here is my source code from the /modules/InsertImage/insert_image.js - if you like it, fix it and use it - and PLEASE tell me how to fix it ;-)
/*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
-- Xinha (is not htmlArea) - http://xinha.gogo.co.nz/
--
-- Use of Xinha is granted by the terms of the htmlArea License (based on
-- BSD license) please read license.txt in this package for details.
--
-- Xinha was originally based on work by Mihai Bazon which is:
-- Copyright (c) 2003-2004 dynarch.com.
-- Copyright (c) 2002-2003 interactivetools.com, inc.
-- This copyright notice MUST stay intact for use.
--
-- This is the standard implementation of the Xinha.prototype._insertImage method,
-- which provides the functionality to insert an image in the editor.
--
-- he file is loaded as a special plugin by the Xinha Core when no alternative method (plugin) is loaded.
--
--
-- $HeadURL: http://svn.xinha.python-hosting.com/tags/0.92beta/modules/InsertImage/insert_image.js $
-- $LastChangedDate: 2007-02-13 13:54:39 +0100 (Di, 13 Feb 2007) $
-- $LastChangedRevision: 733 $
-- $LastChangedBy: htanaka $
--------------------------------------------------------------------------*/
InsertImage._pluginInfo = {
name : "InsertImage",
origin : "Xinha Core",
version : "$LastChangedRevision: 733 $".replace(/^[^:]*: (.*) \$$/, '$1'),
developer : "The Xinha Core Developer Team",
developer_url : "$HeadURL: http://svn.xinha.python-hosting.com/tags/0.92beta/modules/InsertImage/insert_image.js $".replace(/^[^:]*: (.*) \$$/, '$1'),
sponsor : "",
sponsor_url : "",
license : "htmlArea"
};
function InsertImage(editor) {
}
// Called when the user clicks on "InsertImage" button. If an image is already
// there, it will just modify it's properties.
Xinha.prototype._insertImage = function(image)
{
var editor = this; // for nested functions
var outparam;
if ( typeof image == "undefined" )
{
image = this.getParentElement();
if ( image && image.tagName.toLowerCase() != 'img' )
{
image = null;
}
}
var base;
if ( typeof editor.config.baseHref != 'undefined' && editor.config.baseHref !== null ) {
base = editor.config.baseHref;
}
else {
var bdir = window.location.toString().split("/");
bdir.pop();
base = bdir.join("/");
}
if ( image )
{
outparam =
{
f_base : base,
f_url : Xinha.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!=-1 ? image.vspace : ""), //FireFox reports -1 when this attr has no value.
f_horiz : (image.hspace!=-1 ? image.hspace : ""), //FireFox reports -1 when this attr has no value.
f_width : image.width,
f_height : image.height
};
}
else{
outparam =
{
f_base : base,
f_url : ""
};
}
Dialog(
editor.config.URIs.insert_image,
function(param)
{
// user must have pressed Cancel
if ( !param )
{
return false;
}
var img = image;
if ( !img )
{
var dl = document.createElement('dl');
dl.className = param.f_align;
var dt = document.createElement('dt');
dl.appendChild(dt);
var img = document.createElement('img');
dt.appendChild(img);
img.src = param.f_url;
img.style.width = "100%";
img.alt = param.f_alt;
var dd = document.createElement('dd');
dl.appendChild(dd);
dd.appendChild(document.createTextNode(param.f_alt));
editor.insertNodeAtSelection(dl);
if ( !img.tagName )
{
// if the cursor is at the beginning of the document
img = range.startContainer.firstChild;
}
}
else
{
img.src = param.f_url;
}
},
outparam);
};Last edited by kaffeeringe (2007-07-27 11:50:15)
Offline
Hi
I have been doing something similar. I have modified the ImageManager plugin and used a table instead of DL to do a caption
Bill
Xinha.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;
}
// the selection will have the absolute url to the image.
// coerce it to be relative to the images directory.
//
// FIXME: we have the correct URL, but how to get it to select?
// FIXME: need to do the same for MSIE.
if ( image )
{
outparam =
{
f_url : Xinha.is_ie ? image.src : image.src,
f_alt : image.alt,
f_border : image.style.borderWidth ? image.style.borderWidth : image.border,
f_align : image.align,
f_vert : image.vspace,
f_horiz : image.hspace,
f_width : image.width,
f_height : image.height,
f_caption : "",
f_caption_align : "bottom"
};
function shortSize(cssSize)
{
if(/ /.test(cssSize))
{
var sizes = cssSize.split(' ');
var useFirstSize = true;
for(var i = 1; i < sizes.length; i++)
{
if(sizes[0] != sizes[i])
{
useFirstSize = false;
break;
}
}
if(useFirstSize) cssSize = sizes[0];
}
return cssSize;
}
outparam.f_border = shortSize(outparam.f_border);
} // end of if we selected an image before raising the dialog.
// the "manager" var is legacy code. Should probably reference the
// actual config variable in each place .. for now this is good enough.
// alert( "backend is '" + editor.config.ImageManager.backend + "'" );
var manager = editor.config.ImsPhoto.backend + "?n=y";
if (image)
insertImageUrl = editor.config.ImsPhoto.backend;
//if(editor.config.ImsPhoto.backend_data != null)
//{
// for ( var i in editor.config.ImsPhoto.backend_data )
// {
// manager += '&' + i + '=' + encodeURIComponent(editor.config.ImsPhoto.backend_data[i]);
// }
//}
Dialog(manager, function(param) {
if (!param) { // user must have pressed Cancel
return false;
}
var img = image;
var newimage = false;
var el = null;
if (!img) {
newimage = true;
var sel = editor._getSelection();
var range = editor._createRange(sel);
var doc = editor._doc;
if (param.f_caption.trim() != "") {
var table = doc.createElement("table");
el = table;
table.align = param.f_align;
table.border = "0";
table.cellSpacing = "0";
table.cellPadding = "0";
table.style.width = param.f_width + "px";
param.f_align = "";
param.f_vert = "0";
param.f_horiz = "0";
var tbody = doc.createElement("tbody");
table.appendChild(tbody);
var captiontr = doc.createElement("tr");
var td = doc.createElement("td");
captiontr.appendChild(td);
td.className = "caption";
td.align = "center";
td.innerHTML = param.f_caption;
if (param.f_caption_align == "top")
tbody.appendChild(captiontr);
var tr = doc.createElement("tr");
tbody.appendChild(tr);
td = doc.createElement("td");
tr.appendChild(td);
img = doc.createElement("img");
img.src = param.f_url;
td.appendChild(img);
if (param.f_caption_align == "bottom")
tbody.appendChild(captiontr);
}
else {
img = doc.createElement("img");
el = img;
img.src = param.f_url;
}
} 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" :
if(value.length)
{
img.style.borderWidth = /[^0-9]/.test(value) ? value : (parseInt(value) + 'px');
if(img.style.borderWidth && !img.style.borderStyle)
{
img.style.borderStyle = 'solid';
}
}
else
{
img.style.borderWidth = '';
img.style.borderStyle = '';
}
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;
case "f_width" :
{
if(!isNaN(parseInt(value))) { img.width = parseInt(value); } else { img.width = ''; }
}
break;
case "f_height":
{
if(!isNaN(parseInt(value))) { img.height = parseInt(value); } else { img.height = ''; }
}
break;
}
}
if (newimage) {
if (HTMLArea.is_ie) {
range.pasteHTML(el.outerHTML);
}
else {
editor.insertNodeAtSelection(el);
}
}
}, outparam);
};Offline
Pages: 1