Announcement

**Isomorphic** · 10 Nov 2011, 10:02

If you want to surround some text with XML tags *which are actually shown to the user*, that's not a rich text editor at all, just a TextAreaItem and a function to add tags around it's current value.

**christoferjennings** · 10 Nov 2011, 10:23

I don't want the user to see the tags. The text in the tags will get color coded via CSS and then will be parsed into particular kinds of data structures on the server-side.
,chris

**Isomorphic** · 10 Nov 2011, 10:30

You mentioned XML tags but you're talking about applying CSS. Did you mean you're going to use eg <span>s but you're trying to make it XHTML?

Because if these are truly arbitrary XML tags and not just XHTML (eg <myCustomTag>, we're not intimately familiar with how tinyMCE handles non-HTML tags, but you might find that it's an uphill battle to get a RichTextEditor that's primarily oriented around normal HTML tags to preserve your special XML tags.

**christoferjennings** · 10 Nov 2011, 11:25

Span tags with class names and extra attributes will work. ... Sorry, I was too general when I said custom xml tags.

**Isomorphic** · 10 Nov 2011, 11:32

TinyMCE or another third-party rich text editor may make sense for this, however, it sounds like you would basically remove *all* of the built-in styling controls (indents, tables, bold, fonts, etc) and use lower-level APIs, and you may still run into issues with the rich text editor rewriting your HTML to simplify or normalize it, because they typically do so in order to work around weird things that browsers do as you're typing in an editable DIV (such as introducing superfluous or non-standard tags).

If so you may be looking for something more raw, along the lines of WysiHat, or you may even want to go direct-to-DOM. Note, we haven't actually tried WysiHat, just pointing it out as an example of the lower-level APIs you might need.

**christoferjennings** · 10 Nov 2011, 15:32

WysiHat looks interesting. It depends on prototype.js. Are there any know issues using prototype with SmartClient / SmartGWT?

**Isomorphic** · 10 Nov 2011, 15:34

Not that we are aware of. We took some steps to avoid clashes on functions that both SmartClient and prototype add to the native Array that were reported by a user whose app extensively used both libraries. There could be further incompatibilities of this kind but they have never been reported.

**christoferjennings** · 10 Nov 2011, 19:57

There does seem to be a conflict with prototype.js.

From my html...

Code:

    <script type="text/javascript" src="js/prototype.js"></script>

Exception happens on my ItemPage on this line...

Code:

        valuesManager.addMember(myForm);

The Exception...

Code:

ERROR: Unable to load module entry point class my.stuff.client.core.Main (see associated exception for details). com.google.gwt.event.shared.UmbrellaException: One or more exceptions caught, see full set in UmbrellaException#getCauses
	at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:129)
	at com.google.gwt.user.client.impl.HistoryImpl.fireEvent(HistoryImpl.java:75)
	at com.google.gwt.event.logical.shared.ValueChangeEvent.fire(ValueChangeEvent.java:43)
	at com.google.gwt.user.client.impl.HistoryImpl.fireHistoryChangedImpl(HistoryImpl.java:82)
	at com.google.gwt.user.client.History.fireCurrentHistoryState(History.java:121)
	at my.stuff.client.core.Main.onModuleLoad(Main.java:43)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:597)
	at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
	at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
	at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
	at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
	at java.lang.Thread.run(Thread.java:680)
Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): iterator.call is not a function
	at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
	at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
	at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
	at com.smartgwt.client.widgets.form.ValuesManager.addMember(ValuesManager.java)
	at my.stuff.client.item.ItemPage.<init>(ItemPage.java:92)
	at my.stuff.client.core.PageManager.showPage(PageManager.java:63)
	at my.stuff.client.core.PageManager$HistoryValueChangeHandler.onValueChange(PageManager.java:106)
	at com.google.gwt.event.logical.shared.ValueChangeEvent.dispatch(ValueChangeEvent.java:128)
	at com.google.gwt.event.logical.shared.ValueChangeEvent.dispatch(ValueChangeEvent.java:1)
	at com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1)
	at com.google.web.bindery.event.shared.EventBus.dispatchEvent(EventBus.java:40)
	at com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193)
	at com.google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java:88)
	at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127)
	at com.google.gwt.user.client.impl.HistoryImpl.fireEvent(HistoryImpl.java:75)
	at com.google.gwt.event.logical.shared.ValueChangeEvent.fire(ValueChangeEvent.java:43)
	at com.google.gwt.user.client.impl.HistoryImpl.fireHistoryChangedImpl(HistoryImpl.java:82)
	at com.google.gwt.user.client.History.fireCurrentHistoryState(History.java:121)
	at my.stuff.client.core.Main.onModuleLoad(Main.java:43)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:597)
	at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
	at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
	at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
	at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
	at java.lang.Thread.run(Thread.java:680)

Any ideas?
,chris

**christoferjennings** · 11 Nov 2011, 08:45

I moved the prototype script so it loads first. Exception went away! :)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>My Title</title>

    <!-- WysiHat & prototype for MarkingEditor -->
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/wysihat.js"></script>


    <!-- IMPORTANT : You must set the variable isomorphicDir to [MODULE_NAME]/sc/ so that the SmartGWT resource are
       correctly resolved -->
    <script> var isomorphicDir = "mystuff/sc/"; </script>

    ....

Still haven't got it to work, but the errors are coming from loading the widget in WysiHat, not apparently conflicting with SmartClient.

Posting this for reference only, not asking for Isomorphic help on WysiHat...

Code:

ERROR: Uncaught exception escaped. com.google.gwt.core.client.JavaScriptException: (TypeError): textarea is null
	at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
	at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
	at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
	at my.stuff.client.widgets.MyEditor.initEditor(MyEditor.java)
	at my.stuff.client.widgets.MyEditor.access$1(MyEditor.java:45)
	at my.stuff.client.widgets.MyEditor$1$1.execute(MyEditor.java:30)
	at com.google.gwt.core.client.impl.SchedulerImpl$Task$.executeScheduled$(SchedulerImpl.java:50)
	at com.google.gwt.core.client.impl.SchedulerImpl.runScheduledTasks(SchedulerImpl.java:228)
	at com.google.gwt.core.client.impl.SchedulerImpl.flushPostEventPumpCommands(SchedulerImpl.java:388)
	at com.google.gwt.core.client.impl.SchedulerImpl$Flusher.execute(SchedulerImpl.java:78)
	at com.google.gwt.core.client.impl.SchedulerImpl.execute(SchedulerImpl.java:138)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:597)
	at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
	at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
	at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
	at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)
	at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)
	at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
	at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
	at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
	at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:597)
	at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
	at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
	at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
	at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)
	at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)
	at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
	at java.lang.Thread.run(Thread.java:680)

MyEditor.initEditor...

Code:

    private native void initEditor(String elementId) /*-{
        var editor = $wnd.WysiHat.Editor.attach(" + elementId + ");
        var toolbar = new $wnd.WysiHat.Toolbar(editor);
        toolbar.addButtonSet($wnd.WysiHat.Toolbar.ButtonSets.Basic);
    }-*/;

Announcement

Customizing RichTextEditor?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment