百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

微信小程序开发入门四(微信小程序开发从入门到实践)

zhezhongyun 2025-03-24 01:29 38 浏览

内容回顾:上一讲说到了标签和标签的使用。checkbox标签会相对简单一点,只是有一点需要注意的。input标签的属性比较多,主要讲了,用input标签,调用回调函数,将输入的内容传给全局变量并显示。

一、接下来我们一起来学习一下富文本编辑器edit的使用

editor

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

富文本编辑器,可以对图片、文字进行编辑。

编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储。

通过setContents接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。

富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入 这段样式,并维护的结构。

图片控件仅初始化时设置有效。

相关 api:EditorContext

属性

类型

默认值

必填

说明

最低版本

read-only

boolean

false

设置编辑器为只读

2.7.0

placeholder

string


提示信息

2.7.0

show-img-size

boolean

false

点击图片时显示图片大小控件

2.7.0

show-img-toolbar

boolean

false

点击图片时显示工具栏控件

2.7.0

show-img-resize

boolean

false

点击图片时显示修改尺寸控件

2.7.0

bindready

eventhandle


编辑器初始化完成时触发

2.7.0

bindfocus

eventhandle


编辑器聚焦时触发,event.detail = {html, text, delta}

2.7.0

bindblur

eventhandle


编辑器失去焦点时触发,detail = {html, text, delta}

2.7.0

bindinput

eventhandle


编辑器内容改变时触发,detail = {html, text, delta}

2.7.0

bindstatuschange

eventhandle


通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式

2.7.0

编辑器内支持部分 HTML 标签和内联样式,不支持 classid

支持的标签

不满足的标签会被忽略,

会被转行为

储存。

类型

节点

行内元素

块级元素


支持的内联样式

内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size 归类为行内元素属性,在 p 标签上设置是无效的。

类型

样式

块级样式

text-align direction margin margin-top margin-left margin-right margin-bottom
padding padding-top padding-left padding-right padding-bottom line-height text-indent

行内样式

font font-size font-style font-variant font-weight font-family
letter-spacing text-decoration color background-color

Bug & Tip

  1. tip: 使用 catchtouchend 绑定事件则不会使编辑器失去焦点(2.8.3)
  2. tip: 插入的 html 中事件绑定会被移除
  3. tip: formats 中的 color 属性会统一以 hex 格式返回
  4. tip: 粘贴时仅纯文本内容会被拷贝进编辑器
  5. tip: 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如

    xxx

    会改写为

    xxx

  6. tip: 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见

示例代码

<view>

<editor id="editor" placeholder="{{placeholder}}" bindinput="EditInput">

</editor>

</view>

placeholder:初始的提示内容, bindinput:编辑框输入内容后回调

查看输入内容在那个内存中的一个小技巧:回调函数中增加输出

再在edit中输入内容,调试窗口就会打印出e的所有内容:

如下说明输入内容存于e.detail.text中。

所以,this.setData({

input_num: e.detail.text

})

也就是这回调函数的写法了。

至此,这一讲的这个标签先到这里,欢迎关注,你们的关注,支持是我继续分享的无限动力,同时,个人水平有限,有不当之处欢迎指正。谢谢!!!!

相关推荐

用豆包生成的BMI计算器(豆包的热量是多少?)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8&#...

Android 开发中文引导-应用小部件

应用小部件是可以嵌入其它应用(例如主屏幕)并收到定期更新的微型应用视图。这些视图在用户界面中被叫做小部件,并可以用应用小部件提供者发布。可以容纳其他应用部件的应用组件叫做应用部件的宿主(1)。下面的截...

Qt推流(视频文件/视频流/摄像头/桌面转流媒体rtmp+hls+webrtc)

一、前言说明推流直播就是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号从手机端,电脑端,摄影机端打包传到服务器的过程。“推流”对网络要求比较高,如果网络不稳定,直播效果就会很差,观...

一看就会!谷歌广告转化跟踪详细设置指南来了

在出海推广业务中,投放广告最常见的目的是获取订单,但我们怎么知道有没有达成投放目的呢?谷歌转化跟踪技术就可以做到!熟悉谷歌的卖家朋友都知道,转化跟踪在最近几年变得越来越复杂了,虽然有很多选项可以自定义...

Android原生编解码接口MediaCodec详解

作者:躬行之MediaCodec是Android中的编解码器组件,用来访问底层提供的编解码器,通常与MediaExtractor、MediaSync、MediaMuxer、MediaCrypt...

手把手搭建RTSP流媒体服务器(rtsp 流媒体)

0.引言本文主要讲解如何搭建RTSP流媒体服务器的过程,使用开源项目ZLMediaKit。通过这个开源项目,推RTSP流到服务器,然后拉流端可以拉取RTSP、RTMP等流。ZLMediaKit码云链接...

MediaInfo 24.04.0 是一个关于多媒体文件的信息提供工具

MediaInfo24.04.0是一个关于多媒体文件的信息提供工具(仅当文件中包含信息时才提供):包括常规信息(标题、作者、导演、专辑、曲目编号、日期、时长等);视频信息(编解码器、画面比例、帧率...

rmvb格式视频怎么打开,rmvb转MP4认准这个方法

 一、rmvb是什么格式?  RMVB是一种视频文件格式,其中的VB指的是可变比特率。比起上一代的RM格式,RMVB  格式的画面比较清晰,因为它是降低了静态画面下的比特率。  二、制作rmvb  ①...

教你用Plex Media Server,把铁威马变成你的“私人好莱坞”!

TNAS(铁威马NAS)中可以安装多媒体服务器、影视、PlexMediaServer、EmbyServer作为个人媒体服务器使用。PlexMediaServer可以组织整理TNAS上的媒体...

你肯定用过!经典Windows软件被抛弃

Windows系统这些年持续更新的过程中,不断融入新的软件和功能的同时,一些经典的应用也渐渐成为了历史……Windows媒体播放器被抛弃Windows系统不断地推陈出新,一些老旧的组件也难免被抛弃,在...

博思得Q8标签打印全能手(博思得标签打印机安装教程)

2014-12-0905:35:00作者:宋达希【中关村在线办公打印频道原创】服装吊牌、洗涤标签、产品说明标签等都要用到标签打印机,这些标签涵盖多种尺寸的长度和宽度以及材质。另外作为一件商品或者产...

flv文件用什么播放器打开,这样做不踩雷!

FLV是FLASHVIDEO的简称,是随着FlashMX的推出发展而来的视频格式。它的出现有效地解决了视频文件导入Flash后,使导出的SWF文件体积庞大,不能在网络上很好的使用等问题。一、...

media player怎么转换格式?音频转换神器推荐!

Windowsmediaplayer怎么转换格式?WindowsMediaPlayer是微软公司出品的一款多媒体播放器,通常简称“WMP”。提供了编辑音频和视频文件的功能。用户可以使用该软件导...

视频参数检查工具更新:MediaInfo 23.10

MediaInfo提供有关视频或音频文件的技术和标签信息。信息示例包括编解码器、比特率、每秒帧数、宽度、高度、频道数、持续时间、标题、作者、字幕语言和章节名称。多种方式可以查看信息(文本、工作表、树和...

多媒体管理软件:JRiver Media Center 31.0.68 (64位)

JRiverMediaCenter64位是适用于大量库的完整媒体解决方案。它组织、播放和标记所有类型的媒体文件,并对Xbox、PS3、UPnP、DLNA和TiVo进行翻录、刻录。JRiverM...