html div 可编辑,使div可编辑 contentEditable

属性 contentEditable

这是一个可编辑div

比如富文本的输入框就可以用可编辑的div(自定义一个富文本时可用)

或者另一个场景，有时候需要一个可输入框双击后，弹出富文本，编辑好后，回显到输入框中，输入框本身也可编辑，以tinymce为例

下面案例中的ve-tinymce是对tinymce二次封装过的一个组件

v-html="content0"

@dblclick="tinymceVisible=true">

:height="120" />

取 消

确 定

export default {

name:'TinymceTest',

data() {

return {

tinymceVisible:false,

content0: '',

content:''

}

},

methods: {

setRichText() {

this.content0 = this.content

this.tinymceVisible = false

}

}

}

.contentEdit {

box-sizing: border-box;

width: 200px;

height: 50px;

background-color: white;

outline: 0;

overflow-y: auto;

padding: 10px;

}