微信小程序使用editor 富文本编辑器

.wxml

<editor id="editor" class="item-content ql-container" placeholder="请输入新闻内容" bindstatuschange="onStatusChange" bindready="onEditorReady" bindinput="onInput" bindblur="onBlur">
editor>
1
2

.js

1、注册editor

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
        that.oneEditor = res.context;
    }).exec()
},
1
2
3
4
5
6

1、注册editor

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
        that.oneEditor = res.context;
    }).exec()
},
1
2
3
4
5
6

1、初始化一个实例

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
        that.oneEditor = res.context;
    }).exec()
},
1
2
3
4
5
6

2、失去焦点后收起键盘

onBlur(e) {
    // console.log(e);
    this.oneEditor.blur()
},
1
2
3
4

3、获取输入的总内容

getContent() {
    let that = this;
    this.oneEditor.getContents({
        success: (res) => {
            that.setData({
                content: res.html
            })
        }
    })
},
1
2
3
4
5
6
7
8
9
10

4、获取每次输入后的内容

onInput(e) {
    this.setData({
        content: e.detail.html
    })
},
1
2
3
4
5

tip:3、4选一种就可以

5、回显

wx.createSelectorQuery().select('#editor').context(function (r) {
    that.oneEditor = r.context;
    that.oneEditor.setContents({
        'html': res.content,//接口获取的数据
    });
}).exec()
1
2
3
4
5
6

.wxss

.item-content {
    flex: 1;
    text-align: left;
    color: #222222;
    font-size: 32rpx;
}
.ql-container {
    box-sizing: border-box;
    width: 100%;
    min-height: 150rpx;
    font-size: 16px;
    overflow: auto;
    padding: 10px 10px 20px 10px;
    font-size: 32rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15