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

预览效果.jpg

在wxml文件中，插入编辑器 editor

id="editor"

class="ql-container"

placeholder="{{placeholder}}"

value="{{articleContent}}"

bindinput="getEditorValue"

bindstatuschange="onStatusChange"

bindready="onEditorReady">

JS部分

在data中定义富文本编辑器所需要的变量

data: {

articleContent: '', //文章正文

formats: {},

readOnly: false,

placeholder: '开始输入...',

editorHeight: 300,

keyboardHeight: 0,

isIOS: false

}

//请求接口数据

getDetail(id) {

if (!id) return false

util.request({

url: api.ArticleDetail,

data: {

id: id

}

}).then(res => {

if (res.code == 200) {

const article = res.data.records[0]

this.setData({

articleContent: article.content //正文内容，要写入富文本编辑器中的内容

})

event.emit('resetEditor', {}) //调用onEditorReady方法，重新渲染编辑器

}

})

},

// -----------富文本编辑器 start ------------------

readOnlyChange() {

this.setData({

readOnly: !this.data.readOnly

})

},

updatePosition(keyboardHeight) {

const toolbarHeight = 50

const { windowHeight, platform } = wx.getSystemInfoSync()

let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight

this.setData({ editorHeight, keyboardHeight })

},

calNavigationBarAndStatusBar() {

const systemInfo = wx.getSystemInfoSync()

const { statusBarHeight, platform } = systemInfo

const isIOS = platform === 'ios'

const navigationBarHeight = isIOS ? 44 : 48

return statusBarHeight + navigationBarHeight

},

onEditorReady() {

const that = this

wx.createSelectorQuery().select('#editor').context(function (res) {

that.editorCtx = res.context

//一进入页面就初始化富文本编辑器，此时还未发送请求获取不到数据，编辑器内容html为空(that.data.articleContent为空)

//请求完数据后再调用这个方法，才能取到数据写入编辑器')

that.editorCtx.setContents({

html: that.data.articleContent //将数据写入编辑器内

})

//在这里用event.on注册onEditorReady方法

//当event.emit执行时，就会调用onEditorReady方法，重新渲染富文本编辑器

//此时就能获取到数据，写入编辑器中(即给that.data.articleContent赋值后，他不再为空)

event.on('resetEditor', that, that.onEditorReady.bind(that))

}).exec()

},

blur() {

this.editorCtx.blur()

},

format(e) {

let { name, value } = e.target.dataset

if (!name) return

console.log('format', name, value)

this.editorCtx.format(name, value)

},

onStatusChange(e) {

const formats = e.detail

this.setData({ formats })

},

insertDivider() {

this.editorCtx.insertDivider({

success: function () {

console.log('insert divider success')

}

})

},

clear() {

this.editorCtx.clear({

success: function (res) {

console.log("clear success")

}

})

},

removeFormat() {

this.editorCtx.removeFormat()

},

insertDate() {

const date = new Date()

const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`

this.editorCtx.insertText({

text: formatDate

})

},

insertImage() {

const that = this

wx.chooseImage({

count: 1,

success: function (res) {

that.editorCtx.insertImage({

src: res.tempFilePaths[0],

data: {

id: 'abcd',

role: 'god'

},

width: '80%',

success: function () {

console.log('insert image success')

}

})

}

})

},

getEditorValue(e) {

this.setData({

articleContent: e.detail.html

})

console.log(e.detail.html)

},

// -----------富文本编辑器 end ------------------

关于样式

注意：可以直接拷贝官网的editor样式表，但一定要引入weui.wxss和iconfont.wxss

@import "./weui.wxss";

@import "./iconfont.wxss";

.container {

position: absolute;

top: 0;

left: 0;

width: 100%;

padding-bottom: 50rpx;

background-color: #fff;

border-top: 1px solid #dfdfdf;

}

.ql-container {

box-sizing: border-box;

width: 100%;

height: 100%;

font-size: 16px;

line-height: 1.5;

/* overflow: auto; */

padding: 10px 10px 20px 10px;

border: 1px solid #ECECEC;

border-top: 0;

}

.ql-active {

color: #22C704;

}

.iconfont {

display: inline-block;

width: 30px;

height: 30px;

cursor: pointer;

font-size: 20px;

}

.toolbar {

box-sizing: border-box;

padding: 0 10px;

height: 50px;

width: 100%;

position: fixed;

left: 0;

right: 100%;

bottom: 0;

display: flex;

align-items: center;

justify-content: space-between;

border: 1px solid #ECECEC;

border-left: none;

border-right: none;

background-color: #fff;

}

因为我的富文本编辑器在页面底部，当输入很多内容时，无法上拉回到顶部查看其它内容(编辑器外面的内容)，所以必须在页面的最外层使用纵向滚动条。

以上。