基於Angular7.1和TypeScript實現

Html程式碼

                   <div style="padding-left: 0px;">
                        <div id='contentTem' class='temp-style' contentEditable="true" (drop)="drop($event)" (dragover)="allowDrop($event)" ng-change="changeValue($event)">
                        1
 
</div>
                        <div>
                            效果預覽
                            <div class='temp-style' style="min-height: 150px;" id='preview'></div>
                        </div>
                    </div>
                    <div>
                        <
 
div><a href="javascript:(0)" ng-click='Edit()'>新增自定義引數</a></div>
                        <div class='temp-style option'>
                            <div>
                                <span id='t1' contenteditable="false" draggable="true" (dragstart)="drag($event)"
 
>[拖拽]</span>
                            </div>
                            <div>
                                <span id='t2' contenteditable="false" draggable="true" (dragstart)="drag($event)">[拖拽2]</span>
                            </div>
                        </div>
                    </div>

TS程式碼

   allowDrop = function (ev) {
        $("#contentTem")[0].focus();
        ev.preventDefault();
    }

    drag = function (ev) {
        $("#contentTem")[0].focus();
        var selection = window.getSelection()
        // 設定最後游標物件
        this.lastEditRange = selection.getRangeAt(0);
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    drop = function (ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        this.insertHtmlAtCaret($("#" + data).html())
    }
    changeValue = function (ev) {
        let win;
        win = window.event;
　　　　//禁止輸入特殊字元
        if ((win.keyCode >= 49 && win.keyCode <= 82) || (win.keyCode >= 96 && win.keyCode <= 105)) {
　　　　　　　//判斷回車進行內容替換
            if (win.keyCode == 13) {
                this.insertHtmlAtCaret(ev.key);
            }
        }
    }
    insertHtmlAtCaret = function (html) {
        if (html == undefined) {
            return;
        }
        var selection;
        selection = getSelection()
        // 設定最後游標物件
        this.lastEditRange = selection.getRangeAt(0);
        this.lastEditRange.deleteContents();
        //判斷是否是拖拽
        var htmlData = "";
        if (html != undefined) {
            htmlData = html;
        } else {
            htmlData = $("#contentTem").html();
        }

        if (selection.anchorNode.data != undefined && selection.anchorNode.data.indexOf("[Key]") > -1) {
            htmlData = htmlData.replace(/\[Key]/g, '<span style="color:red" contentEditable="false">[顯示內容]</span>');
            $("#contentTem").html('');
            $("#contentTem")[0].focus();
            var el = document.createElement("div");
            el.innerHTML = htmlData;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            //將內容填充進去
            this.lastEditRange.insertNode(frag);
            if (this.lastEditRange) {
                //重新設定游標位置
                this.lastEditRange = this.lastEditRange.cloneRange();
                this.lastEditRange.setStartAfter(lastNode);
                this.lastEditRange.collapse(true);
                selection.removeAllRanges();
                selection.addRange(this.lastEditRange);
            }
        } else {
            htmlData = '<span style="color:red" contentEditable="false">' + htmlData + '</span>';
            var el = document.createElement("div");
            el.innerHTML = htmlData;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            //將內容填充進去
            this.lastEditRange.insertNode(frag);
            if (this.lastEditRange) {
                //重新設定游標位置
                this.lastEditRange = this.lastEditRange.cloneRange();
                this.lastEditRange.setStartAfter(lastNode);
                this.lastEditRange.collapse(true);
                selection.removeAllRanges();
                selection.addRange(this.lastEditRange);
            }
        }
        //預覽區域
        var previewHtml = $("#contentTem").html();
        previewHtml = $("#contentTem").html().replace(/\[Key]/g, '顯示內容');
        $("#preview").html(previewHtml);
    }

因為完成的比較匆忙,功能實現的不完美,後續在優化