基于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); }
因为完成的比较匆忙,功能实现的不完美,后续在优化
原文地址:https://www.cnblogs.com/-Kam/p/10057608.html
时间: 2024-10-11 15:08:33