From: Matti Tahvonen Date: Thu, 11 Oct 2007 11:47:27 +0000 (+0000) Subject: added RichTextEditor component. X-Git-Tag: 6.7.0.beta1~5862 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=0255e982286b46527565e0a0c78e5bd0bf46bde8;p=vaadin-framework.git added RichTextEditor component. svn changeset:2494/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/terminal/gwt/client/DefaultWidgetSet.java b/src/com/itmill/toolkit/terminal/gwt/client/DefaultWidgetSet.java index 20c0bac7e9..1fa5897909 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/DefaultWidgetSet.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/DefaultWidgetSet.java @@ -37,6 +37,7 @@ import com.itmill.toolkit.terminal.gwt.client.ui.ITwinColSelect; import com.itmill.toolkit.terminal.gwt.client.ui.IUnknownComponent; import com.itmill.toolkit.terminal.gwt.client.ui.IUpload; import com.itmill.toolkit.terminal.gwt.client.ui.IWindow; +import com.itmill.toolkit.terminal.gwt.client.ui.richtextarea.IRichTextArea; public class DefaultWidgetSet implements WidgetSet { @@ -154,6 +155,9 @@ public class DefaultWidgetSet implements WidgetSet { } else if ("com.itmill.toolkit.terminal.gwt.client.ui.IExpandLayout" .equals(className)) { return new IExpandLayout(); + } else if ("com.itmill.toolkit.terminal.gwt.client.ui.richtextarea.IRichTextArea" + .equals(className)) { + return new IRichTextArea(); } return new IUnknownComponent(); @@ -190,13 +194,13 @@ public class DefaultWidgetSet implements WidgetSet { } else if ("tree".equals(tag)) { return "com.itmill.toolkit.terminal.gwt.client.ui.ITree"; } else if ("select".equals(tag)) { - if(uidl.hasAttribute("type")) { + if (uidl.hasAttribute("type")) { String type = uidl.getStringAttribute("type"); - if(type.equals("twincol")) + if (type.equals("twincol")) return "com.itmill.toolkit.terminal.gwt.client.ui.ITwinColSelect"; - if(type.equals("optiongroup")) + if (type.equals("optiongroup")) return "com.itmill.toolkit.terminal.gwt.client.ui.IOptionGroup"; - if(type.equals("native")) + if (type.equals("native")) return "com.itmill.toolkit.terminal.gwt.client.ui.ISelect"; } else { return "com.itmill.toolkit.terminal.gwt.client.ui.IFilterSelect"; @@ -210,7 +214,9 @@ public class DefaultWidgetSet implements WidgetSet { } else if ("customlayout".equals(tag)) { return "com.itmill.toolkit.terminal.gwt.client.ui.ICustomLayout"; } else if ("textfield".equals(tag)) { - if (uidl.hasAttribute("multiline")) { + if (uidl.getBooleanAttribute("richtext")) { + return "com.itmill.toolkit.terminal.gwt.client.ui.richtextarea.IRichTextArea"; + } else if (uidl.hasAttribute("multiline")) { return "com.itmill.toolkit.terminal.gwt.client.ui.ITextArea"; } else if (uidl.getBooleanAttribute("secret")) { return "com.itmill.toolkit.terminal.gwt.client.ui.IPasswordField"; diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/IRichTextArea.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/IRichTextArea.java new file mode 100644 index 0000000000..e2af2fd2b8 --- /dev/null +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/IRichTextArea.java @@ -0,0 +1,78 @@ +package com.itmill.toolkit.terminal.gwt.client.ui.richtextarea; + +import com.google.gwt.user.client.ui.ChangeListener; +import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.FocusListener; +import com.google.gwt.user.client.ui.RichTextArea; +import com.google.gwt.user.client.ui.Widget; +import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection; +import com.itmill.toolkit.terminal.gwt.client.Paintable; +import com.itmill.toolkit.terminal.gwt.client.UIDL; + +/** + * This class represents a basic text input field with one row. + * + * @author IT Mill Ltd. + * + */ +public class IRichTextArea extends Composite implements Paintable, + ChangeListener, FocusListener { + + /** + * The input node CSS classname. + */ + public static final String CLASSNAME = "i-richtextarea"; + + protected String id; + + protected ApplicationConnection client; + + private boolean immediate = false; + + RichTextArea rta = new RichTextArea(); + + RichTextToolbar formatter = new RichTextToolbar(rta); + + public IRichTextArea() { + FlowPanel fp = new FlowPanel(); + fp.add(formatter); + + rta.setWidth("100%"); + rta.addFocusListener(this); + + fp.add(rta); + + initWidget(fp); + setStyleName(CLASSNAME); + } + + public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { + this.client = client; + id = uidl.getId(); + + if (client.updateComponent(this, uidl, true)) + return; + + immediate = uidl.getBooleanAttribute("immediate"); + + rta.setText(uidl.getStringAttribute("text")); + + } + + public void onChange(Widget sender) { + if (client != null && id != null) + client.updateVariable(id, "text", rta.getText(), immediate); + } + + public void onFocus(Widget sender) { + + } + + public void onLostFocus(Widget sender) { + String html = rta.getHTML(); + client.updateVariable(id, "text", html, immediate); + + } + +} diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/RichTextToolbar$Strings.properties b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/RichTextToolbar$Strings.properties new file mode 100644 index 0000000000..363b704584 --- /dev/null +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/RichTextToolbar$Strings.properties @@ -0,0 +1,35 @@ +bold = Toggle Bold +createLink = Create Link +hr = Insert Horizontal Rule +indent = Indent Right +insertImage = Insert Image +italic = Toggle Italic +justifyCenter = Center +justifyLeft = Left Justify +justifyRight = Right Justify +ol = Insert Ordered List +outdent = Indent Left +removeFormat = Remove Formatting +removeLink = Remove Link +strikeThrough = Toggle Strikethrough +subscript = Toggle Subscript +superscript = Toggle Superscript +ul = Insert Unordered List +underline = Toggle Underline +color = Color +black = Black +white = White +red = Red +green = Green +yellow = Yellow +blue = Blue +font = Font +normal = Normal +size = Size +xxsmall = XX-Small +xsmall = X-Small +small = Small +medium = Medium +large = Large +xlarge = X-Large +xxlarge = XX-Large \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/RichTextToolbar.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/RichTextToolbar.java new file mode 100644 index 0000000000..2c1a8d7d52 --- /dev/null +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/RichTextToolbar.java @@ -0,0 +1,492 @@ +/* + * Copyright 2007 Google Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.itmill.toolkit.terminal.gwt.client.ui.richtextarea; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.i18n.client.Constants; +import com.google.gwt.user.client.Window; +import com.google.gwt.user.client.ui.AbstractImagePrototype; +import com.google.gwt.user.client.ui.ChangeListener; +import com.google.gwt.user.client.ui.ClickListener; +import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.HorizontalPanel; +import com.google.gwt.user.client.ui.ImageBundle; +import com.google.gwt.user.client.ui.KeyboardListener; +import com.google.gwt.user.client.ui.ListBox; +import com.google.gwt.user.client.ui.PushButton; +import com.google.gwt.user.client.ui.RichTextArea; +import com.google.gwt.user.client.ui.ToggleButton; +import com.google.gwt.user.client.ui.VerticalPanel; +import com.google.gwt.user.client.ui.Widget; + +/** + * A sample toolbar for use with {@link RichTextArea}. It provides a simple UI + * for all rich text formatting, dynamically displayed only for the available + * functionality. + */ +public class RichTextToolbar extends Composite { + + /** + * This {@link ImageBundle} is used for all the button icons. Using an image + * bundle allows all of these images to be packed into a single image, which + * saves a lot of HTTP requests, drastically improving startup time. + */ + public interface Images extends ImageBundle { + + /** + * @gwt.resource bold.gif + */ + AbstractImagePrototype bold(); + + /** + * @gwt.resource createLink.gif + */ + AbstractImagePrototype createLink(); + + /** + * @gwt.resource hr.gif + */ + AbstractImagePrototype hr(); + + /** + * @gwt.resource indent.gif + */ + AbstractImagePrototype indent(); + + /** + * @gwt.resource insertImage.gif + */ + AbstractImagePrototype insertImage(); + + /** + * @gwt.resource italic.gif + */ + AbstractImagePrototype italic(); + + /** + * @gwt.resource justifyCenter.gif + */ + AbstractImagePrototype justifyCenter(); + + /** + * @gwt.resource justifyLeft.gif + */ + AbstractImagePrototype justifyLeft(); + + /** + * @gwt.resource justifyRight.gif + */ + AbstractImagePrototype justifyRight(); + + /** + * @gwt.resource ol.gif + */ + AbstractImagePrototype ol(); + + /** + * @gwt.resource outdent.gif + */ + AbstractImagePrototype outdent(); + + /** + * @gwt.resource removeFormat.gif + */ + AbstractImagePrototype removeFormat(); + + /** + * @gwt.resource removeLink.gif + */ + AbstractImagePrototype removeLink(); + + /** + * @gwt.resource strikeThrough.gif + */ + AbstractImagePrototype strikeThrough(); + + /** + * @gwt.resource subscript.gif + */ + AbstractImagePrototype subscript(); + + /** + * @gwt.resource superscript.gif + */ + AbstractImagePrototype superscript(); + + /** + * @gwt.resource ul.gif + */ + AbstractImagePrototype ul(); + + /** + * @gwt.resource underline.gif + */ + AbstractImagePrototype underline(); + } + + /** + * This {@link Constants} interface is used to make the toolbar's strings + * internationalizable. + */ + public interface Strings extends Constants { + + String black(); + + String blue(); + + String bold(); + + String color(); + + String createLink(); + + String font(); + + String green(); + + String hr(); + + String indent(); + + String insertImage(); + + String italic(); + + String justifyCenter(); + + String justifyLeft(); + + String justifyRight(); + + String large(); + + String medium(); + + String normal(); + + String ol(); + + String outdent(); + + String red(); + + String removeFormat(); + + String removeLink(); + + String size(); + + String small(); + + String strikeThrough(); + + String subscript(); + + String superscript(); + + String ul(); + + String underline(); + + String white(); + + String xlarge(); + + String xsmall(); + + String xxlarge(); + + String xxsmall(); + + String yellow(); + } + + /** + * We use an inner EventListener class to avoid exposing event methods on the + * RichTextToolbar itself. + */ + private class EventListener implements ClickListener, ChangeListener, + KeyboardListener { + + public void onChange(Widget sender) { + if (sender == backColors) { + basic.setBackColor(backColors.getValue(backColors.getSelectedIndex())); + backColors.setSelectedIndex(0); + } else if (sender == foreColors) { + basic.setForeColor(foreColors.getValue(foreColors.getSelectedIndex())); + foreColors.setSelectedIndex(0); + } else if (sender == fonts) { + basic.setFontName(fonts.getValue(fonts.getSelectedIndex())); + fonts.setSelectedIndex(0); + } else if (sender == fontSizes) { + basic.setFontSize(fontSizesConstants[fontSizes.getSelectedIndex() - 1]); + fontSizes.setSelectedIndex(0); + } + } + + public void onClick(Widget sender) { + if (sender == bold) { + basic.toggleBold(); + } else if (sender == italic) { + basic.toggleItalic(); + } else if (sender == underline) { + basic.toggleUnderline(); + } else if (sender == subscript) { + basic.toggleSubscript(); + } else if (sender == superscript) { + basic.toggleSuperscript(); + } else if (sender == strikethrough) { + extended.toggleStrikethrough(); + } else if (sender == indent) { + extended.rightIndent(); + } else if (sender == outdent) { + extended.leftIndent(); + } else if (sender == justifyLeft) { + basic.setJustification(RichTextArea.Justification.LEFT); + } else if (sender == justifyCenter) { + basic.setJustification(RichTextArea.Justification.CENTER); + } else if (sender == justifyRight) { + basic.setJustification(RichTextArea.Justification.RIGHT); + } else if (sender == insertImage) { + String url = Window.prompt("Enter an image URL:", "http://"); + if (url != null) { + extended.insertImage(url); + } + } else if (sender == createLink) { + String url = Window.prompt("Enter a link URL:", "http://"); + if (url != null) { + extended.createLink(url); + } + } else if (sender == removeLink) { + extended.removeLink(); + } else if (sender == hr) { + extended.insertHorizontalRule(); + } else if (sender == ol) { + extended.insertOrderedList(); + } else if (sender == ul) { + extended.insertUnorderedList(); + } else if (sender == removeFormat) { + extended.removeFormat(); + } else if (sender == richText) { + // We use the RichTextArea's onKeyUp event to update the toolbar status. + // This will catch any cases where the user moves the cursur using the + // keyboard, or uses one of the browser's built-in keyboard shortcuts. + updateStatus(); + } + } + + public void onKeyDown(Widget sender, char keyCode, int modifiers) { + } + + public void onKeyPress(Widget sender, char keyCode, int modifiers) { + } + + public void onKeyUp(Widget sender, char keyCode, int modifiers) { + if (sender == richText) { + // We use the RichTextArea's onKeyUp event to update the toolbar status. + // This will catch any cases where the user moves the cursur using the + // keyboard, or uses one of the browser's built-in keyboard shortcuts. + updateStatus(); + } + } + } + + private static final RichTextArea.FontSize[] fontSizesConstants = new RichTextArea.FontSize[] { + RichTextArea.FontSize.XX_SMALL, RichTextArea.FontSize.X_SMALL, + RichTextArea.FontSize.SMALL, RichTextArea.FontSize.MEDIUM, + RichTextArea.FontSize.LARGE, RichTextArea.FontSize.X_LARGE, + RichTextArea.FontSize.XX_LARGE}; + + private Images images = (Images) GWT.create(Images.class); + private Strings strings = (Strings) GWT.create(Strings.class); + private EventListener listener = new EventListener(); + + private RichTextArea richText; + private RichTextArea.BasicFormatter basic; + private RichTextArea.ExtendedFormatter extended; + + private VerticalPanel outer = new VerticalPanel(); + private HorizontalPanel topPanel = new HorizontalPanel(); + private HorizontalPanel bottomPanel = new HorizontalPanel(); + private ToggleButton bold; + private ToggleButton italic; + private ToggleButton underline; + private ToggleButton subscript; + private ToggleButton superscript; + private ToggleButton strikethrough; + private PushButton indent; + private PushButton outdent; + private PushButton justifyLeft; + private PushButton justifyCenter; + private PushButton justifyRight; + private PushButton hr; + private PushButton ol; + private PushButton ul; + private PushButton insertImage; + private PushButton createLink; + private PushButton removeLink; + private PushButton removeFormat; + + private ListBox backColors; + private ListBox foreColors; + private ListBox fonts; + private ListBox fontSizes; + + /** + * Creates a new toolbar that drives the given rich text area. + * + * @param richText the rich text area to be controlled + */ + public RichTextToolbar(RichTextArea richText) { + this.richText = richText; + this.basic = richText.getBasicFormatter(); + this.extended = richText.getExtendedFormatter(); + + outer.add(topPanel); + outer.add(bottomPanel); + topPanel.setWidth("100%"); + bottomPanel.setWidth("100%"); + + initWidget(outer); + setStyleName("gwt-RichTextToolbar"); + + if (basic != null) { + topPanel.add(bold = createToggleButton(images.bold(), strings.bold())); + topPanel.add(italic = createToggleButton(images.italic(), strings.italic())); + topPanel.add(underline = createToggleButton(images.underline(), + strings.underline())); + topPanel.add(subscript = createToggleButton(images.subscript(), + strings.subscript())); + topPanel.add(superscript = createToggleButton(images.superscript(), + strings.superscript())); + topPanel.add(justifyLeft = createPushButton(images.justifyLeft(), + strings.justifyLeft())); + topPanel.add(justifyCenter = createPushButton(images.justifyCenter(), + strings.justifyCenter())); + topPanel.add(justifyRight = createPushButton(images.justifyRight(), + strings.justifyRight())); + } + + if (extended != null) { + topPanel.add(strikethrough = createToggleButton(images.strikeThrough(), + strings.strikeThrough())); + topPanel.add(indent = createPushButton(images.indent(), strings.indent())); + topPanel.add(outdent = createPushButton(images.outdent(), strings.outdent())); + topPanel.add(hr = createPushButton(images.hr(), strings.hr())); + topPanel.add(ol = createPushButton(images.ol(), strings.ol())); + topPanel.add(ul = createPushButton(images.ul(), strings.ul())); + topPanel.add(insertImage = createPushButton(images.insertImage(), + strings.insertImage())); + topPanel.add(createLink = createPushButton(images.createLink(), + strings.createLink())); + topPanel.add(removeLink = createPushButton(images.removeLink(), + strings.removeLink())); + topPanel.add(removeFormat = createPushButton(images.removeFormat(), + strings.removeFormat())); + } + + if (basic != null) { + bottomPanel.add(backColors = createColorList("Background")); + bottomPanel.add(foreColors = createColorList("Foreground")); + bottomPanel.add(fonts = createFontList()); + bottomPanel.add(fontSizes = createFontSizes()); + + // We only use these listeners for updating status, so don't hook them up + // unless at least basic editing is supported. + richText.addKeyboardListener(listener); + richText.addClickListener(listener); + } + } + + private ListBox createColorList(String caption) { + ListBox lb = new ListBox(); + lb.addChangeListener(listener); + lb.setVisibleItemCount(1); + + lb.addItem(caption); + lb.addItem(strings.white(), "white"); + lb.addItem(strings.black(), "black"); + lb.addItem(strings.red(), "red"); + lb.addItem(strings.green(), "green"); + lb.addItem(strings.yellow(), "yellow"); + lb.addItem(strings.blue(), "blue"); + return lb; + } + + private ListBox createFontList() { + ListBox lb = new ListBox(); + lb.addChangeListener(listener); + lb.setVisibleItemCount(1); + + lb.addItem(strings.font(), ""); + lb.addItem(strings.normal(), ""); + lb.addItem("Times New Roman", "Times New Roman"); + lb.addItem("Arial", "Arial"); + lb.addItem("Courier New", "Courier New"); + lb.addItem("Georgia", "Georgia"); + lb.addItem("Trebuchet", "Trebuchet"); + lb.addItem("Verdana", "Verdana"); + return lb; + } + + private ListBox createFontSizes() { + ListBox lb = new ListBox(); + lb.addChangeListener(listener); + lb.setVisibleItemCount(1); + + lb.addItem(strings.size()); + lb.addItem(strings.xxsmall()); + lb.addItem(strings.xsmall()); + lb.addItem(strings.small()); + lb.addItem(strings.medium()); + lb.addItem(strings.large()); + lb.addItem(strings.xlarge()); + lb.addItem(strings.xxlarge()); + return lb; + } + + private PushButton createPushButton(AbstractImagePrototype img, String tip) { + PushButton pb = new PushButton(img.createImage()); + pb.addClickListener(listener); + pb.setTitle(tip); + return pb; + } + + private ToggleButton createToggleButton(AbstractImagePrototype img, String tip) { + ToggleButton tb = new ToggleButton(img.createImage()); + tb.addClickListener(listener); + tb.setTitle(tip); + return tb; + } + + /** + * Updates the status of all the stateful buttons. + */ + private void updateStatus() { + if (basic != null) { + bold.setDown(basic.isBold()); + italic.setDown(basic.isItalic()); + underline.setDown(basic.isUnderlined()); + subscript.setDown(basic.isSubscript()); + superscript.setDown(basic.isSuperscript()); + } + + if (extended != null) { + strikethrough.setDown(extended.isStrikethrough()); + } + } +} + diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/backColors.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/backColors.gif new file mode 100644 index 0000000000..ddfc1cea2c Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/backColors.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/bold.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/bold.gif new file mode 100644 index 0000000000..249e5afc04 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/bold.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/createLink.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/createLink.gif new file mode 100644 index 0000000000..3ab9e599f8 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/createLink.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/fontSizes.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/fontSizes.gif new file mode 100644 index 0000000000..c2f4c8cb21 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/fontSizes.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/fonts.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/fonts.gif new file mode 100644 index 0000000000..1629cabb78 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/fonts.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/foreColors.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/foreColors.gif new file mode 100644 index 0000000000..2bb89ef189 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/foreColors.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/gwtLogo.png b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/gwtLogo.png new file mode 100644 index 0000000000..80728186d8 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/gwtLogo.png differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/hr.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/hr.gif new file mode 100644 index 0000000000..3fb1607e67 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/hr.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/indent.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/indent.gif new file mode 100644 index 0000000000..8b837f0fd9 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/indent.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/insertImage.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/insertImage.gif new file mode 100644 index 0000000000..db61c9a3de Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/insertImage.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/italic.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/italic.gif new file mode 100644 index 0000000000..2b0a5a0a06 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/italic.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyCenter.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyCenter.gif new file mode 100644 index 0000000000..7d22640af0 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyCenter.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyLeft.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyLeft.gif new file mode 100644 index 0000000000..3c0f350122 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyLeft.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyRight.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyRight.gif new file mode 100644 index 0000000000..99ee25836f Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/justifyRight.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/ol.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/ol.gif new file mode 100644 index 0000000000..833bb40667 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/ol.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/outdent.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/outdent.gif new file mode 100644 index 0000000000..be8662411a Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/outdent.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/removeFormat.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/removeFormat.gif new file mode 100644 index 0000000000..a4339c059e Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/removeFormat.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/removeLink.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/removeLink.gif new file mode 100644 index 0000000000..522ab4b29e Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/removeLink.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/strikeThrough.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/strikeThrough.gif new file mode 100644 index 0000000000..6b174c884e Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/strikeThrough.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/subscript.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/subscript.gif new file mode 100644 index 0000000000..04bba05b8b Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/subscript.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/superscript.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/superscript.gif new file mode 100644 index 0000000000..ac478eeb7e Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/superscript.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/ul.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/ul.gif new file mode 100644 index 0000000000..01380dbb83 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/ul.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/underline.gif b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/underline.gif new file mode 100644 index 0000000000..82bae11f59 Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/underline.gif differ diff --git a/src/com/itmill/toolkit/tests/TestForRichTextEditor.java b/src/com/itmill/toolkit/tests/TestForRichTextEditor.java new file mode 100644 index 0000000000..7b371625ee --- /dev/null +++ b/src/com/itmill/toolkit/tests/TestForRichTextEditor.java @@ -0,0 +1,52 @@ +package com.itmill.toolkit.tests; + +import com.itmill.toolkit.data.Property.ValueChangeEvent; +import com.itmill.toolkit.data.Property.ValueChangeListener; +import com.itmill.toolkit.ui.Button; +import com.itmill.toolkit.ui.CustomComponent; +import com.itmill.toolkit.ui.Label; +import com.itmill.toolkit.ui.OrderedLayout; +import com.itmill.toolkit.ui.RichTextArea; + +/** + * + * @author IT Mill Ltd. + */ +public class TestForRichTextEditor extends CustomComponent implements ValueChangeListener { + + private OrderedLayout main = new OrderedLayout(); + + private Label l; + + private RichTextArea rte; + + public TestForRichTextEditor() { + + setCompositionRoot(main); + createNewView(); + } + + public void createNewView() { + main.removeAllComponents(); + main + .addComponent(new Label( + "RTE uses google richtextArea and their examples toolbar.")); + + + rte = new RichTextArea(); + rte.addListener((ValueChangeListener) this); + + main.addComponent(rte); + + main.addComponent(new Button("commit content to label below")); + + l = new Label("", Label.CONTENT_XHTML); + main.addComponent(l); + + } + + public void valueChange(ValueChangeEvent event) { + l.setValue(rte.getValue()); + } + +}