热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序API富文本-EditorContext实例-微信小程序

微信小程序API富文本-EditorContext实例是千自学中一篇关于微信小程序的文章简介:EditorContext基础库2.7.0开始支持,低版本需做兼容处理。EditorContext实例,可通过 wx.createSelectorQuery 获取。EditorC

EditorContext

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

EditorContext 实例,可通过 wx.createSelectorQuery 获取。

EditorContext 通过 id 跟一个 editor 组件绑定,操作对应的 editor 组件。



方法:

EditorContext.blur(Object object)
基础库 2.8.3 开始支持,低版本需做兼容处理。

编辑器失焦,同时收起键盘。

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.clear(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

清空编辑器内容

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.format(string name, string value)
基础库 2.7.0 开始支持,低版本需做兼容处理。

修改样式

参数

string name

属性

string value

支持设置的样式列表

name value verson
bold 2.7.0
italic 2.7.0
underline 2.7.0
strike 2.7.0
ins 2.7.0
script sub / super 2.7.0
header H1 / H2 / h3 / H4 / h5 / H6 2.7.0
align left / center / right / justify 2.7.0
direction rtl 2.7.0
indent -1 / +1 2.7.0
list ordered / bullet / check 2.7.0
color hex color 2.7.0
backgroundColor hex color 2.7.0
margin/marginTop/marginBottom/marginLeft/marginRight css style 2.7.0
padding/paddingTop/paddingBottom/paddingLeft/paddingRight css style 2.7.0
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily css style 2.7.0
lineHeight css style 2.7.0
letterSpacing css style 2.7.0
textDecoration css style 2.7.0
textIndent css style 2.8.0
wordWrap css style 2.10.2
wordBreak css style 2.10.2
whiteSpace css style 2.10.2

对已经应用样式的选区设置会取消样式。css style 表示 css 中规定的允许值。


EditorContext.getContents(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

获取编辑器内容

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数
Object res
属性 类型 说明
html string 带标签的HTML内容
text string 纯文本内容
delta Object 表示内容的delta对象

EditorContext.getSelectionText(Object object)
基础库 2.10.2 开始支持,低版本需做兼容处理。

获取编辑器已选区域内的纯文本内容。当编辑器失焦或未选中一段区间时,返回内容为空。

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数
Object res
属性 类型 说明
text string 纯文本内容

EditorContext.insertDivider(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

插入分割线

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.insertImage(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

插入图片。

地址为临时文件时,获取的编辑器html格式内容中 标签增加属性 data-local,delta 格式内容中图片 attributes 属性增加 data-local 字段,该值为传入的临时文件地址。

开发者可选择在提交阶段上传图片到服务器,获取到网络地址后进行替换。替换时对于html内容应替换掉 的 src 值,对于 delta 内容应替换掉 insert { image: abc } 值。

参数

Object object

属性 类型 默认值 必填 说明
src string 图片地址,仅支持 http(s)、base64、云图片(2.8.0)、临时文件(2.8.3)。
alt string 图像无法显示时的替代文本
width string 图片宽度(pixels/百分比)
height string 图片高度 (pixels/百分比)
extClass string 添加到图片 img 标签上的类名
data Object data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

this.editorCtx.insertImage({
  src: 'xx',
  width: '100px',
  height: '50px',
  extClass: className
})

EditorContext.insertText(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

覆盖当前选区,设置一段文本

参数

Object object

属性 类型 默认值 必填 说明
text string 文本内容
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.redo(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

恢复

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.removeFormat(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

清除当前选区的样式

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.scrollIntoView()
基础库 2.8.3 开始支持,低版本需做兼容处理。

使得编辑器光标处滚动到窗口可视区域内。

EditorContext.setContents(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

初始化编辑器内容,html和delta同时存在时仅delta生效

参数

Object object

属性 类型 默认值 必填 说明
html string 带标签的HTML内容
delta Object 表示内容的delta对象
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.undo(Object object)
基础库 2.7.0 开始支持,低版本需做兼容处理。

撤销

参数

Object object

属性 类型 默认值 必填 说明
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)




推荐阅读
  • <!DOCTYPEhtml><html><head><metacharsetUTF-8><meta ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • Tkinter Frame容器grid布局并使用Scrollbar滚动原理
    本文介绍了如何使用Tkinter实现Frame容器的grid布局,并通过Scrollbar实现滚动效果。通过将Canvas作为父容器,使用滚动Canvas来滚动Frame,实现了在Frame中添加多个按钮,并通过Scrollbar进行滚动。同时,还介绍了更新Frame大小和绑定滚动按钮的方法,以及配置Scrollbar的相关参数。 ... [详细]
  • html结构 ... [详细]
  • DOM事件大全
    1.事件:js与html的交互就是通过事件的,观察者模式2.事件流:从页面中接收事件的顺序IE::事件冒泡流,事件冒泡,事件从最具体的元素接收,然后逐级向上传播,主流浏览器都支持N ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了Vue2.5开发去哪儿网App从零基础入门到实战项目相关的知识,希望对你有一定的参考价值。第1章课程介绍本章 ... [详细]
  • 今天周六,原则上要休息,但想到下周还有一堆任务,还是先做一部分工作吧,就把之前做的票面设计器改了改,增加了上传图片和更换背景底图的功能。现在打算整理下这个设计器,也算对齐一个总结。不过这属于我们部门的 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • 导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
  • 在tp5项目中引入ueditor编辑器并实例化后插入图片出现目录创建失败问题在查看网络上各种解决方案之后总结如下:根据官网提示主要是因为图片保存的路径无权限导致,官方文档链接:ht ... [详细]
author-avatar
Sek_5123_533_477
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有