TinyMCE integration / migration to YUI 3?

Hi all,

still trying to adapt the rich text editor component for my needs...

Since fckeditor will be removed from Orbeon 3.9 and YUI RTE 2.6.0
doesn't support p tags reliably, IMHO there's urgent need for a powerful
rich text editor that at least allows editing standard HTML content. I
think i'm not the only one who's in need of a RTE component that's at
least able to handle HTML 4 markup.

Has anyone tried (and, maybe, succeeded) integrating the TinyMCE editor
as RTE component? Or any hints how to upgrade the YUI components to 3.x?
What about CKEditor 3.x?


Any hints are appreciated...
florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Florian,

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Erik,

> Do you know if YUI 3.0 would solve this?

i'm not sure - and it seems that YUI 3 is still beta regarding many
components, including the RTE. Because of that, i thought about choosing
TinyMCE, as that's a widely-used and feature-rich RTE component. But
i'll give the YUI 3 RTE a try and report the results.

> One way to go about integrating another editor might be to write an
> XBL component instead.

i thought about this already but i'm not sure about how to implement
this. XBL is completely new for me, and i ran into some problems trying
to follow the tutorial in the wiki. I'll need some time to investigate
this further.
florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Shot update:

> i'm not sure - and it seems that YUI 3 is still beta regarding many
> components, including the RTE. Because of that, i thought about choosing
> TinyMCE, as that's a widely-used and feature-rich RTE component. But
> i'll give the YUI 3 RTE a try and report the results.

After some steps trying to upgrade to YUI 3.3.0, i don't think that this
is a reasonable alternative. It's unclear to me whether the RTE
component is already available with a full GUI (i don't think so, the
online examples are quite "frugal"...). In addition, it seems to me that
the majority of the YUI 2 Utility / Widget Object libs (connection,
element, container, button, calendar, menu and so on) aren't available
yet (or they aren't required for YUI 3 any more???), and i'm not
sufficiently familiar with the YUI integration into orbeon to handle
those missing dependencies.

Would be glad about any help regarding the integration of TinyMCE or
CKEditor 3 as RTE component...

florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Florian,

The YUI team is working on getting a RTE in YUI 3 that can be used to
replace the full-featured one in YUI 2, but there aren't there yet,
and I am not sure how soon this will be done. You are saying that the
YUI 2.6 RTE doesn't handle <p> reliably. Have you checked if this has
been resolved in YUI 2.8.1, the version currently used by Orbeon
Forms?

Alex

On Wed, Feb 23, 2011 at 12:09 AM, Florian Schmitt
<[hidden email]> wrote:

--
Orbeon Forms - Web forms, open-source, for the Enterprise -
http://www.orbeon.com/
My Twitter: http://twitter.com/avernet


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Alex,

> You are saying that the
> YUI 2.6 RTE doesn't handle <p> reliably. Have you checked if this has
> been resolved in YUI 2.8.1, the version currently used by Orbeon
> Forms?

I've tested with diverse builds from the last two weeks, and the
problem's still there. As i was told in the YUI forums, the p handling
problem is a design matter - the YUI 2 RTE wasn't designed to handle p
elements.

florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Florian,

I am curious: do you have a link to that discussion you are referring to?

Alex

On Fri, Feb 25, 2011 at 1:47 AM, Florian Schmitt
<[hidden email]> wrote:

--
Orbeon Forms - Web forms, open-source, for the Enterprise -
http://www.orbeon.com/
My Twitter: http://twitter.com/avernet


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Alessandro,

> I am curious: do you have a link to that discussion you are referring to?

The newest one:

http://yuilibrary.com/forum/viewtopic.php?f=89&t=4405&hilit=rte

It seems that the issue discussed there was some sort of FAQ, but i
can't find more information at the moment. Anyway, Dav's answer is
quite clear, i think.

florian


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Florian,

And I assume that using the RTE in the mode where it generated <br>
—which based on Dav's comment seems to be working better in YUI 2—
doesn't work for you? Even if you do some post-processing on what the
RTE generates to replace the add <p> where appropriate?

Alex

On Sat, Feb 26, 2011 at 1:11 AM, Florian Schmitt
<[hidden email]> wrote:

--
Orbeon Forms - Web forms, open-source, for the Enterprise -
http://www.orbeon.com/
My Twitter: http://twitter.com/avernet


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Alex,

> And I assume that using the RTE in the mode where it generated <br>
> —which based on Dav's comment seems to be working better in YUI 2—
> doesn't work for you? Even if you do some post-processing on what the
> RTE generates to replace the add <p> where appropriate?

I'm afraid that's no solution. The first problem is the constraint
"where appropriate" - how should the user or i decide whether a <br> is
a <br> or a <p>? Next point: i don't use the RTE component just for
short three-line comments or something like that. Regarding my app,
users should be able to create and edit longer parts of text where
paragraphs are simply necessary as building blocks and elements of
structure. They're the base for cross-references, css rules and so on,
so that's far too error-prone, it's definitely not a robust solution.

Last but not least, i'm not keen on discovering more "easter-eggs" like
the malfunction of the ptags option (do the YUI 2 API docs still offer
that config option as a remedy for the handling of p tags?). I've
already lost too much time trying to adapt the YUI RTE, and IMHO it
doesn't make much sense investing even more time into it - since any
solution will be obsolete after YUI 3 has reached stable state.

florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Florian,

On Wed, Mar 2, 2011 at 2:13 AM, Florian Schmitt
<[hidden email]> wrote:
> Last but not least, i'm not keen on discovering more "easter-eggs" like
> the malfunction of the ptags option (do the YUI 2 API docs still offer
> that config option as a remedy for the handling of p tags?). I've
> already lost too much time trying to adapt the YUI RTE, and IMHO it
> doesn't make much sense investing even more time into it - since any
> solution will be obsolete after YUI 3 has reached stable state.

Yes, I agree, it isn't clear to me how quickly the YUI 3 RTE will
mature, in particular as it seems Dav is spending now most of its
energy on improving YUI's node.js support. Maybe the way to go would
be to create an XBL component that encapsulates the FCK editor or
TinyMCE, and if you are willing to share it back with the community,
it could be useful to others like you who are not well served by YUI
2's RTE. If this is a route you want to explore, we'll do our best if
you have questions about XBL

Alex
--
Orbeon Forms - Web forms, open-source, for the Enterprise -
http://www.orbeon.com/
My Twitter: http://twitter.com/avernet


--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Alex,

> Maybe the way to go would be to create an XBL component that
>  encapsulates the FCK editor or TinyMCE, and if you are willing to
>  share it back with the community, it could be useful to others like
>  you who are not well served by YUI 2's RTE.

using the Wiki documentation and the other XBL examples, i've managed to
create a basically working XBL component. It encapsulates the current
TinyMCE code (3.3.9.3) and allows for custom configuration the same way
as it's possible currently with the YUI RTE. I've added a zip containing
the xbl together with a sandbox XHTML file that "showcases" two TinyMCE
editor instances, one with my default config as defined in the XBL, the
second with a custom config defined in the sandbox xhtml.

It's mainly based on the currency xbl, as that xbl implements two input
controls: a hidden xforms:input and a visible xhtml:input. For the
TinyMCE XBL, i used a similar construct: a hidden xforms:input as "link"
between the xforms model and the xbl, and a xhtml:div that gets
transformed into a TinyMCE instance.

It stills needs a lot of more work anyway, regarding i18n, performance
improvements, testing and elaborated default configuration, but i hope
it may serve as starting point for further work. I tested it only on
Firefox, not with IE. It seems to work basically, accepting instance
data (escaped html content) as initialization content and updating the
instance with its changes.

I've decided not to update the xforms instance automatically but only on
user interaction (trigger: "commit changes"). So, there are still some
severe issues:
- If the user doesn't commit modifications to the xforms model, they get
lost if the user navigates to an other page. TinyMCE offers
functionality to check if editor content is modified ("dirty"), which
should be implemented ind the XBL.
- if the instance data is changed by any other means then the xbl, user
modifications in the editor window may be lost and get overwritten by
instance data.

I would be glad about any other ideas and feedback how to improve this
XBL. Although i will continue working on it, i've already put it into an
"acme" namespace, indicating that "adopting" it into any other namespace
is welcome :-).

florian



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Hi Florian,

I tried your example and was able to integrate it in my app. Could you tell me how to resolve the page not found issue when I click on the emoticon icon on the RTE.

regards
--SD

SD,

> I tried your example and was able to integrate it in my app. Could you tell
> me how to resolve the page not found issue when I click on the emoticon icon
> on the RTE.

The emoticon button is a shortcut to run TinyMCE's "emotions" plugin.
So, you should start with cheking if that plugin is available. In the
zipped XBL component i've posted, i included all plugins from the
standard TinyMCE package, including "emotions". It's located
in /acme/tinymce/jscripts/tiny_mce/plugins.

Another approach would be to use a tool like firebug to check which
resource is missing. With the network module activated, firebug shows
the HTTP traffic including HTTP status, URL, size and timeline. This
way, you're able to identify which resource was requested but not
available.

HTH
florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Florian,

fl.schmitt(ops-users) wrote

The emoticon button is a shortcut to run TinyMCE's "emotions" plugin.
So, you should start with cheking if that plugin is available. In the
zipped XBL component i've posted, i included all plugins from the
standard TinyMCE package, including "emotions". It's located
in /acme/tinymce/jscripts/tiny_mce/plugins.

I took the entire zipped component and placed it in the orbeon-resources-private.jar under the lib folder. I verified the path which shows on firebug and the contents of the jar. The plugin seems to be located at the right place. Still I get a page not found.

This is the URL that I was able to see via firebug

http://localhost/XXXXXX/xbl/acme/tinymce/jscripts/tiny_mce/plugins/emotions/emotions.htm

I'm still clueless on this.

Thanks
--SD

Florian,

fl.schmitt(ops-users) wrote

I've decided not to update the xforms instance automatically but only on
user interaction (trigger: "commit changes"). So, there are still some
severe issues:

can you guide me; how to auto update on focus out.

Thanks
--SD

SD,

> I took the entire zipped component and placed it in the
> orbeon-resources-private.jar under the lib folder. I verified the path which
> shows on firebug and the contents of the jar. The plugin seems to be located
> at the right place. Still I get a page not found.

hmm - the Wiki recommends to put custom XBLs into the resources
directory of your XForms application:

http://wiki.orbeon.com/forms/doc/developer-guide/xbl-components-guide#TOC-Copying-an-existing-component

Maybe you should move the XBL from the orbeon-resources-private.jar to
that directory.

> This is the URL that I was able to see via firebug

> http://localhost/XXXXXX/xbl/acme/tinymce/jscripts/tiny_mce/plugins/emotions/emotions.htm

what happens if you open that URL manually? What about the other TinyMCE
plugins, do they work?


florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

SD,

> can you guide me; how to auto update on focus out.

1. register an event handler to observe focus-out events:
http://wiki.orbeon.com/forms/doc/developer-guide/xbl-components-guide#TOC-Component-user:-registering-event-h

2. let the XBL listen to the observed events:
http://wiki.orbeon.com/forms/doc/developer-guide/xbl-components-guide#TOC-Component-author:-listening-for-eve

3. handle the event in the XBL's JavaScript code. There's already a
function "commitChanges" included with the TinyMCE XBL to write the RTE
content to the instance:

commitChanges: function() {
    ORBEON.xforms.Document.setValue(this.xformsInputElement.id,
tinyMCE.get(this.myDivId).getContent());
}


HTH
florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

I was having similar problems while trying to access several plugins. I believe the problem is that Orbeon does not directly serve requests for .htm files by default. Edit tomcat/webapps/orbeon/WEB-INF/resources/page-flow.xml and add "|htm" to the list of files to serve directly.

<files path-info="(?!/([^/]+)/service/).+\.(gif|css|pdf|json|js|png|jpg|xsd|htc|ico|swf|html|txt|htm)" matcher="oxf:perl5-matcher"/>

If there is a cleaner way to do this, please let me know.

David Lacy
Falvey Library Technology Services
Villanova University
library.villanova.edu
610-519-7361

-----Original Message-----
From: Florian Schmitt [mailto:[hidden email]]
Sent: Friday, August 26, 2011 3:59 AM
To: [hidden email]
Subject: [ops-users] Re: Re: Re: TinyMCE integration / migration to YUI 3?

SD,

> I took the entire zipped component and placed it in the
> orbeon-resources-private.jar under the lib folder. I verified the path
> which shows on firebug and the contents of the jar. The plugin seems
> to be located at the right place. Still I get a page not found.

hmm - the Wiki recommends to put custom XBLs into the resources directory of your XForms application:

http://wiki.orbeon.com/forms/doc/developer-guide/xbl-components-guide#TOC-Copying-an-existing-component

Maybe you should move the XBL from the orbeon-resources-private.jar to that directory.

> This is the URL that I was able to see via firebug

> http://localhost/XXXXXX/xbl/acme/tinymce/jscripts/tiny_mce/plugins/emo
> tions/emotions.htm

what happens if you open that URL manually? What about the other TinyMCE plugins, do they work?


florian




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Thanks David. It worked !!!