Aha!
Thanks Werner,
The key was to stick the javascript after the input (and remove the
style). I'd tried a large permutation of these things, but it didn't
occur to me that the javascript needed to be after the input area.
Here's what I ended up doing (in facelets).
Put this in the <head> tags:
<sandbox:dojoInitializer require="dojo.widget.Editor"/>
Put this in the form:
<h:inputTextarea id="contentHtmlEditArea"
required="#{true}"
value="#{createSimpleAnnouncementPage.text}"/>
<script type="text/javascript">
// <![CDATA[
var editorArgs = {
items: ["textGroup", "blockGroup", "justifyGroup", "colorGroup",
"listGroup", "indentGroup", "linkGroup"]
};
var editor = dojo.widget.fromScript("Editor", editorArgs,
dojo.byId("form:contentHtmlEditArea"));
// ]]>
</script>
I decided to stick with the standard jsf inputAreaText component and
use the fully-qualified path to the component (form-id : component-id)
rather than using forceid.
I agree that <s:richEdit id="editor"/> would be better. It seems to
me that we could make such a tag emit the same code as I just created
manually, at least in the short term.
I was considering altering t:inputTextArea to support a passthrough
"items" attribute as a temporary workaround, but it would have been
quite a hack.
I'll go ahead and update the wiki.
On 2/17/06, Werner Punz <[EMAIL PROTECTED]> wrote:
> Hi Mike I can only give pseudo code here,
> first of all, in an actual JSF page I would like to see
> code like this
>
> <s:richEdit id="editor"/>
>
> but we cannot have that for now:
>
> if you want to see the rich editor in action in a jsf page and if you
> want to pass the parameter as well, use a normal textArea
> (not the div because the div is not triggered on submit)
>
> <t:inputTextarea id="myId" forceId="true" />
>
> and then set a javascript in a verbatim area with following entries
> (we forget the internal dojo id for now, since you wont need it here)
> <f:verbatim>
> <script type="text/javascript">
> var editorArgs = {
> items: ["textGroup", "blockGroup", "justifyGroup",
> "colorGroup",
> "listGroup", "indentGroup", "linkGroup"]
> };
> var editor = dojo.widget.fromScript("Editor", editorArgs,
> dojo.byId("myId"));
>
> </script>
>
> </f:verbatim>
>
>
> that should work more or less
>
> what happens here
>
> first you define a text area in a form, so that we trigger the normal
> jsf submits etc...
>
> secondly dojo now alters the text area into a full blown rich text editor
> via the fromScript function (the first argument specifies the widget
> the text area has to be altered to, the second one the arguments passed
> down to the area, the third argument is the id of the original control)
>
> now if you submit the altered control recongnizes that passes
> the content into the original control (which still is lingering there
> hidden) and the cycle goes through as expected.
>
> the reason why this code does not give you a second editor while
> your code does is following line:
>
> > <h:inputTextarea id="contentHtmlEditArea"
> > styleClass="dojo-Editor"
> !!!!!!!!!!!!!!!!!!!!!!!!!!!!!
>
> what happens here is that you explicetly pass the
> styleClass="dojo-Editor" which in itself also creates the dojo editor
> you also trigger the editor creation script, hence you create
> two editors from one single control (both internally with different ids)
>
> you have two options, either remove the javascript for the component
> creation, or remove the styleClass with the dojo-Editor style.
> But having both results in two editors.
>
> So basically for most if not every component you have three ways
> to create it dynamically
> a) use the html validation breaking dojo tags
> b) use a script to alter an existing control dynamically
> c) use a special styleclass
>
> but combining 2 of these options results in a mess ;-)
>
>
> I hope that sums it up (never mind all this dynamic stuff, if you
> are not used to dynamic languages, they can be altered and adjusted
> into the core, the same goes for the data structures like for instance
> the dom tree)
>
>
>
> Mike Kienenberger schrieb:
> > On 2/17/06, Werner Punz <[EMAIL PROTECTED]> wrote:
> >> But I think you get the idea....
> >
> > You're giving me far too much credit. I don't understand the
> > difference between what you said here and earlier :)
> >
> > How does this look on an actual JSF page?
> >
> > I tried sticking this in the <head> tags
> >
> > <script type="text/javascript">
> > // <![CDATA[
> > var editorArgs = {
> > id:"theinternaldojoid",
> > items: ["textGroup", "blockGroup", "justifyGroup",
> > "colorGroup",
> > "listGroup", "indentGroup", "linkGroup"]
> > };
> > var editor = dojo.widget.fromScript("Editor", editorArgs,
> >
> > dojo.byId("form:contentHtmlEditArea"));
> > // ]]>
> > </script>
> >
> > And this on my form:
> >
> > <h:inputTextarea id="contentHtmlEditArea"
> > styleClass="dojo-Editor"
> > required="#{true}"
> > value="#{createSimpleAnnouncementPage.text}"/>
> >
> > but I keep ending up with two separate input editors -- one that looks
> > how I want it, but with no binding to a JSF component, and one that is
> > decorated wrong, but is bound to the JSF component.
> >
> > If you can explain it to me in terms a non-javascript person can
> > understand, I can then update either the wiki and/or the dojo example
> > so others like myself can use it.
> >
> > :-)
> >
>
>
