1.需求：
开发小程序时，想要在手机上添加编辑内容，使用u–textarea时，换行操作不显示，为此使用了uniapp自带的组件editor来实现：
文章来源：https://www.toymoban.com/news/detail-726892.html
2.使用：
<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文章来源地址https://www.toymoban.com/news/detail-726892.html
完成！
到了这里，关于uniapp中使用编辑器editor的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
