Tbeditor"
Chunfuchang (talk | contribs) |
Jumperchen (talk | contribs) |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{ZKComponentReferencePageHeader}} | {{ZKComponentReferencePageHeader}} | ||
− | = | + | = Tbeditor = |
− | |||
*Java API: N/A | *Java API: N/A | ||
*JavaScript API: N/A | *JavaScript API: N/A | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
= Employment/Purpose = | = Employment/Purpose = | ||
− | The component used to represent [http:// | + | The component used to represent [http://alex-d.github.io/Trumbowyg/ Trumbowyg] |
− | |||
− | |||
− | |||
− | |||
− | It | + | 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 = | = Example = | ||
− | [[Image: | + | [[Image:Zkcompref tbeditor.png|800px]] |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<source lang="xml" > | <source lang="xml" > | ||
− | < | + | <tbeditor id="tb" value="this is a demo for <b>trumbowy</b> editor!!" /> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</source> | </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=" | + | <source lang="java"> |
− | + | Map config = new HashMap(); | |
− | + | config.put("btns", new String[] {"bold", "italic", "link"}); | |
− | + | config.put("closable", true); | |
− | + | tb.setConfig(config); | |
− | |||
</source> | </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= | =Supported Events= | ||
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
|- | |- | ||
− | | <center>< | + | | <center><code>onChange</code></center> |
| <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc> | | <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>< | + | | <center><code>onChanging</code></center> |
| <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc> | | <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. |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|} | |} | ||
Line 183: | Line 61: | ||
=Use Cases= | =Use Cases= | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
Line 194: | Line 72: | ||
{{LastUpdated}} | {{LastUpdated}} | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- |
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 |
---|---|---|