使用taro开发小程序实现富文本

富文本即RichText,一般是有文字有图的一种组合。示例如下:

"<p>教学设备:智能纳米智慧黑板对于教师的教学和教学水平都会有着重要的影响,一套智能纳米智慧黑板的出现打破了传统电子白板的教学方式,将电子白板的教学功能转换成智能教学黑板的集成教学方式,让教师可以通过纳米智慧黑板完成远程视频教学、移动学习、笔记记录、近视查看等功能,真正实现师生互动。教学成果:一份智能集成的智能教学黑板能够让学生查看文章、动画影片、纪录片等图书一样教学资料,用户还可以自由组合科目进行阅读学习,提高了学生的学习积极性,智能集成的教学黑板更好的满足了学生的兴趣爱好,让学生的学习更加的有趣。</p><p align="center"><img src="http://www.baidu.com/img/flexible/logo/pc/result.png"></p><p>1、智能纳米智慧黑板能够更好的促进教学水平的提高</p><p>一体化教学模式:在教师与学生的沟通方面,对于智能纳米智慧黑板来说无疑会显得格外的重要,在使用智能纳米智慧黑板的过程中能够实现用户群体与智能纳米智慧黑板的高度吻合,能够实现教师、学生与教师在互动的过程中进行教学,无形中提高了教师的教学水平。课程智能:在选择教学辅导资源的时候能够实现较低的学习成本,教师能够根据学生的各方面情况制定一套适合的学习资源,提高学生的学习质量。以上就是关于“智能纳米智慧黑板对教育有什么影响?”这个问题的详细解答,对于教育工作者来说,智能纳米智慧黑板能够更好的促进教学水平的提高,能够对教学设备带来更多的改变,改变传统的教学方式。</p><p>2、在浅薄的看法中</p><p>简单谈谈自己浅薄的看法以及一些简单的想法。在浅薄的看法中,智能教学黑板与其他教学辅助设备板、手机相比在教学效果和教学思路上起到的作用还是有一定的区别的。</p><p>3、必须有教学效果上的提高</p><p>出来不专业,只是个人看法,望能大家指正并补充和纠智能教学黑板提高效率的必要条件因为教育质量以及教学水平的提高,必须有教学效果上的提高。在智能教学黑板出现之前,我们的教学环境的普遍的集中在电脑课堂,即使是教育资源极其丰富的中小学我们也常常在电脑上进行教学。</p><p>我们习惯于在电脑上收集资料,存入电脑,再输入到教学笔记本里面,然后再。</p>"

这是html串,有p和img标签。

使用taro开发小程序实现富文本的方法为:

1.引入RichText组件

import { View, Text, Image, RichText } from '@tarojs/components'

2.使用该组件

<View className="content">
    <RichText nodes={processRichText(data.article)}></RichText>
</View>

3.调用函数对img标签进行处理。

max-100%是对图片宽度加以限制,避免超出屏幕。

height:auto为高度自适应。

display:block可以去掉图片之间的空白间隔。

export let processRichText = (str)=>{
    if(str){
        return str.replace(/<img/gi, '<img style="max-100%;height:auto;display:block"')
    }else{
        return ''
    }
}
原文地址:https://www.cnblogs.com/luoyihao/p/14239245.html