Rich Text Edit

This page is under construction, so we cannot guarantee the accuracy of the content!

Available in ZK Spreadsheet EE only

since 3.5.1

Spreadsheet allows user to edit cell text with rich text format, it provides a built-in WYSIWYG (“what you see is what you get”) editor to help user enter and format text. Besides, user can set rich text via Spreadshweet's API as well.

Edit Rich Text within WYSIWYG Editor

Using WYSIWYG editor is easy, just right click on the cell to open context menu and click "Rich Text Edit".

Then you can edit rich text within WYSIWYG editor

The result will be like:

Set Rich Text via API

Range API allows you to get or set rich text in html format of a cell:

public void setCellRichText(String html);

public String getCellRichText();

For example, the screenshot below is an example which can display a focused cell's data and the editor at right bottom corner allows you to change the focused cell's rich text.

When we focus on A1, we can see the cell's Rich Text HTML, then we can change the html and see the update.

Example application's ZUL page

	<window hflex="1" vflex="1"
		apply="org.zkoss.zss.essential.RichTextEditComposer">
		<hlayout hflex="1" vflex="1">
			<spreadsheet id="ss" hflex="1" vflex="1" src="/WEB-INF/books/richTextEdit.xlsx"
				showContextMenu="true" showToolbar="true"
				maxVisibleRows="100" maxVisibleColumns="40" />
			<vlayout width="600px" vflex="1">
				<groupbox hflex="1" vflex="1">
					<caption label="Cell Information" />
					<grid vflex="1" hflex="1">
						<columns>
							<column width="100px"/>
							<column/>
						</columns>
						<rows>
							<row>
								Cell: <label id="cellRef"/>
							</row>
							<row>
								Rich Text HTML: <label id="cellRichText"/>
							</row>
						</rows>
					</grid>
				</groupbox>
				<groupbox hflex="1" vflex="1">
						<caption label="Editor" />
							<textbox id="cellEditTextBox" hflex="1" rows="10" vflex="1"/>
					</groupbox>
			</vlayout>
		</hlayout>
	</window>

Controller

public class RichTextEditComposer extends SelectorComposer<Component> {
	@Wire
	private Spreadsheet ss;
	@Wire
	private Label cellRef;
	@Wire
	private Label cellRichText;
	@Wire
	private Textbox cellEditTextBox;
	
	@Listen("onCellFocus = #ss")
	public void onCellFocus(){
		CellRef pos = ss.getCellFocus();
		
		refreshCellInfo(pos.getRow(),pos.getColumn());		
	}
	
	private void refreshCellInfo(int row, int col){
		Range range = Ranges.range(ss.getSelectedSheet(), row, col);
		final String richText = range.getCellRichText();
		cellRef.setValue(Ranges.getCellRefString(row, col));
		if (richText != null) {
			cellRichText.setValue(richText);
			cellEditTextBox.setValue(richText);
		} else {
			final String editText = range.getCellEditText();
			cellRichText.setValue(editText);
			cellEditTextBox.setValue(editText);
		}
	}
	
	@Listen("onChange = #cellEditTextBox")
	public void onEditboxChange(){
		CellRef pos = ss.getCellFocus();
		Range range = Ranges.range(ss.getSelectedSheet(),pos.getRow(),pos.getColumn());
		range.setCellRichText(cellEditTextBox.getValue());
	}
}

• Line 20, 22, 26: These codes use API described in previous section to get the focused cell's rich text or editing text.
• Line 36: Set edit box's value back to the focused cell's rich text when we change the editor box's text.

All source code listed in this book is at Github.