html editor: insert text at cursor

Hi! I was wondering if anyone has found a way to get the position of the insertion cursor in the (YUI) HTML editor so that text could be inserted at that point (from a menu).

Anyone?

BTW - I did look at this post:

http://orbeon-forms-ops-users.24843.n4.nabble.com/inserting-text-into-an-RTF-textarea-td2228161.html#a2228495

and

http://developer.yahoo.com/yui/editor/#plugins

but I could use some help with how to actually write the javascript.

Hi Francis,

> Hi! I was wondering if anyone has found a way to get the position of the
> insertion cursor in the (YUI) HTML editor so that text could be inserted at
> that point (from a menu).

i'm sorry - i didn't found time to write some lines about this yet.
For now, i've attached a zip containing a simple example. Just unzip it
into orbeon/WEB-INF/resources; it adds an additional app and a
javascript file. Then, open http://localhost:8080/orbeon/custom_yuirte/
which should display the example page. Clicking on "Show dialog 1"
should display the modified YUI RTE.

The two components of the javascript example are:

YUI_RTE_CUSTOM_CONFIG - a constant containing the definition of a custom
YUI RTE config with a new custom button to insert the html code (lines
64-76);

initYuiEditor() - a function to "search" and initialise the YUI RTE. To
add your custom event handlers, you'll first have to get a grip on the
YUI RTE javascript object. I didn't find a better way than to just
search the DOM for an appropriate object by name.
When the RTE object is available, your're able to define a custom event
handler to react when the user clicks the custom button defined in the
custom config.
In my example, the value of the button is "insertFoo" (line 76), so in
line 105, the event handler is told to fire on the "insertFooClick" event.
The event handler code contains the content to insert.

Further remarks:
- the javascript is just some sort of proof-of-concept;
- The label of the custom button is missing - no idea why...
- it won't work out-of-the-box to insert non-html tags - see [1].
Inserting the custom tag inside the editor works, but the tag will be
stripped when the editor content is written to the xforms instance.


HTH
florian

[1]
http://orbeon-forms-ops-users.24843.n4.nabble.com/YUI-RTE-Customisation-td1556372.html#a1558753



--
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-

thanks for the reply. I got the zip and copied it, but I ran into this run-time error (I'm using IE 7 WinXP-32):

"XPathResult" is not defined

(line 91 of the .js file.) Do you not get this?

Also, what I'm interested in doing is not inserting html from a button in the editor, but using a trigger  outside the RTE that launches a dialog so the user can select text items stored in an instance as "label/value" pairs.

It appears that what does the actual inserting is (on line 106):
this.execCommand('inserthtml', '<span style="font-weight:bold;">FOO</span>');

Do you think it will work if I have the initialization get the RTE object and put it in a global variable, then have the xforms trigger call a simple function "insertText(textFromInstance)"?

However, I'm not sure RTE would necessarily save the insertion point after the the focus is moved to the trigger outside the dialog, I'll have to try it...but since I'm not exactly sure how to handle the error I'm getting (during getting the id), I'm a little stuck.

Any help with this is appreciated!

Hi Francis,

> thanks for the reply. I got the zip and copied it, but I ran into this
> run-time error (I'm using IE 7 WinXP-32):
>
> "XPathResult" is not defined
>
> (line 91 of the .js file.) Do you not get this?

oh, you're right, document.evalute in fact seems to be a
firefox-specific function:

http://bytes.com/topic/javascript/answers/528706-ie-equivalent-firefox-document-evaluate

i don't work with IE, so i didn't see the problem.

> Also, what I'm interested in doing is not inserting html from a button in
> the editor, but using a trigger  outside the RTE that launches a dialog so
> the user can select text items stored in an instance as "label/value" pairs.

> It appears that what does the actual inserting is (on line 106):
> this.execCommand('inserthtml', '&lt;span
> style="font-weight:bold;"&gt;FOO&lt;/span&gt;');

exactly

> Do you think it will work if I have the initialization get the RTE object
> and put it in a global variable, then have the xforms trigger call a simple
> function "insertText(textFromInstance)"?

hmm - triggering the insert may work, but i think one can't set the
insertion point to a specific position of the rich-text content.

I assume the user should be able to edit some rich text content and be
able to select values from a instance-based selection? Maybe it would be
easier to implement this task completely inside the RTE, not by using a
xforms trigger or xforms:select control.

The YUI library offers menu buttons as well, so you could try to create
a YUI menu button, fill it with data based on your instance, and
integrate it into a custom YUI RTE instance. Then, you still have to get
access to the RTE object, but you don't have to worry about where to
insert the content.

On the other hand, it seems to be quite complex to fill the YUI menu
based on a xforms instance. The instance values aren't part of the DOM,
i suppose, so they are only accessible if the values are available via
xforms controls... are the label/value pairs fixed, so that they could
be placed in a javascript lib instead of a xforms instance?

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 - for some reason your last reply never made it to the (nabble)
ops-users list, so I'll reply again because I have an attachment, and am
not sure what will happen to the attachment if I reply by email.

On Wed, 30 Jun 2010 16:05:11 +0200, Florian Schmitt
<[hidden email]> wrote: in --
Francis


--
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 -

Thanks for the reply. I did some working with the code you sent (which does
work in Firefox).

<<Maybe it would be easier to implement this task completely inside the
RTE, not by using a xforms trigger or xforms:select control.>>

Well it seems to me that it would be much easier and more flexible if I was
able to use an Xforms instance and Xforms controls. Do you know if it's
possible for the javascript to build the RTE button values from the XML
instance? (I have it in a separate file).

I've attached a zip file that contains an example of what I mean. (I
changed the location of the javascript file so it's in the same folder -
just unzip under "resources/apps". In the html editor dialog, there is a
button that displays a (minimal) dialog that has a selection of text items
(from the instance). When you click on one, the value gets copied to the
main instance. Then a <xxforms:script> element gets the value of a hidden
output field in the dialog (pointing to where the text was copied to), so
it can pass it to a simple javascript function that does the
RTEEditorObject.executeCommand(). Do you know of a better way to pass
instance values to javascript?

However, it doesn't really work. It will insert text, but setting the focus
to the selection dialog seems to result in the RTF editor losing the cursor
position. In most cases, the text gets inserted at the beginning. (Except
if you insert one item after another, without moving the cursor or going to
another control). Maybe this could work if we were able to get and save the
cursor position, and then insert at that position, but I don't know how
this would work with rich text as opposed to plain text.

If you can think of anything that might get around this problem, let me
know.  (Also, I still haven't figured out how to get the ID in IE, I've
been testing this in Firefox.) I think dealing with an XForms instance
might be a lot simpler and more flexible, and of course a lot easier to
update! With an Xforms instance it would be easy to limit the items
available in the "chooser" menu based on some other instance value, which
would be a great help if there were dozens of items.


On Wed, 30 Jun 2010 16:05:11 +0200, Florian Schmitt
<[hidden email]> wrote: in --
Francis

--
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've had more problems getting this to work in IE. I looked at the YUI API, and found that this works both in IE and Firefox:
var arrResult=YAHOO.util.Dom.getElementsByClassName('xforms-control xforms-textarea xforms-mediatype-text-html xforms-mediatype-text', 'textarea');
var newid=String(arrResult[0].id);
I guess this is OK if you don't have many html textareas ;-)

However, I found that this works in Firefox but not IE (7, XP):
myEditor=YAHOO.widget.EditorInfo.getEditorById(arrResult[0]);
If you try this with IE let me know if it failed for you as well, or if you have any idea why it doesn't work with IE.

BTW, in your code, you had this:
myEditor = rteEditors[newid];
Where did "rteEditors" come from? I couldn't see it declared anywhere, and yet it worked.

In firefox you can simply give the text area an id in the xhtml and use:
myEditor=YAHOO.widget.EditorInfo.getEditorById('myTextArea');
no need to use XPath.  But I still can't get this to work in IE.

Francis,

> Well it seems to me that it would be much easier and more flexible if I was
> able to use an Xforms instance and Xforms controls. Do you know if it's
> possible for the javascript to build the RTE button values from the XML
> instance? (I have it in a separate file).

yes, it should be possible to build a menu button based on the XML.
The YUI docs have some examples showing how to populate a menu button
by javascript using a JSON syntax [1]. So you could either provide the
menu entries in JSON syntax right from the start, or parse the xml
data and convert it dynamically. If you don't need those menu entries
in another place in your xforms app, there's no need to keep it in XML
- i would put it into another js resource to make it directly
available when the YUI RTE is configured. Otherwise (menu entries in a
XML datasource), just use a XmlHttpRequest to make it available for
the YUI RTE config.

[1] http://developer.yahoo.com/yui/button/#menufromscript

> (...) If you can think of anything that might get around this problem, let me
> know.  (Also, I still haven't figured out how to get the ID in IE, I've
> been testing this in Firefox.) I think dealing with an XForms instance
> might be a lot simpler and more flexible, and of course a lot easier to
> update! With an Xforms instance it would be easy to limit the items
> available in the "chooser" menu based on some other instance value, which
> would be a great help if there were dozens of items.

hmm - i'ts true that using a xforms instance would simplify the
creation of UI elements, but it makes it harder to access the instance
values by a client-side javascript. If the sole purpose of the set of
text_items is limited to act as a source of "auto-text" entries inside
the YUI RTE, then i think it's easier to stay inside the RTE to
implement it.

With such an approach, it's still possible to limit the menu entries
based on a xforms instance. Once the YUI menu button is created,
you're able to add or remove the menu items later on. Depending on
your needs, you could even prepare some sets of menu items and change
between them dynamically. Using a xforms instance as source for the
menu items would necessitate the transfer of all the current items to
the client-side script using a mechanism like hidden xforms controls.
Instead of that, using a xforms instance value to change betweend
predefined sets of menu items reduces the complexity of the mechanism
- it should be sufficient to transfer just one value that way to
determine which menu items should be available.

HTH
florian

PS: rteEditors[] is a js array created by the orbeon engine holding
the RTE's of the current xforms page.


--
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-

Well, I guess the immediate problem for me is figuring out how to get the
reference to the RTE in IE.

<<rteEditors[] is a js array created by the orbeon engine holding  the
RTE's of the current xforms page.>>

I noticed that rteEditors does not seem to work in IE 7 (XP-32).  Could you
give this a try in IE and let me know if this should work in IE? Although I
can get the RTE id via the Yahoo API in IE, neither rteEditors[] or the
Yahoo getEditorById() seem to work in IE. Without this, I wouldn't be able
to implement this at all.

As for using Xforms Instance vs. javascript resources for storing the
"autotext" items, using xforms just seems so much simpler and flexible.
Being able to insert xforms instance values at the cursor just seems to be
something that would have many applications, something many users would
appreciate. However, as I've said, the whole thing about losing the cursor
position makes this a no go for now. I don't really have anything against
putting the text into Javascript, it just have an aversion to "hardcoding"
and it somehow seems less "extensible". Putting the data in XML does give
you the option to have it reused elsewhere in the form, and gives you
immediate access to "conditional values" that would allow you to limit the
nodeset.

Interestingly, using the xforms instance seems to work reasonably well in
Opera 10.6 - when you switch the focus from the menu to the RTE, it seems
to preserve the cursor position. Their rendering engine or javascript
engine seems to be doing something Firefox and IE isn't.

Looking at the Yahoo API docs, I couldn't find anything that allowed you to
insert the HTML at a specified position, or even get the current cursor
position. I guess without that, it wouldn't be possible to make this work
for all browsers, unless you know of anything that might be a workaround.
I haven't checked YUI 3, but I guess Orbeon is not using that now anyway. I
haven't yet considered looking at other RTE's, maybe it could be made to
work with them.

Anyway, thanks for any assistance so far.

--- Francis

On Fri, 2 Jul 2010 09:57:59 +0200, Florian Schmitt
<[hidden email]> wrote: --
Francis


--
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