核心
1.在标签上使用contentEditable="true"
2.ios 上需要兼容-webkit-user-select:text;
作用 和 innerHTML 一样；
<view
class="texta"
ref="texta"
style="-webkit-user-select:text;"
contentEditable="true"
v-html="myTextarea">
</view>
//this.$refs.texta.$el.innerHTML //获取元素内容
encodeURIComponent(this.$refs.texta.$el.innerHTML);//通过url编码格式上传给后端即可--防止依赖注入
结果
代码预览
<template>
<view class="content">
<view
class="texta"
ref="texta"
style="-webkit-user-select:text;"
contentEditable="true"
v-html="myTextarea">
</view>
<view>
<button @click="updatePhoto">上传图片</button>
<button @click="updateVideo">上传视频</button>
</view>
<button type="default" @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
myTextarea: ''
}
},
onLoad() {
},
methods: {
updatePhoto(){
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res)=> {
let imgPath = res.tempFilePaths[0];
this.$refs.texta.$el.innerHTML += `<div style="display: block;width: 100%;margin:10rpx auto;">
<img style="width: 100%;height: auto;" src="${imgPath}" alt="图片">
</div>`
}
});
},
updateVideo(){
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
success:(res)=> {
let videoPath = res.tempFilePath;
this.$refs.texta.$el.innerHTML += `<div style="display: block;width: 100%;">
<video controls style="width: 100%;height: auto;" src="${videoPath}">
</div>`
}
});
},
submit(){
console.log(this.$refs.texta.$el.innerHTML)
}
}
}
</script>
<style>
.texta{
width: 90%;
min-height: 500rpx;
/* background-color: #007AFF; */
border: 2rpx solid yellow;
box-sizing: border-box;
padding: 20rpx;
margin: 20rpx auto;
font-size: 28rpx;
line-height: 36rpx;
}
</style>
