vue可编辑div_Vue 实现 div contenteditable="true" 类似于 v-model 的效果
要实现的功能：
1、输入的HTML标签、js代码，不被解析，正常显示；
2、富文本编辑的要正常显示效果；
3、可支持换行，禁止换行；
4、只粘贴纯文本；
效果:
支持换行的
不支持换行的
使用：
// 组件调用
组件代码：
v-html="innerText"
:placeholder="placeholder"
:contenteditable="canEdit"
@keydown.13="keyDown($event)"
@focus="isLocked = true"
@blur="isLocked = false"
@input="changeText">
export default{
name: 'v-edit-div',
props: {
value: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
canEdit: {
type: Boolean,
default: true
},
//禁止换行
nowrap: {
type: Boolean,
default: false
}
},
data(){
return {
innerText: this.value,
isLocked: false
}
},
watch: {
'value'(){
if (!this.isLocked && !this.innerText) {
this.innerText = this.value;
}
}
},
methods: {
changeText(){
// 解决：末尾换行，看不见的
，删不掉，造成清空无法出现placeholder文字
if(this.$el.innerHTML=="
"){
this.$el.innerHTML="";
}
this.$emit('input', this.$el.innerHTML);
},
keyDown(e){
console.log("回车键按下--nowrap--value:",this.nowrap)
if(this.nowrap){
e.preventDefault();
}
}
}
}
.edit-div {
width: 100%;
height: 100%;
overflow: auto;
word-break: break-all;
outline: none;
user-select: text;
white-space: pre-wrap;
text-align: left;
}
.edit-div[contenteditable=true]{
user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only;
}
.edit-div[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
color: #ccc;
}
新问题：
ios端失去焦点，键盘不隐藏
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献5条内容
所有评论(0)