允许使用execCommand在contentEditable div中进行Tabbing,可以通过以下方法实现:
function insertTab(div) {
var range = window.getSelection().getRangeAt(0);
var tabNode = document.createTextNode('\t');
range.insertNode(tabNode);
range.setStartAfter(tabNode);
range.setEndAfter(tabNode);
range.collapse(false);
}
div[contenteditable] {
white-space: pre;
tab-size: 4;
}
div.addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
event.preventDefault();
insertTab(div);
}
});
div.addEventListener('paste', function(event) {
var text = event.clipboardData.getData('text/plain');
var tabRegex = /\t/g;
var spaces = ' ';
text = text.replace(tabRegex, spaces);
document.execCommand('insertText', false, text);
event.preventDefault();
});
通过以上方法,可以实现在contentEditable div中进行Tabbing的效果。
云+社区沙龙online第5期[架构演进]
云原生正发声
云+社区技术沙龙[第14期]
API网关系列直播
云+社区技术沙龙[第7期]
云+社区技术沙龙[第27期]
企业创新在线学堂
Elastic 中国开发者大会
云+社区技术沙龙[第11期]
Elastic 实战工作坊
领取专属 10元无门槛券
手把手带您无忧上云