<template>
<view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" @input="listenInput"></editor>
<button type="default" @touchstart.stop.prevent="insert">插入图片</button>
<button type="warn" @touchstart.stop.prevent="clear">清空</button>
</view>
</template>
<script>
export default {
data() {
return {
placeholder: '开始输入...'
}
},
methods: {
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
},
insert() {
this.editorCtx.insertImage({
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597926465183&di=7e80a34113fc7660436bb754aeb840f5&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
width: '24px',
height: '24px',
extClass: 'emojiIcon'
})
},
clear() {
this.editorCtx.clear()
},
listenInput(e) {
console.log(e)
}
}
}
</script>
<style lang="scss">
.container {
padding: 10px;
}
#editor {
width: 100%;
height: 300px;
background-color: #CCCCCC;
}
button {
margin-top: 10px;
}
</style>