1.需求:
开发小程序时,想要在手机上添加编辑内容,使用u--textarea时,换行操作不显示,为此使用了uniapp自带的组件editor来实现:
2.使用:
html
<template>
<view class="">
<!-- <u--textarea v-model="content" placeholder="请输入活动地址..." maxlength='-1'></u--textarea> -->
<editor id="editor" class="ql-container m-ql-container" placeholder="请输入活动地址和详细的活动介绍..."
@ready="onEditorReady" @input="getEditorContent">
</editor>
</view>
</template>
<script>
export default {
data() {
return {
content: '',
}
},
methods: {
//1.初始化编辑器
onEditorReady() {
//将content是从后台获取的字符串,将字符串转化为delta对象
setTimeout(() => {
var htmls = this.content
console.log(htmls)
if (htmls) {
let contents = JSON.stringify(htmls)
console.log(contents)
uni.createSelectorQuery().select('#editor').context((res) => {
console.log(res);
let con = res.context
con.setContents({
html: htmls,
delta: contents
})
}).exec()
} else {
return
}
}, 500)
},
//2.获取编辑器内容,当前页面都能获取到
getEditorContent(e) {
this.content = e.detail.html;
},
}
}
</script>
<style scoped>
#editor {
width: 100%;
height: 300px;
margin-top:10px;
}
</style>
具体可参考官网:https://uniapp.dcloud.net.cn/component/editor.html