Experience in using ivx rich text component

Rich text compared to plain text can be displayed complexity of font styles and typography, so more suitable for graphic content of the page layout, are regularly used in many cases. ivx also a good package of components rich text and rich text editor component, said today at these two components how to use it.

I. rich text and rich text editor
rich text editor is an embedded browser, a text editor for editing rich text content and format. It differs from the rich text is that the former allowed only in the case of edit mode to edit content, hidden text toolbar in the non-edit mode, usually do only show, not interact with the user to occur. The latter is open rich text editing interface in the case of a non-edit mode, allow the user to edit the layout and rich text.
Here Insert Picture Description
Rich text edit field the following diagram components of this position, when you run the case is invisible, keeping in mind that it's not just the content of our content attribute input, but also includes information such as text format, we can not attribute column where to change it, but also in data binding is bound object is also required, and if a certain string of rich text format.
Here Insert Picture Description
Rich Text Editor is a rich text edit content in the case of run-time, so he's toolbar is located inside the case. He also has a property content (plain text), these two properties are also not edit the content in addition to the properties in the Property column, can only be entered when the case is running.
Here Insert Picture Description
You can look at the comparison of the two property values.
Here Insert Picture Description
II. Structure and assembly event logic
1. The device structure
demo can be divided into three parts, two pages and a banner. Page 1 Add a rich text editor component for rich text submitted information, page 2 Add the rich text component for displaying rich text information banner is a success with a dialog box to prompt the user to submit.

2. enter data
in a rich text editor to edit the region, we can enter text, pictures, video, and define the style. Click on the submit button is to determine whether the contents of the rich text editor is empty if it is empty then prompts the user to enter content, not inserted at the beginning of an array of two objects will be empty, and then let the dialog submitted a successful show, and empty once the input of the next convenient rich text content editor.
Here Insert Picture Description
3. View data
click on the banner of the "View results" button or page "View results" button within the 11 line can make the jump to the foreground page 2. Banner "View results" button need to make one more banner again to hide the action.
Here Insert Picture Description
Previous We have rich text contents of an array of objects submitted to the "what", and now is to create a rich text component based on the value of the cycle array of objects of "content", data binding and display data. Create a loop has been talked about in detail, you can look at a previous post.
Here Insert Picture Description
4. Search
last search is multi-functional, that is, the search to find content in rich text content and highlight (demo is the font color to red).
First, we enter the string to search for in the input box and click the Search icon. The system first determines whether the content is empty, if not empty then the "pre-screening content" value is assigned to an array of objects array objects "content," object array then "Content" in the "content" field contains the content input box data filtering output, and then call its callback function components, change the style of the rich text data, and the result is re-assigned to the array of objects "content." Actual case operating results are as follows.
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
Summary of
the application is mainly rich text editing and presentation, it is most important to note is that he is not simply the content of text, pictures, etc. (rich text format data and rich text editor is actually an array rather than a simple string, as follows FIG. do so in order to ensure the safety of the rich text components, preventing users to embed the rich text component of the code to the background ***). Therefore, directly to Rich Text or Rich Text Editor assigned a normal string is not in force, must be a mechanism rich text, the recommended practice is to use the demo to display the contents of the rich text editor and then use the collected user rich text display.
Here Insert Picture Description

Guess you like

Origin blog.51cto.com/14556317/2481369