微信小程序使用editor 富文本编辑器-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序使用editor 富文本编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

.wxml

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

.js

1、注册editor

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
        that.oneEditor = res.context;
    }).exec()
},

1、注册editor

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
        that.oneEditor = res.context;
    }).exec()
},

1、初始化一个实例

onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
        that.oneEditor = res.context;
    }).exec()
},

2、失去焦点后收起键盘

onBlur(e) {
    // console.log(e);
    this.oneEditor.blur()
},

3、获取输入的总内容

getContent() {
    let that = this;
    this.oneEditor.getContents({
        success: (res) => {
            that.setData({
                content: res.html
            })
        }
    })
},

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

onInput(e) {
    this.setData({
        content: e.detail.html
    })
},

tip:3、4选一种就可以

5、回显

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

.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;
}

文章来源地址https://www.toymoban.com/news/detail-720560.html

到了这里，关于微信小程序使用editor 富文本编辑器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！