Wei Zhuo’s Image Manager with other script 1

[pietje63]

To start, I'm pretty new in javascript, I'm more a php guy.

The project:
Building a CMS which works with UBB and live preview (via AJAX)

This all works for the standard things. The next step is an image (and file) manager. Currently we use htmlarea with Wei Zhuo's Image Manager. And I would like to reuse this script to work with my script.

The problem is I don't know how to call it.

Currently the script is called in this way:

// 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 && !/^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_align  : image.align,
		f_vert   : image.vspace,
		f_horiz  : image.hspace
	};
	this._popupDialog("insert_image.php", 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_align"  : img.align	 = value; break;
			    case "f_vert"   : img.vspace = parseInt(value || "0"); break;
			    case "f_horiz"  : img.hspace = parseInt(value || "0"); break;
			}
		}
	}, outparam);
};

But I guess thisis partly HTMLAREA only code...

Anyone experience with this job who can help me? Or anyone an idea how to work with this kind of javascript problems?

 

[pietje63]

No-one?

Is my question clear?
And aditional info needed?

 

[kaht]

The problem is I don't know how to call it.

What you've posted is a method assigned to the HTMLArea object, which must be a user defined object since it is not a native javascript object. Since you've posted nothing about the HTMLArea object there's not really any advice we can give you. If you're just wanting to know how to invoke the code, you'd have to create an object and then run the method from that object. Something like this:

var a = new HTMLArea();
a._insertImage(imageReference);

I know that doesn't really provide any insight, but I don't know that there's much else to say.....

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[pietje63]

Thank you, I've got a start now!

Ok,I thought most of you would know HTMLArea. This is a WYSIWYG html-editor. It transforms a textare in something more. But I don't want to use that part of the script.

Normally I indeed define the object htmlarea in the following way:

<script type="text/javascript">
var editor = null;
function initEditor() {
  editor = new HTMLArea("textarea_id_name");
  [...]
}
</script>

I'm going to do some testing about how to work with this.

 

[pietje63]

Ok, I fixed the problem now. I removed most of the current code and started over using this example

http://www.irt.org/articles/js068/index.htm

 

[pietje63]

For the record, a demo is online at:

http://editor.pietje63.nl/example

I should note that part of it is still in Dutch. If interested in English version please note at

http://editor.pietje63.nl/forum/phpBB3

 

[pietje63]

Excuse me.. first link should have been.

http://editor.pietje63.nl/editor/example.php

Download at

http://editor.pietje63.nl/editor.zip