小程序如何插入简单的富文本编辑框?
网友回复
微信小程序提供了一个内置的富文本编辑器组件 <editor>,它可以用来实现 rich-editor 功能。以下是如何在微信小程序中使用 rich-editor 的详细步骤:
WXML 文件在你的 WXML 文件中添加 <editor> 组件:
<view class="container"> <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindready="onEditorReady" bindinput="onContentChange" ></editor> <view class="toolbar"> <button bindtap="format" data-name="bold">加粗</button> <button bindtap="format" data-name="italic">斜体</button> <button bindtap="format" data-name="underline">下划线</button> <button bindtap="insertImage">插入图片</button> </view> <button bindtap="getContent">获取内容</button> </view>JS 文件
在对应的 JS 文件中添加以下代码:
Page({ data: { placeholder: '请输入内容...', editorCtx: null, }, onEditorReady() { const that = this; wx.createSelectorQuery().select('#editor').context(function(res) { ...
点击查看剩余70%