js @功能實現

PC端

1. html

<link rel="stylesheet" href="/atwho/jquery.atwho.css" />
<script type="text/javascript" src="/atwho/jquery.caret.js"></script>
<script type="text/javascript" src="/atwho/jquery.atwho.js"></script>
<div id="editable" contentEditable="true"></div>
<div id="editable1" style="display: none" contentEditable="true"></div> // 避免用戶看見轉化過程，所以隱藏轉化

2. js

//初始化
var at_config = {
    at: "@",
    insertTpl: '${atwho-at}${name}',
    displayTpl: "<li data-id='${id}'>${name} / ${role} </li>",
    callbacks: {
        remoteFilter: function(query, callback) {
            var ll = new Array();
            $.ajax({
            	type:"get",
				url: "",
				success: function (data){
					$.each(res.data, function(index, element) {
	                     ll.push({ name: element.employeeName, id: element.id, role: element.roleName });
	                 });
                	callback(ll);
				}
			})
        }
    }
}
//提交時
if (!$("#editable").text() || $("#editable").text().length > 300) {
  return alert("請填寫審批意見不得超過300字符")
}
let atList = []//@列表
for (var i = 0; i < $("#editable span").length; i++) {
    atList.push({
        targetUserId: $("#editable span").eq(i).attr("id"),
        targetUserName: $("#editable span").eq(i).attr("name"),
    })
}
$("#editable1").html($("#editable").html())
$("#editable1 span").replaceWith(function(data) { // 轉化規則`@id;` 
    if ($(this).attr("id")) {
        return "@" + $(this).attr("id") + ";"
    }
});
$.ajax({
	type: "post",
	url: ""
	data: JSON.stringify({
       "opinion": $.trim($("#editable1").text()),
       "atList": atList
    }),
})

3. 回顯

var {atList, opinion} = result;
for (var m = 0; m < atList.length; m++) {
    var { targetUserId, employeeName } = atList[m]
    opinion = opinion.replace(new RegExp("@" + targetUserId + ";", "g"), "<span>@" + employeeName + "</span>")
}
`<p>${opinion}</p>`

4. 注意360安全瀏覽器 兼容模式下無法讀取 contentEditable，需在html加入下列代碼

<!-- saved from url=(0014)about:internet -->

移動端

1. html

<div id="editable" contentEditable="true" placeholder="請填寫意見(必填)"></div>
<div id="editable1" style="display: none" contentEditable="true" placeholder="請填寫意見(必填)"></div>

2. js

var lastEditRange;
$("#editable").on("input", function(e) {//觸發彈窗
    // 獲取選定對象
    var selection = getSelection()
    // 設置最後光標對象
    lastEditRange = selection.getRangeAt(0)
    if (selection.anchorOffset > 0 && selection.focusNode.nodeValue) {
        if (selection.focusNode.nodeValue[selection.anchorOffset - 1] == "@") {
            $(this).blur();
            $(".dialog").show();
            $(".dialog input").val("");
    		getPeopleList();
        }
    }
});
$(".dialog input").on("input", function() {
    getPeopleList($(this).val())
});
function getPeopleList(val=""){ //加載人員列表
	$.ajax({
		type: "get?searchName="+val,
		url: ""
	},
	success: function(){
		$(".dialog ul").html("");
        for (var i = 0; i < res.data.list.length; i++) {
           var { name, departmentName,id } = res.data.list[i]
           $(`<li onclick="saveRelay(name,id)">
               <h3>${name}</h3>
               <p>${departmentName}</p>
           </li>`).appendTo(".dialog ul")
        }
	})
}
function saveRelay( name, id ){ // 選中事件
	$(".dialog").hide();
	var { name, id } = item;
    let str = `<span id="${id}" name="${name}" contenteditable="false">@${name}</span>`
    $("#editable").focus()
     // 獲取選定對象
     var selection = getSelection()
     // 判斷是否有最後光標對象存在
     if (lastEditRange) {
         // 存在最後光標對象，選定對象清除所有光標並添加最後光標還原之前的狀態
         selection.removeAllRanges()
         selection.addRange(lastEditRange)
     }
     // 如果是文本節點則先獲取光標對象
     var range = selection.getRangeAt(0)
     // 獲取光標對象的範圍界定對象，一般就是textNode對象
     var textNode = range.startContainer;
     var thisP = textNode.parentNode;
     var num = 0;
     for (var i = 0; i < thisP.childNodes.length; i++) {
         if (thisP.childNodes[i] == textNode) {
             var inDex = selection.anchorOffset
             var arr = thisP.childNodes[i].nodeValue.split("");
             arr.splice(inDex - 1, 1);
             thisP.childNodes[i].nodeValue = arr.join("")
             var liTextNode = document.createTextNode(" "); // 處理光標顯示bug
             num = i + 2
             if (thisP.childNodes[i + 1]) {
                 thisP.insertBefore($(str)[0], thisP.childNodes[i + 1])
             } else {
                 thisP.appendChild($(str)[0])
                 thisP.appendChild(liTextNode)
             }
             break
         }
     }
     // 光標移動到到原來的位置加上新內容的長度
     range.setStart(thisP, num)
     // 光標開始和光標結束重疊
     range.collapse(true)
     // 清除選定對象的所有光標對象
     selection.removeAllRanges()
     // 插入新的光標對象
     selection.addRange(range)
     // 無論如何都要記錄最後光標對象
     lastEditRange = selection.getRangeAt(0)
}