双击编辑内容的行为逻辑，给你给简单示例
至于双击时候具体的UI，比如边上出现的那个框框，就是你自己改样式的事了

直接查看示例：
https://jsfiddle.net/qzwavav9/

或者查看下面代码
HTML

<p class="demo">Lorem ipsum dolor sit amet.</p>

CSS

body {
    background-color: #eee;
}

input {
    vertical-align: top;
    outline: 0;
    border: 0;
}

.demo {
    cursor: pointer;
    border-bottom: 1px dashed;
}

.textarea-focus,
.demo {
    width: 300px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align: center;
    padding-bottom: 5px;
}

.textarea-focus {
    border: 1px solid #ccc;
    background-color: #eee;
}

JS

   let demo = document.querySelector('.demo');
    demo.ondblclick = function() {
        let nowText = this.innerText; //初始的文本内容
        let textarea = document.createElement('input'); //创建编辑用的文本框
        textarea.type = 'text';
        textarea.value = nowText;
        textarea.className = 'textarea-focus';

        this.innerText = '';
        this.appendChild(textarea); //只有双击时向p添加input子标签，非双击时会被移除
        textarea.focus(); //双击时候触发input文本框的获得焦点事件

        textarea.onblur = function() { //文本框失去焦点时
            demo.innerText = this.value;
            //重设p的文本为在input文本框中输入的内容
        };
    };