Vue 实现 div contenteditable="true

要实现的功能：

1、输入的HTML标签、js代码，不被解析，正常显示；
2、富文本编辑的要正常显示效果；
3、可支持换行，禁止换行；
4、只粘贴纯文本；

效果:

支持换行的
不支持换行的

使用：

// 组件调用
<v-edit-div v-model='xxx' placeholder="支持换行的"></v-edit-div>
<v-edit-div v-model='xxx' placeholder="不支持换行的" nowrap></v-edit-div>

组件代码：

<template>
    <div class="edit-div"
         v-html="innerText"
         :placeholder="placeholder"
         :contenteditable="canEdit"
         @keydown.13="keyDown($event)"
         @focus="isLocked = true"
         @blur="isLocked = false"
         @input="changeText">
    </div>
</template>
<script>
    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(){
                // 解决：末尾换行，看不见的<br>，删不掉，造成清空无法出现placeholder文字
                if(this.$el.innerHTML=="<br>"){
                    this.$el.innerHTML="";
                }
                this.$emit('input', this.$el.innerHTML);
            },
            keyDown(e){
                console.log("回车键按下--nowrap--value:",this.nowrap)
                if(this.nowrap){
                    e.preventDefault();
                }
            }
        }
    }
</script>
<style>
    .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;
    }
</style>

参考：https://segmentfault.com/a/1190000008261449

新问题：
ios端失去焦点，键盘不隐藏