[ 6 posts ]

Ultimate Weapon

  • Username: UltimateWeapon
  • Joined: Thu Jan 06, 2011 2:54 pm
  • Posts: 4
  • Offline
  • Profile

Adding 2 simple buttons to the Rich Text Editor

Post Posted: Thu Jan 06, 2011 3:03 pm
+0-
I've been spending about 8 hours already on trying to add 2 simple buttons to the Rich Text Editor: A "Save" button, and e "Cancel" button.

I know how to do the Saving, I also know how to do the Cancelling,
but I can't find any way to add the 2 buttons to the bottom of the Editor itself.

I've been trying to use the "Dialog" widget from Yahoo, and then add the Rich Text Editor to that Dialog, which also didn't really work out well, at all. But then I realized that must be overkill.
I mean, all i just want is to add 2 simple <input> buttons, all the javascript functions that need to happen after that can easily be handled by my framework.

Now i'm on a dead end. I've tried to simply "hack" the editor and add the buttons through "innerHTML", which messed the whole editor up, and so didn't work either.


How can I easily achieve this? Just the adding of 2 <input> buttons within the Editor, at the bottom.
It can't be that hard, can it? :D

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile
Tags:

Re: Adding 2 simple buttons to the Rich Text Editor

Post Posted: Thu Jan 06, 2011 3:10 pm
+0-
I'm not sure I understand the issue you are having. Can't you just simply do this:

Code:
<div>
<textarea>
<input> <input>
</div>

Ultimate Weapon

  • Username: UltimateWeapon
  • Joined: Thu Jan 06, 2011 2:54 pm
  • Posts: 4
  • Offline
  • Profile

Re: Adding 2 simple buttons to the Rich Text Editor

Post Posted: Thu Jan 06, 2011 3:14 pm
+0-
I'm using the code from:

http://developer.yahoo.com/yui/examples ... ditor.html

So the editor moves around from spot to spot on the page.

Whenever someone pushes the "collapse" button on the top right, the content is being saved to the database and the Editor is being hidden. That's all working perfectly fine.

But now I would like to add a "Save" and a "Cancel" button to the bottom of the editor itself, to make it more userfriendly. Because pushing the "collapse" button to save the text does not feel intuitive enough. Also, in my current solution there is no real option to "cancel" the editting of a part, unless you refresh the page.

This is why I would like to implement the "Save" and "Cancel" button to the bottom of the Editor itself ( to replace the behaviour that is currently attached to the toolbar-collapse - button.


Last edited by UltimateWeapon on Fri Jan 07, 2011 11:19 am, edited 2 times in total.

Ultimate Weapon

  • Username: UltimateWeapon
  • Joined: Thu Jan 06, 2011 2:54 pm
  • Posts: 4
  • Offline
  • Profile
Tags:

Re: Adding 2 simple buttons to the Rich Text Editor

Post Posted: Mon Jan 10, 2011 10:27 am
+0-
I just want to let you all know that i'll still be very interested in a bit of help for this one :)

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile

Re: Adding 2 simple buttons to the Rich Text Editor

Post Posted: Mon Jan 10, 2011 10:30 am
+0-
Refer to my first post, it's still very valid. All you have to do is put a div around the textarea, then add your buttons to it. And instead of hiding the Editor's container, hide the container around it. Then attach some listeners to the buttons and your done..

Ultimate Weapon

  • Username: UltimateWeapon
  • Joined: Thu Jan 06, 2011 2:54 pm
  • Posts: 4
  • Offline
  • Profile

Re: Adding 2 simple buttons to the Rich Text Editor

Post Posted: Mon Jan 10, 2011 10:49 am
+0-
I don't think i fully understand how it all works. For example, i got the following 2 pieces of code:

The following is inside the "toolbarLoaded"-event:
Code:
Dom.setXY(this.get('element_cont').get('element'), [-99999, -99999]);



The following is inside a click event:
Code:
Dom.setXY(myEditor.get('element_cont').get('element'), xy);



This all works perfectly fine, but the one thing I do not understand is where the names "element_cont" and "element" come from. When I do a search for these values, i can't find it anywhere else. But I do know that when i change "element_cont" to say "element_container_1" that the whole script doesn't work anymore, although i never had to assign the id "element_cont" myself.

Now, the problem is, that, since I don't know where it comes from, i also don't know how to put a div around it succesfully.
Maybe there is some tutorial or a certain part in the API that i'm missing, but I've been googling, searching, and I honoustly don't know where to look.

I'll also note out that I have never used YUI ever before, i'm really a newbie :oops:
  [ 6 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum