WYSIWYG for script.aculo.us InPlaceEditor (Using TinyMCE)

[base....@gmail.com]

Is i promised, here is my solution: http://groups.google.com/group/
rubyonrails-spinoffs/web/wysiwyg-for-script-aculo-us-inplaceeditor-
using-tinymce

Everyone is welcome in case you found any bugs or have any suggestions
and/or improvements!

[Colin Mollenhour]

Bookmarking this one, I'm sure it will come in handy!
You may even consider submitting it to
http://www.prototypejs.org/2007/2/1/a-call-to-prototype-developers
even though it is really more of a Script.aculo.us extension. In fact
the SAU wiki has a page that would be fitting: http://
wiki.script.aculo.us/scriptaculous/show/RealWorldUsage

Thanks
Colin

[ezhanghao]

How can the save_text.php receive the large Text?

[base....@gmail.com]

ezhanghao, what do you mean? save_text.php receives text via post
request, so it can be pretty large..

[RobG]

On Feb 15, 1:16 am, "base.wi...@gmail.com" <base.wi...@gmail.com>
wrote:

The demos provided don't work in Safari, it's over 350KB of (mostly)
obfuscated code and hence impossible to debug or fix.

Sorry, no sale.

--
Rob

[base....@gmail.com]

What demos are you talking about?

[RobG]

On Feb 15, 8:40 pm, "base.wi...@gmail.com" <base.wi...@gmail.com>
wrote:

> What demos are you talking about?

I presume you're replying to me.

<URL: http://tinymce.moxiecode.com/example.php?example=true >
<URL: http://tinymce.moxiecode.com/example_advanced.php?example=true >
<URL: http://tinymce.moxiecode.com/example_full.php?example=true >
<URL: http://tinymce.moxiecode.com/example_word.php?example=true >
<URL: http://wiki.moxiecode.com/examples/tinymce/
installation_example_00.php >

Take your pick.

--
Rob

[Stealthie]

Hi,

Quick question. I have been trying to find out how to default the
inplace editor to wysiwyg mode but havnt been able to. how hard would
this be to do ?

Thanks

Antony

On Feb 15, 1:16 am, "base.wi...@gmail.com" <base.wi...@gmail.com>
wrote:

[base....@gmail.com]

Hi!

I've updated controls.js a little, so now InPlaceEditor has a new
option - veIsOn. If you set it to true, the editor will be turned on
by default. Download controls (2).js (http://rubyonrails-
spinoffs.googlegroups.com/web/controls%20%282%29.js), replace old one
with it, add "veIsOn: true" to your InPlaceEditor object
initialisation and the job is done :)

[Colin Mollenhour]

I highly recommend you develop this as an extension to IPE rather than modifying an SAU library file.
I.e. create a new class with it's own initialize function, Object.extend it with IPE, call IPE's initialize, add your features to it, etc...

Modifying a library file kills maintainability..

Colin

[base....@gmail.com]

You are right, Colin, I'll try to create something like that. I am
just not much into javascript's object model and it would take some
time to make myself comfortable with it :)

[Colin Mollenhour]

This works, but I really wonder if it is the proper way.. It seems like
there are two objects being created and only one is being returned so
the user really doesn't have access to the second one.

var Ajax.ExtendedInPlaceEditor = Class.create();
Object.extend(Ajax.ExtendedInPlaceEditor .prototype,
Ajax.InPlaceEditor.prototype);
Object.extend(Ajax.ExtendedInPlaceEditor .prototype, {
initialize: function(element, url, options) {
Object.extend(new Ajax.InPlaceEditor(element, url, Object.extend({
newOption: false,
overriddenOption: true,
}, options || {})), this);
//more initialization if necessary
},
createEditField: function() {
...
}
});

Maybe the better way would be to save the original initialize function
under a different name before calling the second Object.extend and then
calling it inside the new initialize? However, if this wouldn't play
well with multiple inheritance if you always used the same name for the
old initialize.. Anyone have a better way to extend a Prototype class
that let's you call the original initialize function?

Unfortunately I've found every time I need to add features to IPE I
always have to overwrite createEditField or some other function, but a
lot of the code is copied. It really needs more "hooks" implemented so
that you can add functionality simply by passing functions in the
options or extending the prototype with new functions. For example, an
onCreateEditField that is called after createEditField would let you do
stuff like attach a popup calendar or WYSIWYG editor without overriding
anything and without any code redundancy.

Colin

[Sébastien Grosjean - ZenCocoon]

Hi all,

I saw couple of person looking for a script to put on top of
script.aculo.us' InPlaceEditor and has I also had this need I brought
something up called InPlaceRichEditor

You can find more about it on http://inplacericheditor.box.re

It actually had been tested and works on FF1.5, FF2, IE 6, IE7, Opera
9.1

The site contain actually just few infos about it (overview and demo)
but gonna be improve soon.
Please does not hesitate If you have any questions, comments,
improvements, tips, ...
--
Sébastien Grosjean - ZenCocoon

[sole...@gmail.com]

1st: I am constantly getting errors like:
this.getDoc() has no properties

2nd: the toggle feature is a bit inconsistent. If I set veIsOn : true,
click to edit once, cancel or save, then click to edit a second time,
it automatically switches to the textarea. It will then stay as the
text editor until I press the toggle button.

3rd: Since adding this, my standard input field has converted to a
tinyMCE field as well. I don't want it to affect my single line
inputs.

What's the status on these bugs.

Also, can this be converted into something (external) that won't get
erased when I install the next version of Prototype or Scriptaculous?

[rud.s...@googlemail.com]

Hi Valentine,

I am currently trying out your inPlaceEditor and I am happy with so
far as it helps with the CMS I am developing in Rails at the moment.

However, when you click cancel and go into in-place editing right
after again, the textfield does not switch into WYSIWYG mode anymore.
That behaviour is correct, because you do not disconnect the editor
instance form the DOM tree on cancel.

I've added your toggle script to the onclickCancel function in the
modified controls.js:
/* begin TinyMCE addon */
if (this.options.veButton && this.options.veIsOn) {
this.veToggle();
}
/* end TinyMCE addon */

That resolves the problem.
I hope this helps :-)

[Sébastien Grosjean - ZenCocoon]

Hi,

Why don't you try http://inplacericheditor.box.re ?

It's external to keep prototype and script.aculo.us easy to update (as
well as this lib by the way)

It actually had been tested and works on FF1.5, FF2, IE 6, IE7, Opera
9.1

And I don't get the problem you describe with it.

Next release coming out soon ;-)

Hope this help

--
Sébastien Grosjean - ZenCocoon

[Walter Lee Davis]

Will the next release support Safari? I get nothing but a spinning
cursor when I click on the text in your demos.

Walter

[tahi...@gmail.com]

Is there a way to open tinyMce from a Image in place of DIV

[Sébastien Grosjean - ZenCocoon]

Hi,

I didn't tried it but I guess it should work if you are using
http://inplacericheditor.box.re

Let me know if you fine any problem with it.

--
Sébastien Grosjean - ZenCocoon

[Sébastien Grosjean - ZenCocoon]

Hi,

Actually I still don't have any MacOS running so will not be able to
make it working on Safari yet. I hope to get a Mac early this summer,
and of course release a new version running on Safari, if it's still
not done by somebody else ;-)

Really busy this days, I hope to get the next small release out this
week.

--
Sébastien Grosjean - ZenCocoon

[Peter De Berdt]

On 24 Apr 2007, at 16:00, Sébastien Grosjean - ZenCocoon wrote:

Actually I still don't have any MacOS running so will not be able to

make it working on Safari yet. I hope to get a Mac early this summer,

and of course release a new version running on Safari, if it's still

not done by somebody else ;-)

Really busy this days, I hope to get the next small release out this

week.

The inplace replacement seems to be working on Safari already, but considering TinyMCE itself is not Safari compatible (at least the current Safari/Webkit version in Tiger), it shouldn't work at this time. Maybe someone can have a look with the latest nightly build to see if it works with the latest webkit.

Best regards

Peter De Berdt

[Gustavo Novaro]

I strongly recommend try use other that http://www.fckeditor.net/
is free, open source, support other browsers. Good luck.