Tbeditor"
Chunfuchang (talk | contribs) (Created page with "hi") |
Jumperchen (talk | contribs) |
||
(5 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | {{ZKComponentReferencePageHeader}} | |
+ | |||
+ | = Tbeditor = | ||
+ | |||
+ | *Java API: N/A | ||
+ | *JavaScript API: N/A | ||
+ | |||
+ | = Employment/Purpose = | ||
+ | The component used to represent [http://alex-d.github.io/Trumbowyg/ Trumbowyg] | ||
+ | |||
+ | Tbeditor is a rich text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. | ||
+ | |||
+ | = Example = | ||
+ | [[Image:Zkcompref tbeditor.png|800px]] | ||
+ | |||
+ | <source lang="xml" > | ||
+ | <tbeditor id="tb" value="this is a demo for <b>trumbowy</b> editor!!" /> | ||
+ | </source> | ||
+ | |||
+ | = Customized Properties = | ||
+ | Tbeditor provides a way for users to customize their own properties, check [http://alex-d.github.io/Trumbowyg/documentation.html official document] for the detail<ref>Not support all properties, for example, localization, custom skin, are not supported.</ref>. | ||
+ | Here shows a simple example how to programmatic change the property. | ||
+ | |||
+ | <source lang="java"> | ||
+ | Map config = new HashMap(); | ||
+ | config.put("btns", new String[] {"bold", "italic", "link"}); | ||
+ | config.put("closable", true); | ||
+ | tb.setConfig(config); | ||
+ | </source> | ||
+ | |||
+ | We create a map while key is property name with reasonable value. | ||
+ | Note that we have to wrap the value into <code>JavaScriptValue</code> object if it's not String. | ||
+ | |||
+ | <blockquote> | ||
+ | ---- | ||
+ | <references/> | ||
+ | </blockquote> | ||
+ | |||
+ | =Supported Events= | ||
+ | |||
+ | {| class='wikitable' | width="100%" | ||
+ | ! <center>Name</center> | ||
+ | ! <center>Event Type</center> | ||
+ | |- | ||
+ | | <center><code>onChange</code></center> | ||
+ | | <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc> | ||
+ | |||
+ | <code>'''Description:''' </code> Denotes the content of an input component has been modified by the user. | ||
+ | |||
+ | |- | ||
+ | | <center><code>onChanging</code></center> | ||
+ | | <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc> | ||
+ | |||
+ | <code>'''Description:''' </code> Denotes that user is changing the content of an input component. Notice that the component's content (at the server) won't be changed until <code>onChange</code> is received. Thus, you have to invoke the <code>getValue </code>method in the <code>InputEvent </code>class to retrieve the temporary value. | ||
+ | |} | ||
+ | |||
+ | =Supported Children= | ||
+ | |||
+ | *NONE | ||
+ | |||
+ | =Use Cases= | ||
+ | |||
+ | {| class='wikitable' | width="100%" | ||
+ | ! Version !! Description !! Example Location | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | =Version History= | ||
+ | {{LastUpdated}} | ||
+ | |||
+ | {| class='wikitable' | width="100%" | ||
+ | ! Version !! Date !! Content | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | {{ZKComponentReferencePageFooter}} |
Revision as of 04:03, 24 February 2022
Tbeditor
- Java API: N/A
- JavaScript API: N/A
Employment/Purpose
The component used to represent Trumbowyg
Tbeditor is a rich text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it.
Example
<tbeditor id="tb" value="this is a demo for <b>trumbowy</b> editor!!" />
Customized Properties
Tbeditor provides a way for users to customize their own properties, check official document for the detail[1]. Here shows a simple example how to programmatic change the property.
Map config = new HashMap();
config.put("btns", new String[] {"bold", "italic", "link"});
config.put("closable", true);
tb.setConfig(config);
We create a map while key is property name with reasonable value.
Note that we have to wrap the value into JavaScriptValue
object if it's not String.
- ↑ Not support all properties, for example, localization, custom skin, are not supported.
Supported Events
onChange |
InputEvent
|
onChanging |
InputEvent
|
Supported Children
*NONE
Use Cases
Version | Description | Example Location |
---|---|---|
Version History
Version | Date | Content |
---|---|---|