contenteditable

contenteditable

 <div id="edit_content_split_name" class="edit-content-split" contenteditable="true"></div>

contentEditablehtml中的一个属性。设置html的contentEditable="true"时，即可开启该元素的编辑模式 document.getElementById("edit_content_split_name").innerHTML 默认复制获取当前元素的值

封装组件

	<div class="flex flex-jus-sp">
            <div class="flex flex-align-c">
                <a-button class="margin-r-10" @click="addFormulaOrSymbol('formula', 'name')">插  入公式</a-button>
                <symbol-edit
                        :visible="symbolVisible"
                        @onClick="addFormulaOrSymbol('symbol', 'name')"
                        @choose="chooseSymbol"
                ></symbol-edit>
            </div>
            <div>
                <a-button type="primary" class="margin-l-10" @click="editTreeName">保 存</a-button>
                <a-button class="margin-l-10" @click="closeEditTreeName">取 消</a-button>
            </div>
        </div>

window.getSelection();

window.getSelection()，返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。 blog.csdn.net/weixin_4242…

window.getSelection().getRangeAt

返回选区开始的节点（Node）。
因为通常情况下用户只能选择一个范围，所以只有一个选区（range），此方法一般为getRangeAt(0)

window.getSelection().anchorNode

返回该选区起点所在的节点

this.anchor = { r: select.getRangeAt(0) };

可以记录当前点击的距离如下图