[英]How do I store data added in react-draft-wysiwyg Editor to my state
[英]How do I add a 'TAB' feature in my custom wysiwyg editor?
“制表符”是指很多空間,因此,當我在編輯器中編寫代碼時,我希望能夠點擊鍵盤上的制表符按鈕並獲得空格,而不是在元素之間進行切換。
有一些插件可以針對制表符執行此操作。 這是一個非常全面的。 如果您只想要一些代碼,就可以將其插入腳本中,那么我寫了一些簡單的東西。
var shift = false;
function codebox(element) {
element.addEventListener("keyup", function(event) {
if (event.keyCode == 16)
shift = false;
});
element.addEventListener("keydown", function(event) {
if (event.keyCode == 16) {
shift = true;
return;
}
if (event.keyCode == 9) {
var start = this.selectionStart;
var end = this.selectionEnd;
var lead = this.value.substr(0, start);
var chunk = this.value.substr(start, end - start);
if (!shift) {
if (start == end)
lead = lead + "\t";
else {
lead = ("\n" + lead).split("").reverse().join("").replace(/\n/, "\t\n").split("").reverse().join("").substr(1);
chunk = chunk.replace(/\n/g, "\n\t");
if (chunk.substr(-2) == "\n\t")
chunk = chunk.substr(0, chunk.length - 1);
}
} else {
if (chunk.split("")[0] == "\t") {
lead = lead + "\t";
chunk = chunk.substr(1);
}
lead = ("\n" + lead).split("").reverse().join("").replace(/\t\n/, "\n").split("").reverse().join("").substr(1);
chunk = chunk.replace(/\n\t/g, "\n");
}
this.value = lead + chunk + this.value.substr(end);
this.selectionStart = lead.length;
this.selectionEnd = lead.length + chunk.length;
event.preventDefault();
}
});
}
要使用它,只需執行以下操作:
new codebox(myTextAreaElement);
由於需要空格,因此可以使用在空格和制表符之間進行轉換的過程來包裝事件處理程序。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.