Page 1 of 1
textarea....adding images for blogging
Posted: Sat Feb 02, 2008 10:41 am
by phpMover
how could i work with the textarea that will accept pictures or links. If javascript give me a hint.
i will be using it for blogging. and i am a newbie for doing it. I needed your help masters, to enable images in the textarea thank you so much. I am looking forward for help replies.
Re: textarea....adding images for blogging
Posted: Mon Feb 04, 2008 10:31 am
by pickle
Impossible. A text area is just that - an area for plain text. Your best bet is to not reinvent the wheel & use a WYSIWYG editor like
FCKEditoror
TinyMCE.
Re: textarea....adding images for blogging
Posted: Thu Feb 21, 2008 8:08 pm
by Jonah Bron
Just out of curiosity, what is the general method behind those?
Re: textarea....adding images for blogging
Posted: Fri Feb 22, 2008 4:50 am
by Inkyskin
I think they use Javascript to render html etc where the textbox would normally go
Re: textarea....adding images for blogging
Posted: Fri Feb 22, 2008 9:40 am
by pickle
tinyMCE & FCKEditor plop an iframe overtop the textbox I believe.
Re: textarea....adding images for blogging
Posted: Sat Feb 23, 2008 12:14 pm
by Jonah Bron
Interesting. And how do they enable you to edit?
Re: textarea....adding images for blogging
Posted: Mon Feb 25, 2008 9:56 am
by pickle
That's a very obvious question - one that I've never asked myself before and don't have an answer to.
Re: textarea....adding images for blogging
Posted: Tue Feb 26, 2008 2:57 am
by alex.barylski
~pickle | Please use Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
WYSIWYG editors work by basically replacing (actually hiding) the TEXTAREA and inserting a IFRAME.
The IFRAME is then told to turn into "edit" mode - how this is done might vary from browser to browser but most will work by setting the "document" editMode property to on.
Code: Select all
document.getElementById("wysiwyg_iframe").editMode = "on";
Something to that effect anyways, Google edit mode and you'll see...
Thing get interesting in their own unique implementations which counter-attack browser caveats. For instance, under IE (5 anyways it's been a while since I did this) UNDO would stop working in most WYSIWYG (HtmlArea) because HtmlArea (if memory serves correct) updated the TEXTAREA each time a key was pressed - updating the textarea it turns out - erased the internal UNDO buffer.
This was eventually rectified by capturing the onsubmit() event and updating the textarea only at submittion time - at least thats how we fixed the problem.
Then of course, there are the infamous double line break in IE - which requires a wicked buggy hack or the user to hold down the shift key when pressing enter if only a single line break is desired.
With all the browser caveats...and difficult manipulation of the browser and it's DOM via javascript...those were the worst most irritating moments of my life. Something works one moment and then because of a cache issue or something similar BAM the code doesn't work on next refresh.
~pickle | Please use Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]