Implémentation de l'éditeur de code version Web

Puis j'ai écrit il y a quelques jours un blog https://blog.csdn.net/woyebuzhidao321/article/details/131495855 , qui mentionnait l'api impliquée dans la création de l'espace de travail de la version web de vscode. une version web du code sur un coup de tête Editeur, si avant octobre 2020, il peut être un fantasme d'implémenter une version web de l'éditeur de code. En raison de la difficulté d'exploitation des fichiers locaux côté web, il est difficile de s'en procurer Jusqu'à l'émergence de , il a brisé le goulot d'étranglement d'origine File System Access API.

Mise à jour importante d'octobre 2020 Chrome 86

Chrome 86 a lancé une version stable en octobre 2020, et il est maintenant entièrement appliqué aux plates-formes telles qu'Android, Chrome OS, Linux, macOS et Windows. Jetons un coup d'œil à cette mise à jour importante.

Pour voir toutes les mises à jour, veuillez visiter ( https://www.chromestatus.com/features#milestone=86 ).

Ajout de fonctionnalités stables
Accès au système de fichiers

Rappelez-vous le système de fichiers local dans Chrome 83, une fonctionnalité expérimentale à l'époque, désormais stable. En appelant showOpenFilePicker la méthode, vous pouvez appeler la fenêtre de sélection de fichier, puis lire et écrire le fichier via le descripteur de fichier renvoyé. code afficher comme ci-dessous:

const pickerOpts = {
    
    
  types: [
    {
    
    
      description: "Images",
      accept: {
    
    
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};
// create a reference for our file handle
let fileHandle;

async function getFile() {
    
    
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

Adresse officielle du document :
https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker

vscode网页版Également apparu après cela. https://insiders.vscode.dev/

J'ai donc suivi le grand cadre pour implémenter un
rendu de démonstration

basé sur l'ajout, la suppression, la modification et la requête de fichiers. La vitesse de lecture et d'écriture est très agréable

dossier ouvert

Ouvrez d'abord un répertoire de code

$('#openFolderBtn')[0].addEventListener('click', async () => {
    
    
	try {
    
    
	// // 得到异步迭代器
		dirHandle = await window.showDirectoryPicker();

		const createTree = async () => {
    
    
			const root = await createTreeModel(dirHandle);
			fileArr = root;
			treeInit();
		}
		createTree();
		
	} catch (err) {
    
    
		console.log(err)
	}
})

Cela fera apparaître une fenêtre contextuelle de fichier
window.showDirectoryPickeret renverra un descripteur de fichier de manière asynchrone. Après avoir sélectionné le fichier, une invite apparaîtra

pour créer une structure de données arborescente.

lire le fichier

// 读取文件
async function reader() {
    
    
	if (fileHandle) {
    
    
		let file = await fileHandle.getFile();
		fileName.innerText = file.name;

		let reader = new FileReader();
		reader.onload = function (event) {
    
    
			let contents = escapeHtml(event.target.result);
			$("#textbox")[0].innerHTML = `<pre><code id="code">${
      
      contents}</code></pre>`;
			// hljs.highlightAll();
			hljs.highlightBlock($("#code")[0])
		};
		reader.readAsText(file);
	}
}

fileHandleC'est le handle de fichier correspondant, getFileobtenez le fichier en appelant la méthode, puis utilisez FileReaderle constructeur pour lire le contenu du fichier et l'afficher

ouvrir un fichier

Comment ouvrir un fichier local séparément

$('#openfile')[0].addEventListener('click', async () => {
    
    
	try {
    
    
		const openFileHandle = await window.showOpenFilePicker({
    
    
			types: [{
    
    
				accept: {
    
    
					"text/plain": [".txt"]
				}
			}],
			multiple: false
		});

		fileHandle = openFileHandle[0];
		reader();
	} catch (err) {
    
    
		console.log(err);
	}
})

Choisissez un fichier et ouvrez

comment créer un dossier

$("#createFolder")[0].addEventListener('click', async (e) => {
    
    
	const folderName = prompt('请输入文件夹名称');
	if (folderName) {
    
    
		await dirHandle.getDirectoryHandle(folderName, {
    
     create: true });
		console.log('文件夹创建成功');
		fileArrFlat = [];
		fileArr = await createTreeModel(dirHandle);
		treeInit();
	}
})

dirHandle est window.showDirectoryPickerle descripteur de fichier renvoyé, getDirectoryHandlecréé en appelant la méthode.

créer un fichier

// 创建文件
$("#createFile")[0].addEventListener('click', async (e) => {
    
    
	const fileName = prompt('请输入文件名称');
	if (fileName) {
    
    
		try {
    
    
			if (!(await dirHandle.queryPermission()) === 'granted') {
    
    
				alert('文件不允许读写！');
				return;
			}
			const targetFile = await dirHandle.getFileHandle(fileName, {
    
     create: true });

			fileArrFlat = [];
			fileArr = await createTreeModel(dirHandle);
			treeInit();
		} catch (err) {
    
    
			console.log(err)
		}
	}
})

Enregistrer en tant que fichier et écrire du contenu

// 另存为文件
	$("#textbox")[0].addEventListener('keydown', async (e) => {
    
    
		if (e.ctrlKey && e.which == 83) {
    
    
			e.preventDefault;
			console.log('文件另存为', $("#textbox")[0].innerText)
			try {
    
    
				fileHandle = await window.showSaveFilePicker({
    
    
					types: [{
    
    
						accept: {
    
    
							"text/plain": [".txt"]
						}
					}],
					multiple: false
				});
				const w$ = await fileHandle.createWritable();
				await w$.write($("#textbox")[0].innerText);
				await w$.close();
			} catch (err) {
    
    
				console.log(err);
			}

			return false;
		}
	}, false)

Le handle de fichier fileHandle fournit la méthode createWritable pour écrire du contenu dans le fichier.

La partie mise en évidence du code est utilisée highLight.js, une telle version initiale de la version web de l'éditeur de code peut être réalisée

sa compatibilité