在div中实现可编辑操作

用习惯了前段的框架，反而会把最基本的东西给忘记了；

<div style="width:100px;height:200px;border:1px solid red" contenteditable></div>

之前一直觉得在div这个元素中实现便捷文字会很困难，会使用到各种js的操作之类的，一查发现自己想多了，只需要在div中添加contenteditable属性即可；

实现了div文字编辑，那我们怎么获取文字内容呢？

1.js操作：

<div style="width:100px;height:200px;border:1px solid red" contenteditable id="editContent" @click="getDivVal"></div>

getDivVal(){
       console.log(document.getElementById('editContent').innerHTML)

　　　　console.log(document.getElementById('editContent').textContent)

},

主要是在div元素上绑定一个id值，然后通过js的文档操作获取到整个元素，之后再使用innerHTML/textContent获取到值

注意：

1.innerHTML既可以获取HTML中的文本内容，也可以在HTML元素中插入内容

document.getElementById('editContent').innerHTML=“我是张三”

-------------------------------------------------------------------------------------------------------------------------------------

再通过js操作获取到元素中的数据时，不同的元素，所使用的api有不同

原文地址：https://www.cnblogs.com/mamifeng/p/12461166.html