使div可编辑 contentEditable

属性 contentEditable

<div contenteditable="true">这是一个可编辑div </div>

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

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

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

<template>
    <div>
        <div contenteditable="true" class="contentEdit" 
            v-html="content0"
            @dblclick="tinymceVisible=true">
        </div>
        <Modal v-model="tinymceVisible" title="富文本">
            <ve-tinymce v-model="content" 
                :height="120" />
            <div slot="footer">
                <i-button type="text" @click.native="tinymceVisible=false">取 消</i-button>
                <i-button type="warning" ghost  @click.native="setRichText">确 定</i-button>
            </div>
        </Modal>      
    </div>
</template>

<script>
export default {
    name:'TinymceTest',
    data() {
        return {
            tinymceVisible:false,
            content0: '',
            content:''
        }
    },
    methods: {
        setRichText() {
            this.content0 = this.content
            this.tinymceVisible = false
        }
    }
}
</script>

<style scoped>
    .contentEdit {
        box-sizing: border-box;
        width: 200px;
        height: 50px;
        background-color: white;
        outline: 0;
        overflow-y: auto;
        padding: 10px;
    }
</style>