vue中的可编辑div

可编辑div可能很简单 contenteditable="true" 就能实现了

但是，，，输入一个字的时候，焦点会自动跳到文本开头，很烦的有木有

在网上看见一个大神写的，引用过来，很久了，忘记了出处

将可编辑div单独设置成一个组件

子组件中

<template>

  <div class="edit" placeholder="11"

      v-html="innerText"

      :contenteditable="canEdit"

      @focus="isLocked =true"

      @blur="isLocked =false"

      @input="changeText">

</template>

watch: {

'value'(){

if (!this.isLocked &&!this.innerText) {

this.innerText =this.value

    }

}

},

methods: {

changeText(){

this.$emit('input', this.$el.innerHTML)

  }

},

父组件中只要 v-model='你想要绑定的数据'

对vue不熟悉，，当然这位大神也说看下官方文档v-model这一块

大致是如果父组件的v-model会首先绑定子组件的emit的input方法

背景：需要编写一个简单的文本输入框，要求可以添加超链接，并且超链接可以修改内容，超链接在文本框中只显示标题（类似在html中显示a标签一样）

目前的基于vue框架：

html:

contenteditable属性可以把div变成可编辑状态，这是开发文本编辑框的基础。添加该属性后基本是满足一般文本输入。

1.换车键问题：

在可编辑div回车会在文本框中添加div标签（也可能是p标签），所以需要在div中监控回车事件并取消默认事件

2.获取div的内容

需要使用this.$refs.myeditor.innerHTML来获取，text.textarea虽然绑定了值但实际是获取不到的，除非有进行手动赋值。

3.添加超链接

这里主要讲讲添加的方式，具体可根据需求来。

因为我这里是点击一个按钮打开d框的方式来添加超链接，所以：

这样能确保超链接是添加在你之前光标定位的地方，不然就会出现超链接只能添加在文本尾部的情况。

涉及光标的方法：

---