使用ivx中富文本组件的经验总结

富文本相比普通文本可以显示复杂的字体样式和排版方式,所以更适用于网页图文内容的排版,在很多案例中都会经常使用。ivx中也封装好了富文本组件和富文本编辑器组件,今天就说一下这两个组件该如何使用吧。

一.富文本和富文本编辑器
富文本编辑器是一种可内嵌于浏览器,用于编辑富文本内容和格式的文本编辑器。它与富文本的区别是,前者仅容许在案例编辑状态下进行内容编辑,在非编辑状态下隐藏文本工具条,通常仅做展示,不与用户发生交互。后者则在案例非编辑状态下开放富文本编辑界面,容许用户进行富文本的排版和编辑。

富文本组件的编辑栏在下图这个位置,运行案例时是看不到的,同时要注意它的内容属性不仅仅是我们输入的内容,还包含了文本的格式等信息,我们是不能在属性栏里对其进行更改的,而且在数据绑定是对绑定的对象也有要求,一定要是富文本格式的字符串。

富文本编辑器是在案例运行时编辑富文本内容的,所以他的工具栏位于案例内部。同时他除了内容的属性外还有一个属性内容(纯文本),这两个属性也都是不能在属性栏里编辑的,只能在案例运行的时候输入。

可以看一下两个属性值的对比。

二.组件结构与事件逻辑
1.组件结构
demo可分为三个部分,两个页面和一个横幅。页面1添加的是富文本编辑器组件,用于提交富文本信息,页面2添加的是富文本组件,用于展示富文本信息,横幅则是一个提交成功对用用户进行提示的对话框。

2.录入数据
在富文本编辑器的编辑区域内,我们可以输入文本,图片,视频等,并定义样式。点击提交按钮则先判断富文本编辑器的内容是否为空,如果是空的就提示用户输入内容,不为空就将内容插入到两个对象数组的开头,然后让提交成功的对话框显示,并清空富文本编辑器内容方便下一次的输入。

3.查看数据
点击横幅中的“查看效果”按钮或者页面1行1内的“查看效果”按钮都可以让前台跳转到页面2。横幅中的“查看效果”按钮需要多一个让横幅重新隐藏的动作。

上一步我们已经将富文本的内容提交到“内容”对象数组中了,现在就是根据“内容”对象数组的值循环创建富文本组件,进行数据绑定然后展示数据。循环创建已经详细的讲过了,可以翻看一下之前的帖子。

4.搜索
最后是搜多功能,即在富文本内容中找到搜索内容并高亮显示(demo中是字体颜色变成红色)。
首先,在输入框中输入我们要搜索的字符串,然后点击搜索图标。系统会先判定内容是否为空,如果非空则将“筛选前内容”对象数组的值赋给“内容”对象数组,再把“内容”对象数组中“content”字段包含输入框内容的数据筛选输出,然后在其回调中调用函数组件,更改富文本数据的样式,并将结果重新赋值给“内容”对象数组。实际案例操作结果如下。



总结
富文本的应用主要就是编辑与展示,所以最需要注意的就是他的内容不是单纯的文本,图片等(富文本和富文本编辑器的数据格式其实是一个数组而不是简单的字符串,如下图。这样做也是为了保证富文本组件的安全性,防止用户在富文本组件中嵌入代码来对后台进行***)。因此,直接给富文本或者富文本编辑器赋值一个普通的字符串是不会生效的,必须是富文本的机构,推荐的是采用demo中的做法,显示富文本编辑器收集用户的内容然后用富文本展示。

原文地址:https://blog.51cto.com/14556317/2481369

时间: 2024-11-10 19:29:23

使用ivx中富文本组件的经验总结的相关文章

使用ivx中表格组件的经验总结

之前讲过了使用ivx在案例中如何使用图表组件更直观的展示数据,不过还有另一种展示数据也常用到的手段--表格.ivx中也对这一功能制作了对应的表格组件,今天就来说说这个表格组件是如何使用的.1.表格的数据来源表格和for循环创建一样需要有数据来源,而且多是对象数组(嗯,反正我就是喜欢对象数组).可以看到第一行除了第一列后面几个的元素都是 "left "(注意前后都是各两个下划线),这个是用于合并两个相邻表格的,而且把left换成right,up,down也都是可以的.2.内部框和选中框表

使用ivx实现文本纵向和横向滚动效果的经验总结

在案例中,为了使展示效果更佳,我们通常可以给文本加上一个纵向或者横向的滚动效果,其基本原理就是将文本信息放入一个数组循环创建,通过触发器不断调整它们的坐标,每当第一个元素内容滚动出界面就将其调整至一维数组的末尾,下面就来讲一讲具体步骤吧. 一.纵向滚动1.界面首先搭建一个如下图所示的简易界面,在绝对定位容器内进行循环创建,数据来源为一个一维数组,点击add按钮可以将输入框的内容添加到一维数组的末尾.2.文本组件的坐标由于循环创建是在绝对定位环境下,所以我们需要设置创建出来的每一个文本组件的XY坐

关于ivx监听键盘按键的经验总结

之前的帖子里讲了ivx中很多组件都可以监听到鼠标的移入移出事件,还包括最常用的点击事件,其实我们也可以在案例中监听到键盘的按键操作,例如这个demo中我们可以在输入框内输入一些文本信息,然后点击send按钮或者直接敲击键盘Enter回车键就会在上方添加我们刚刚输入的内容.下面来说一下具体的实现方法.1.很显然上面的输入信息的展示用到了循环创建,我们需要一个数组来存放全部输入的信息,这个demo比较简单添加一个一位数组即可.2.接下来我们要做的就是在点击send按钮或者敲击Enter回车时将输入框

使用ivx实现简易计算器的经验总结

今天要讲的是利用ivx制作一个能够进行简单加减乘除运算的计算器,设计思路是将整个输入的运算式保存到一个文本变量中,通过eval()直接方法计算文本变量中表达式的值,下面说一下具体步骤.1.计数器界面的上面用于显示输入的计算式和计算结果,下面使用文本组件展示16个按键,这16个键可以分为四类,数字键,运算符键,等于键,清零键.其中按钮键和运算符键它们同类按键的操作都是类似的,我们可以写成一个动作组,点击按键时调用动作组并将按键的文本组件内容传给动作组即可.2.数字键点击数字键时,只需使用拼接字符串

iOS富文本组件的实现—DTCoreText源码解析 数据篇

本文转载 http://blog.cnbang.net/tech/2630/ DTCoreText是个开源的iOS富文本组件,它可以解析HTML与CSS最终用CoreText绘制出来,通常用于在一些需要显示富文本的场景下代替低性能的UIWebView,来看看它是怎样解析和渲染HTML+CSS的,总体上分成两步: 数据解析—把HTML+CSS转换成NSAttributeString 渲染—用CoreText把NSAttributeString内容渲染出来,再加上图片等元素 本篇先介绍第一步,数据解

常用的几种文本组件(JTextComponent)

一:JTextField  ,最简单的文本组件 <span style="font-size:18px;">//source code import java.awt.GridLayout ; import javax.swing.JTextField ; import javax.swing.JFrame ; import javax.swing.JButton ; import javax.swing.JLabel ; class Tester { public sta

iOS 富文本组件

iOS6 之后,UILabel加入了attributedText属性,为UILabel的文本显示添加了巨大的变化, attributedText使用coreText绘制,支持文本域字体.颜色等设置. 在iOS6 之前,UILabel 只能按照font,textColor属性设置的字体和颜色显示文本,不能对文本中一段文本进行单独的字体和颜色的设置,也不支持url识别,下划线添加,字体加粗等功能.在实际开发中对富文本组件的需求是非常高的,所以出现了很多第三方的富文本组件. OHAttributedL

【Flutter学习】基本组件之文本组件Text

一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Text 三,构造方法 单一格式(Text( )) 构造方法创建,只能生成一种style Text() const Text(this.data, { Key key, this.style, this.textAlign, this.textDirecti

使用ivx实现栈面板的经验总结

之前有一片帖子已经详细说明了如何实现折叠面板,今天再来说说另一种面板形式--栈面板.栈面板也是纵向排列子部件,但是它的特点是任意时刻只显示某一部件的内容,其它部件则只显示标题.用户可以通过点击标题进行切换,是一种十分有用的垂直菜单系统.比如当我展开购物中心后,我再点击浏览历史则浏览历史展开的同时,购物中心也会完全合起.1.变量通用变量"导航栏数据"的格式如下图,与折叠面板相似他也是三层结构,first.second和third分别对应三级菜单,name是菜单名称,status是菜单的展