Testing again, if you please

[beetle]

Lemme know what happens.

http://www.lanwizards.com/test/taeditor.htm

The B, I and U buttons should work as expected.

The [ Page Break ] button should insert <page> at the cursor

The [ Link ] button should insert <link href='link'>text</link>

[x_goose_x]

works in ie5

you might want to have the prompt for the link have a default value of "http://"

[Roy Sinclair]

W2K with IE 6 all the buttons give me "this.caretPos is null or not an object". Works fine with MOZ 1.2 except the quotation marks used to delimit the URL for the link are the single quote marks which are deprecated for parameter, they really should be double quote marks.

[beetle]

I realize the quotation thing Roy (c'mon, you should know me better by now :rolleyes: ), but I'm generating these tags for specific CMS whose XML Parser likes single-quotes.

If you view the source, you can see that I'm trying to make this as flexible as possible, which a single js-class to handle all the dirty work, while letting you (as a developer) create custom functions to be called with certain buttons. Further down the road, I'll streamline that process even a little bit more. I don't want this thing to be only useful for eZ publish.

I don't know why you are getting those errors, I'm on Win2K with IE6 at this very moment and have no problems.

Thanks for helping fellas. Anybody got a Mac? :D

[Roy Sinclair]

In IE open the page fresh and press one of the buttons before you type anything into the textarea.

[beetle]

Ah, I see. Thanks, I can add a check for that :thumbsup:

[brothercake]

Opera 7 doesn't work - it gives the following, astoundingly comprehensive, error message:

http://www.lanwizards.com/test/taeditor.htm
Event thread: onclick
Error:
name: TypeError
message: Statement on line 37: Expression evaluated to null or undefined and is not convertible to Object: this.caretPos
Backtrace:
Line 37 of linked script http://www.lanwizards.com/test/taeditor.class.js
this.caretPos.text = this.caretPos.text.charAt(this.caretPos.text.length - 1) == " " ? txt + " " : txt;
Line 156 of linked script http://www.lanwizards.com/test/taeditor.class.js
this.elem.insertAtSelection(txt);
Line 116 of linked script http://www.lanwizards.com/test/taeditor.class.js
this.insert(tag.toTag(this, 0) + block ? "\x0a" : "");
Line 80 of linked script http://www.lanwizards.com/test/taeditor.class.js
this.insertWrapper(btn);
Line 59 of linked script http://www.lanwizards.com/test/taeditor.class.js
classObj.clickHandler(this);
At unknown location
{event handler trampoline}


Do you want me to test Safari again?

[beetle]

Originally posted by brothercake
Do you want me to test Safari again? Please do, and thx for the Opera error.

It appears that Opera 7 makes it through my method structure all the way the actual point of text-insertion (if I'm reading it right). Since I'm using Gecko and IE proprietary method to do this, perhaps there is no good way to manage a user selection in Opera. I'm gonna have to download it and mess with this myself.

[beetle]

Okay, I got it working in Opera 7, but since I don't know how to work with the user selection in Opera (or there is no way) all buttons simple append to the textarea's value.

Not perfect, but not bad either :D

[Roy Sinclair]

It's working fine for me now.

[joh6nn]

on your link thingy, when the user clicks cancel, chances are, they want to cancel inserting a link. at the moment, it just goes to the next prompt() dialog, which results in the insertion of a <link> tag with no text, or no url.

just something you might want to think about.

[beetle]

thanks john, I do need to finesse that function, but at the moment I'm mostly concerned with getting the text-inserton across browsers going smoothly :D

[beetle]

Okay, I've created an interface to the class that allows you to add what I call 'tagMaker functions' for doing custom tags. Try out the color and link buttons in various scenarios, (selection, no selection, etc)

[Roy Sinclair]

The latest version is still working for me. IE 6 and Moz 1.21.

[mordred]

Works splendid for me in IE5.5 on WinNT. But I have an issue with Moz 1.2.1., when I type the following test (with line breaks):


A test

for you


and then select "for you", and hit the "U" button, the custom tags are placed around the wrong text. It then looks like


<underline>A test
</underline>
for you


Apart from that, veeeeery nice! I'm very impressed. :)

Why don't you started doing this before? :D Exactly this week I had to implement a similar editor interface for a CMS developed at our company, and it would've been fine if the editor would work in browsers other than IE as it currently does too (+ I would have saved some hours reinventing the "editor" wheel).

[beetle]

Thanks mordred. :D

I'll check into that Moz bug.

I've got a new development page going here (http://www.peterbailey.net/dhtml/taeditor.htm)

right now I'm in the midst of making the select onchange handler work =)

I'm trying to make the creation process as simple as possible. Looking at the code (not the class) do you think it's fairly easy to see what's going on? I'm starting to "not be able to see the forest for all the trees in the way" ;)

During this process, I came up with a process for creating HTML elements easily and quickly. It's a method of my class here, but could easily be a standalone function. I'm not sure if this is an original concept or not, but I haven't seen it before.TAEditor.prototype.createHTMLElement = function( elemName, attribs )
{
var elem = document.createElement( elemName );
if ( typeof attribs != 'undefined' )
{
for ( var i in attribs )
{
switch ( true )
{
case ( i == 'text' ) : elem.appendChild( document.createTextNode( attribs[i] ) ); break;
case ( i == 'class' ) : elem.className = attribs[i]; break;
default : elem.setAttribute( i, '' ); elem[i] = attribs[i];
}
}
}
return elem;
}attribs is an object whos properties become attributes, and values become, well, values. If attribute.text is found, a textNode is created and appended. As you can see, a special condition for className is there as well.

so, TAEditorObject.createHTMLElement( 'p', { 'class': 'warning', 'text': 'You can\'t do that!' } );

creates and returns this element

<p class="warning">You can't do that!</p>

[mordred]

Originally posted by beetle
I'm trying to make the creation process as simple as possible. Looking at the code (not the class) do you think it's fairly easy to see what's going on? I'm starting to "not be able to see the forest for all the trees in the way" ;)


It's good, the general procedure to initialize the editor is (I think) clear to me.
What I don't see yet is how can call the methods that insert a tag out of the init function. Scenario is like this: I have several windows opened after clicking on buttons, and they serve as dialog windows where the user is able to make a special selection (like a date from a calendar, or a file location). After the selection is made, I need to transfer an ID value to the editor object that surrounds it with the tag markers and inserts them at the textrange selection/caret position. How to solve that is not quite clear to me from the init function, because the variable a is made a local one. Globalizing it might solve this.

Oh, there was a part in your class' code where I found eval() and *think* you might get rid of it:


if ( !data ) data = eval( "btn.obj." + btn.func + "()" );


should become


if ( !data ) data = btn.obj[btn.func]();


or sth. like this... I have a closer look at that when I come home from work.


During this process, I came up with a process for creating HTML elements easily and quickly. It's a method of my class here, but could easily be a standalone function. I'm not sure if this is an original concept or not, but I haven't seen it before.


That's a nice snippet, and that technique reminds me how a lot of PEAR objects are instantiated. They get an array/object passed that maps to the attributes to create. I'm quite fond of such classes because they leave a lot of customization freedom to the user of the class, and you still have the overview and does not get lost in a jungle of create() and set() methods. It's very convenient.
Is the check for "undefined" necessary when using a for-in loop and if so, why not better check for an object type? Just a very minor issue, perhaps none at all.

[beetle]

Originally posted by mordred
What I don't see yet is how can call the methods that insert a tag out of the init function. Well, that's why the last parameter for complexButton() receives init', to tell the class that the propGetter function is a method of init and not a global function (which are really methods to window). If that isn't passed, then window is assumed.Oh, there was a part in your class' code where I found eval() and *think* you might get rid of it:Duh! How did I end up doing that? I've even used that very syntax before. Changed :rolleyes:Is the check for "undefined" necessary when using a for-in loopNot totally sure here, but I just wanted to skip the loop altogether if no value is passed into attribs

Some things are changing. I need to re-structure the insertWrapper method. It does too much.

[brothercake]

All works in Safari, except the COLOR button only adds an open element; the close element is added along with another open element when you press color again.

[beetle]

Cool, thanks brothercake. I'm actually still working on those SELECT widgets, so I'm not surprised they act funny.