小程序学习《乐小记》开发第二弹学习富文本编辑与矢量图标引用

既然定位为记事软件,不可或缺的就是富文本编辑器,遂查阅官网API,看到了editor

editor

基础库 2.7.0 开始支持,低版本需做兼容处理。

富文本编辑器,可以对图片、文字进行编辑。编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储。通过setContents接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入 这段样式 ,并维护的结构。图片控件仅初始化时设置有效

正好符合要求

拿来主义:

首页添加

笔记

直接跳转到添加页面,可插入图片可设置字号,很是满足!

再头疼的就是矢量图标了,包含设置字体大小,加粗以及,列表矢量图

在网上

https://www.iconfont.cn/ 任意找矢量图 看中哪个选哪个,然后添加入库,下载压缩包解压 得到有一个CSS 文件,copy到小程序wxss文件即可,

最后不要忘了在app.wxss引用哦

@import "components/iconfront.wxss";

这样我们就可以直接使用了


最终成果哦


你可能感兴趣的:(小程序学习《乐小记》开发第二弹学习富文本编辑与矢量图标引用)