Beispiel für die Erstellung eines XML-Online-Editors mit js

Vorwort

Ich habe meinen Blog über ein Jahr lang nicht aktualisiert, da „Mount & Blade 2“ während der Epidemie veröffentlicht wurde und ich anschließend damit begonnen habe, Spiel-MODs zu schreiben.

Ich habe etwa 7 Monate damit verbracht, Spiel-MODs in C# zu schreiben und jeden Abend bis spät in die Nacht daran gearbeitet. Während dieser Zeit habe ich PR gelernt, weil ich dieses Spiel-MOD vorgestellt habe, und wurde dann UP-Host auf Bilibili.

Später hatte ich einige andere Ideen und wollte das Geschäft meines Unternehmens anpassen, war aber zu faul, einen Blog zu schreiben und ehe ich mich versah, war über ein Jahr vergangen.

Es gibt noch Gewinne:

• Als dieses MOD beispielsweise eingestellt wurde, lag sein Downloadvolumen sowohl auf der chinesischen Site als auch auf der 3DM-MOD-Site auf Platz eins und lag weit vor dem zweiten Platz. Wenn Sie Freunde haben, die das MOD „Mount and Blade 2“ spielen, sollten Sie erraten können, wer ich bin.
• Beispielsweise gewann er auf Bilibili über 5.000 Fans, aber er stotterte am Anfang und er stotterte immer noch am Ende. Aber aufgrund meiner eigenen Bearbeitung ist der Anzeigeeffekt ziemlich gut.
• Ich weiß zum Beispiel genau, wie schwierig es ist, ein UP und ein Moderator zu sein. Trotz meiner schlechten Daten bin ich auf Bilibili tatsächlich vielen UP-Hosts voraus. Unter den UP-Hosts sind die meisten nicht die Top-UP-Hosts, sondern die UP-Hosts, deren Videos 0 Aufrufe haben. Sie können sich die neuesten Videos auf Bilibili ansehen. Nachdem ich Dutzende von Seiten durchgeblättert habe, gibt es nur 0 Aufrufe, was äußerst spektakulär ist.
• Interessante Lebenserfahrungen haben zugenommen

Ok, kommen wir zurück zum Thema.

Mittlerweile wurde das MOD im Grunde eingestellt und der UP-Besitzer ist zu faul, ernsthaft weiter daran zu arbeiten.

Hier sprechen wir hauptsächlich über technische Dinge, d. h. eine reine Front-End-Implementierung, einen XML-Online-Editor zum Schreiben von MODs.

Es handelt sich um einen Editor im VSCode-Stil, der automatisch die Einschränkungsregeln für die Generierung von MOD-Dateien des Spiels erlernen kann, um uns bei der Implementierung von Code-Eingabeaufforderungen und Code-Verifizierungen zu unterstützen.

Noch wichtiger ist, dass es Dateien auf Ihrem Computer direkt ändern kann.

Dies ist das endgültige Produktcode-Repository: https://gitee.com/vvjiang/mod-xml-editor

Und ein Bild des fertigen Produkts:

In diesem Blog behandelte Technologien:

• CodeMirror
• reagieren-codemirror2
• xmldom
• Dateileser
• IndexDB
• Web-Worker
• Dateisystemzugriff

Beginnen wir von vorne.

Die Notwendigkeit von Online-XML-Editoren

Wenn Sie ein MOD für Mount & Blade 2 erstellen, müssen Sie häufig XML-Dateien schreiben.

Denn die Datenkonfiguration von Mount & Blade 2 wird im XML-Format gespeichert und nach dem Laden des MOD wird das XML des MODs verwendet, um das offizielle XML zu überschreiben.

Wenn wir mit MOD-Daten arbeiten, beziehen wir uns normalerweise auf das offizielle XML und schreiben die XML-Datei selbst.

Dies führt jedoch zu einem Problem. XML verfügt über keine Codehinweise und Codeüberprüfung und es ist schwierig, ein falsches Zeichen zu erkennen.

Oder manchmal können sich die XML-Regeln ändern, wenn das Spiel aktualisiert wird.

Der Beamte wird Sie nicht durch eine Benachrichtigung über diese Änderungen informieren. Wenn Sie also immer noch die vorherigen Elemente und Attribute verwenden, bedeutet das, dass Sie sie falsch schreiben.

Die Folge von falschem Schreiben ist oft, dass das Spiel direkt beim Laden des MODs abstürzt und es keine Hinweise mehr gibt. Man kann nur langsam nach dem Fehler suchen.

Da es sich bei Mount & Blade 2 um ein umfangreiches Spiel handelt, dauert der Start jedes Mal sehr lange, was bedeutet, dass der Testvorgang zum Prüfen, ob die MOD-Daten richtig konfiguriert sind, sehr lange dauern wird.

Oh mein Gott, es gab so viele Nächte, in denen ich zusammengebrochen bin, als das Spiel abgestürzt ist.

Deshalb habe ich später darüber nachgedacht, einen XML-Online-Editor zu entwickeln, um dieses Problem zu lösen.

Technologie Vorforschung

Visuelle Programmierung

Eigentlich hatte ich am Anfang nicht die Idee, diesen XML-Editor zu erstellen, da er schwierig zu verwenden schien. Stattdessen wollte ich ihn durch visuelle Programmierung durch Ziehen und Ablegen von Elementen und Attributen implementieren.

Wissen Sie was, ich hatte tatsächlich einen vorläufigen Plan gemacht, aber nachdem ich die Konfiguration eines großen XML-Dings unzählige Male per Drag & Drop verschoben hatte, verlor ich allmählich die Fassung und gab diesen Plan auf.

VSCODE-Plugin

Ich möchte sehen, ob es ein VSCode-Plug-In gibt, das Codehinweise bereitstellen kann. Es gibt eines, das XSD zur Codeüberprüfung verwendet und anscheinend von IBM bereitgestellt wird.

Aber leider wurde es aufgegeben und kann nicht mehr verwendet werden, also geben Sie diesen Plan auf.

Online-Editor

Der Grund, warum wir hierfür einen Online-Editor verwendet haben, lag darin, dass das Unternehmen im März und April etwas erstellen wollte, mit dem die XML-Konfigurationsdateien der Java-Projektumgebung online bearbeitet werden konnten.

Dann habe ich versucht, eines zu erstellen und habe von CodeMirror erfahren.

CodeMirror unterstützt XML-Codehinweise, indem es die Tags selbst konfiguriert, unterstützt jedoch keine XML-Codeüberprüfung, sodass Sie die XML-Codeüberprüfung selbst durchführen müssen.

Und da wir normalerweise XSD zum Überprüfen von XML verwenden, müssen wir XSD auch in die Tag-Konfiguration von CodeMirror konvertieren.

Egal ob Baidu, Google oder Github, ich kann keine entsprechende Lösung finden und muss den Code zur Implementierung selbst schreiben.

Während dieses Prozesses habe ich ein tieferes Verständnis von CodeMirror , xsd und htmllint erlangt und das Projekt schließlich abgeschlossen.

Da es sich hierbei um den Code der vorherigen Firma handelt, werde ich ihn hier nicht veröffentlichen.

Kurz gesagt, während dieses Prozesses erfuhr ich von CodeMirror und kam auf die Idee, mit CodeMirror einen Online-Editor für MOD zu erstellen.

Originalform: einfacher Online-XML-Editor

Okay, ohne weitere Umschweife, schnappen Sie sich einfach die Tastatur und fangen Sie an zu arbeiten.

Das ursprüngliche Formular hatte auf der linken Seite keinen Dateibaum, sondern nur einen einfachen Editor und ein Popup-Fenster zum Erlernen von Regeln.

Dabei kommen drei Technologien zum Einsatz:

CodeMirror

Dateileser

xmldom

CodeMirror als Editor verwenden

CodeMirror verwendet hauptsächlich react-codemirror2, eine gepackte Version von react. Lesen Sie einfach die Dokumentation und die Demo, um es selbst zu konfigurieren.

Die einzige Schwierigkeit besteht darin, dass viele der CodeMirror-Konfigurationseinführungen im Internet kopiert und reproduziert werden und einige immer noch falsch sind, was empörend ist.

Kurz gesagt, wenn Sie herumspielen möchten, lesen Sie am besten die offizielle Dokumentation (https://codemirror.net/) und die Demos in der Dokumentation und studieren Sie sie dann selbst. Wenn Sie die Konfigurationen anderer Leute kopieren, ist das Wasser sehr tief und Sie haben keine Kontrolle darüber.

Hier poste ich mal einen Konfigurationscode für die von mir gekapselte Editor-Komponente. Er ist durchaus brauchbar und hat die meisten Funktionen des Editors auch, ist aber nur für die Bearbeitung von XML geeignet.

Die darin enthaltenen Kommentare sind recht ausführlich und umfassen häufig verwendete Codefaltung und Codeformatierung. Ich bin zu faul, sie einzeln zu erklären. Sie können sich auf der offiziellen Website selbst ein Bild machen.

Einige der referenzierten Codes werde ich hier nicht veröffentlichen. Wenn Sie interessiert sind, können Sie im oben genannten Code-Repository nachsehen.

importiere { useEffect } von 'react'
importiere { Kontrolliert als ControlledCodeMirror } von 'react-codemirror2'
CodeMirror von „CodeMirror“ importieren
importiere 'codemirror/lib/codemirror.css'
importiere „codemirror/theme/ayu-dark.css“
importiere 'codemirror/mode/xml/xml.js'
//Hervorhebung des Cursorzeilencodes importiere 'codemirror/addon/selection/active-line'
// Faltcode importiere 'codemirror/addon/fold/foldgutter.css'
importiere 'codemirror/addon/fold/foldcode.js'
importiere 'codemirror/addon/fold/xml-fold.js'
importiere 'codemirror/addon/fold/foldgutter.js'
importiere 'codemirror/addon/fold/comment-fold.js'
// Codehinweis-Vervollständigung und Import von „codemirror/addon/hint/xml-hint.js“
importiere 'codemirror/addon/hint/show-hint.css'
importiere './hint.css'
importiere 'codemirror/addon/hint/show-hint.js'
// Codeüberprüfung importiere 'codemirror/addon/lint/lint'
importiere 'codemirror/addon/lint/lint.css'
importiere CodeMirrorRegisterXmlLint aus „./xml-lint“
// Schließendes Tag automatisch eingeben, wenn > import 'codemirror/addon/edit/closetag.js' eingegeben wird
// Kommentare importieren 'codemirror/addon/comment/comment.js'

// Wird verwendet, um den Designstil des CodeMirror-Importstils aus „./index.less“ anzupassen.

//Xml-Code-Verifizierung registrieren CodeMirrorRegisterXmlLint(CodeMirror)

// Formatierung bezogen CodeMirror.extendMode("xml", {
commentStart: "<!--",
Kommentarende: "-->",
newlineAfterToken: Funktion (Typ, Inhalt, TextAfter, Status) {
    return (Typ === "Tag" && />$/.test(Inhalt) && Status.Kontext) ||
    /^</.test(textAfter);
}
});

// Formatieren Sie den angegebenen Bereich CodeMirror.defineExtension("autoFormatRange", function (from, to) {
var cm = dies;
var outer = cm.getMode(), text = cm.getRange(von, bis).split("\n");
var Status = CodeMirror.copyState(äußerer, cm.getTokenAt(von).Status);
var tabSize = cm.getOption("tabSize");

var out = "", Zeilen = 0, atSol = from.ch === 0;
Funktion neue Zeile() {
    aus += "\n";
    atSol = wahr;
    ++Zeilen;
}

für (var i = 0; i < Text.Länge; ++i) {
    var stream = neuer CodeMirror.StringStream(text[i], tabSize);
    während (!stream.eol()) {
    var inner = CodeMirror.innerMode(äußerer, Status);
    var Stil = äußeres.Token(Stream, Status), aktuell = Stream.aktuell();
    stream.start = stream.pos;
    wenn (!atSol || /\S/.test(cur)) {
        aus += aktuell;
        atSol = falsch;
    }
    wenn (!atSol && inner.mode.newlineAfterToken &&
        inner.mode.newlineAfterToken(Stil, aktuell, Stream.string.slice(Stream.pos) || Text[i + 1] || "", inner.state))
        neue Zeile();
    }
    wenn (!stream.pos && outer.blankLine) outer.blankLine(Status);
    wenn (!atSol && i < text.length - 1) newline();
}

cm.operation(function () {
    cm.replaceRange(out, from, to);
    für (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
    cm.indentLine(cur, "smart");
    cm.setSelection(von, cm.getCursor(false));
});
});

// XML-Editor-Komponentenfunktion XmlEditor(props) {
const { tags, value, onChange, onErrors, onGetEditor, onSave } = Eigenschaften

useEffect(() => {
    // Jedes Mal, wenn sich die Tags ändern, werden die Validierungsregeln erneut geändert. CodeMirrorRegisterXmlLint(CodeMirror, tags, onErrors)
}, [beiFehlern, Tags])

// Start-Tag-Funktion completeAfter(cm, pred) {
    wenn (!pred || pred()) setTimeout(Funktion () {
    wenn (!cm.state.completionActive)
        cm.showHint({
        completeSingle: false
        });
    }, 100);
    gibt CodeMirror.Pass zurück;
}

// End-Tag-Funktion completeIfAfterLt(cm) {
    returniere komplettNach(cm, Funktion () {
    var cur = cm.getCursor();
    return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) === "<";
    });
}

// Attribute und Attributwerte Funktion completeIfInTag(cm) {
    returniere komplettNach(cm, Funktion () {
    var tok = cm.getTokenAt(cm.getCursor());
    wenn (tok.type === "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length === 1)) return false;
    var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
    gibt inneren.tagName zurück;
    });
}

zurückkehren (
    <div Klassenname={style.editor} >
    <ControlledCodeMirror
        Wert={Wert}
        Optionen={{
        Modus: {
            Name: "xml",
            // Ob die Länge des Tags hinzugefügt werden soll, wenn das XML-Attribut multilineTagIndentPastTag umschließt: false
        },
        indentUnit: 2, // Wie viele Leerzeichen hat der Standardeinzug für Zeilenumbrüche theme: 'ayu-dark', // Editor-Design lineNumbers: true, // Ob Zeilennummern angezeigt werden sollen autofocus: true, // Automatisch Fokus erhalten styleActiveLine: true, // Cursorzeilencode hervorheben autoCloseTags: true, // Endelement beim Eingeben automatisch eingeben > toggleComment: true, // Kommentare öffnen // Code einklappen begin
        Zeilenumbruch: true,
        foldGutter: wahr,
        Rinnen: ['CodeMirror-Zeilennummern', 'CodeMirror-Faltrinne', 'CodeMirror-Fusselmarkierungen'],
        //Faltcode-Ende
        zusätzlicheSchlüssel: {
            // Codehinweis "'<'": completeAfter,
            "'/'": komplettWennNachLt,
            "' '": VervollständigeWennImTag,
            "'='": komplettWennImTag,
            // Kommentarfunktion "Strg-/": (cm) => {
            cm.toggleComment()
            },
            // Funktion "Strg-S" speichern: (cm) => {
            beim Speichern()
            },
            // Format "Umschalt-Alt-F": (cm) => {
            const totalLines = cm.lineCount();
            cm.autoFormatRange({ Zeile: 0, Kanal: 0 }, { Zeile: Gesamtzeilen })
            },
            // Tab wird automatisch in Leerzeichen umgewandelt "Tab": (cm) => {
            if (cm.somethingSelected()) {// Gesamteinzug nach Auswahl cm.indentSelection('add')
            } anders {
                cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "), "Ende", "+Eingabe")
            }
            }
        },
        // Codehinweis hintOptions: { schemaInfo: tags, matchInMiddle: true },
        Flusen: wahr
        }}
        editorDidMount={beiGetEditor}
        beiVorÄnderung={beiÄnderung}
    />
    </div>
)
}

Standard-XmlEditor exportieren

Lernen Sie XML und extrahieren Sie Tag-Regeln

Wenn wir CodeMirror verwenden, um einen einfachen Editor zu erstellen, müssen wir Tags verwenden, wenn wir eine XML-Code-Eingabeaufforderung bereitstellen möchten.

Natürlich gelten für unterschiedliche Spiele unterschiedliche XML-Regeln, und die XML-Regeln können sich bei einer Aktualisierung des Spiels ändern.

Daher müssen wir sicherstellen, dass ein Mechanismus zum kontinuierlichen Erlernen dieser XML-Regeln vorhanden ist. Deshalb habe ich hier zu diesem Zweck ein Popup-Fenster zum Erlernen der XML-Dateiregeln erstellt.

Klicken Sie auf die Einschränkungsregel in der oberen linken Ecke des Editors -> Einschränkungsregel hinzufügen

Es öffnet sich ein Popup-Fenster wie dieses:

Lesen Sie die XML-Dateien im angegebenen Ordner über FileReader und verwenden Sie dann xmldom, um den Text dieser XML-Dateien zu analysieren und nacheinander Dokumentobjekte zu generieren.

Analysieren Sie dann diese Dokumentobjekte, um die endgültigen Tag-Regeln zu erhalten.

Für diesen Schritt sind lediglich einige Kenntnisse in XML erforderlich, die allerdings recht grundlegend sind, weshalb ich sie nicht näher erläutern werde.

Kurz gesagt, jetzt haben wir die ursprüngliche Form fertiggestellt. Bei jeder Verwendung müssen Sie den Inhalt der von Ihnen bearbeiteten XML-Datei in diesen Online-Editor kopieren. Kopieren Sie nach der Bearbeitung den fertigen Text in die ursprüngliche XML-Datei und speichern Sie ihn, um ihn zu überschreiben.

Evolution: Online-XML-Editor mit baumartiger Dateistruktur und vollständiger Dateivalidierung

Der obige Editor hat tatsächlich ein sehr enges Anwendungsszenario und kann nur beim Schreiben einer neuen XML verwendet werden.

Ein MOD besteht oft aus Dutzenden, Hunderten oder sogar Tausenden von Dateien. Es ist unmöglich, sie zur Überprüfung einzeln in den Editor einzufügen.

Daher müssen wir alle XML-Dateien des MOD in diesen Editor laden und eine Codeüberprüfung durchführen.

Dabei kommen zwei Technologien zum Einsatz:

• Dateileser
• Web-Worker

Linker Dateibaum

Der Dateibaum auf der linken Seite wird mithilfe der Tree-Komponente von Ant Design vervollständigt. Daher werde ich hier nicht näher auf die Konfiguration eingehen.

Wenn Sie auf die Schaltfläche Ordner öffnen klicken

Verwenden Sie auch FileReader, um Dateien im MOD-Ordner zu lesen.

FileReader erhält jedoch ein Array von Dateien. Um die Baumstruktur links zu generieren, müssen wir den Pfad jeder XML-Datei manuell analysieren und darauf basierend eine Baumstruktur generieren.

Vollständige Dateiüberprüfungsfunktion

Sobald der Ordner geöffnet wird, müssen wir eine Codeüberprüfung aller XML-Dateien durchführen. Wenn die Überprüfung nicht korrekt ist, müssen wir alle zugehörigen Dateien und eine Reihe von Ordnern auf übergeordneter und Vorgängerebene im Ordner links rot markieren.

Diese Funktion scheint einfach zu sein, birgt jedoch tatsächlich viele Fallstricke, da der Umfang der Überprüfungsberechnungen tatsächlich nicht gering ist. Insbesondere wenn Ihr MOD Hunderte oder Tausende von Dateien enthält, kann es sehr leicht dazu kommen, dass Ihr JS blockiert wird und die Seite nicht mehr reagiert.

Hier verwende ich Web Worker, um einen neuen Thread zu öffnen, der den Überprüfungsprozess abwickelt und mir das Ergebnis nach Abschluss der Überprüfung zurückgibt.

Dabei habe ich auch mehr über den Einsatz von Web Workern gelernt.

Ich habe immer gedacht, dass es sich um einen neuen Worker (eine JS-Datei) handelt, und es erscheint schwierig, ihn in Kombination mit der modularen Entwicklung von React zu verwenden.

Tatsächlich können Sie Web Worker jetzt sehr bequem verwenden, indem Sie den Worker-Loader in Webpack konfigurieren.

Zunächst kann unser Worker-Code wie folgt geschrieben werden:

importiere { lintFileTree } aus '@/utils/files'

beiNachricht = ({Daten}) => {
lintFileTree(data.fileTree, data.currentTags).then(content => {
    postMessage(Inhalt)
})
}

Wenn wir diesen Worker verwenden, können wir es wie folgt tun

importiere { useWebWorkerFromWorker } von 'react-webworker-hook'
importiere lintFileTreeWorker aus '@/utils/webWorker/lintFileTree.webworker'

const worker4LintFileTree = neuer lintFileTreeWorker()

const [lintedFileTree, startLintFileTree] = useWebWorkerFromWorker(worker4LintFileTree)

Dann verwenden Sie useEffect, um von diesem lintedFileTree abhängig zu sein, und tun etwas, wenn er sich ändert. Es ist also genauso einfach zu schreiben wie die Verwendung von useState.

Nicht-rekursive Baumdurchquerung

Sie können sehen, dass viele der Dinge, die wir oben verwenden, mit Bäumen zusammenhängen, wie z. B. das Durchlaufen des Dateibaums zum Überprüfen des Codes.

Oder wir müssen nach dem Umschalten einer Einschränkungsregel zur erneuten Überprüfung auch den gesamten Dateibaum durchlaufen.

Während des Durchlaufs habe ich Rekursion verwendet, um den gesamten Baum zu durchlaufen. Der Nachteil dabei ist, dass der Speicher während der Rekursion nicht freigegeben werden kann. Daher habe ich später den Algorithmus geändert und eine nicht rekursive Methode verwendet, um den gesamten Baum zu durchlaufen.

IndexDB speichert Dateiinhalte

Da unsere MOD-Dateien groß sind und viel Inhalt enthalten, belegen sie möglicherweise viel Speicherplatz und es ist unmöglich, diese Dateiinhalte ständig im Speicher zu behalten.

Daher lese ich die Dateiinhalte, füge sie einzeln in IndexDB ein und zeige nur den Inhalt der aktuell bearbeiteten Datei an.

Nur bei Bedarf, etwa beim Überprüfen der gesamten Datei oder beim Wechseln zwischen Dateien, wird der Dateiinhalt erneut aus IndexDB abgerufen.

Ultimative Weiterentwicklung: Durchbrechen Sie die Sandbox-Einschränkungen des Browsers und erreichen Sie das Hinzufügen, Löschen und Ändern lokaler Dateien auf dem Computer.

Durch die bisherigen Maßnahmen haben wir schließlich einen grundsätzlich nutzbaren Online-XML-Editor fertiggestellt.

Es weist jedoch einen schwerwiegenden Fehler auf, nämlich die Einschränkung durch die Sandbox-Umgebung des Browsers. Nachdem wir die Datei geändert haben, können wir sie nicht direkt auf dem Computer speichern, sondern müssen den geänderten Code manuell nacheinander in die entsprechende Datei kopieren.

Dieser Vorgang ist umständlich und kompliziert, sodass die Funktionen unseres Editors nur zur Unterstützung beim Schreiben des Codes und bei der Stapelüberprüfung verwendet werden können.

Ich dachte, das wäre alles, was ich bisher tun konnte, aber dann las ich zufällig einen Beitrag auf Zhihu und fand heraus, dass die Chrome86+-Version eine zusätzliche funktionale API hat: FileSystemAccess.

Darüber hinaus kann diese API nur in einer https-Umgebung aufgerufen werden, es sei denn, es handelt sich um eine lokale localhost-Umgebung. Das heißt, wenn Sie sich auf einer http-Website befinden, können Sie sie nicht aufrufen, selbst wenn Sie Chrome86+ oder Edge86+ verwenden.

Diese API ermöglicht es uns, Dateien direkt auf dem lokalen Computer zu bearbeiten, anstatt sie nur lesen zu können wie FileReader oder sie nur innerhalb der Browser-Sandbox bearbeiten zu können wie FileSystem.

Über FileSystemAccess können wir nicht nur Dateien im Ordner lesen und ändern, sondern auch Dateien hinzufügen und löschen.

Daher habe ich diese API verwendet, um alle Punkte, an denen zuvor FileReader verwendet wurde, vollständig zu ersetzen und das Hinzufügen und Löschen von Ordnern und Dateien durch Rechtsklicken auf den Dateibaum zu realisieren. (Das Umbenennen von Dateien wird hier nicht unterstützt, aber wir können das Umbenennen tatsächlich simulieren, indem wir löschen und dann hinzufügen, aber dazu bin ich zu faul.)

Gleichzeitig können Sie die Datei nach dem Drücken der Schaltfläche Speichern oder der Speichertastenkombination Strg+S direkt speichern.

Nachfolgend sehen Sie einen Komponentencode, der FileSystemAccess zum Öffnen eines Ordners verwendet:

    React von „react“ importieren

    // Angepasste Komponente zum Öffnen von Ordnern const FileInput = (props) => {
    const { untergeordnete Elemente, bei Änderung } = Eigenschaften
    const handleClick = async () => {
        const dirHandle = warte auf window.showDirectoryPicker()
        dirHandle.requestPermission({ mode : "lesen/schreiben" })
        beiÄnderung(dirHandle)
    }
    return <span onClick={handleClick}>
        {Kinder}
    </span>
    }

    Standard-FileInput exportieren

Solange auf das von dieser Komponente umschlossene Element (z. B. eine Schaltfläche) geklickt wird, wird „showDirectoryPicker“ sofort aufgerufen, um das Öffnen des Ordners anzufordern.

Fordern Sie nach dem Öffnen des Ordners über den erhaltenen Ordner-Handle die Schreibberechtigung für den Ordner an und geben Sie diesen Ordner-Handle dann nach außen weiter, um die Dateibaumstruktur zu erhalten.

Der Vorgang ist hier fehlerhaft, da der Browser bei der Anforderung, einen Ordner zu öffnen, ein Fenster öffnet, in dem der Benutzer um die Erlaubnis zum Lesen des Ordners gebeten wird.

Nach dem Öffnen wird ein zweites Fenster angezeigt, um die Schreibberechtigung anzufordern. Dies bedeutet, dass beim Öffnen eines Ordners zwei Fenster angezeigt werden.

Allerdings kann ich mit dieser Methode nur alle Berechtigungen auf einmal anfordern, da es sonst keine gute Idee ist, beim Speichern erneut die Berechtigungen anzufordern.

Die Vorteile überwiegen jedoch die Nachteile. Diese API realisiert nicht nur das Hinzufügen, Löschen und Ändern von Dateien, sondern macht auch die Verwendung von IndexDB überflüssig.

Da wir den entsprechenden Dateiinhalt jederzeit über den Dateihandle abrufen können, ist es nicht erforderlich, den Dateiinhalt in IndexDB zu speichern.

Weitere Funktionen und Details

Das Obige ist nur ein Überblick über die wichtigsten technischen Funktionen. Tatsächlich verfügt dieser Editor über viele weitere Details.

Beispielsweise das Bedienfeld zum Anpassen von Tag-Regeln, die Schaltflächen in der Symbolleiste, die einfache Kapselung von dva und bei der XML-Analyse: Wenn der Attributwert eine Zahl ist, wird keine Eingabeaufforderung angezeigt, sondern die Eigenschaft direkt ignoriert, weil Zahlen häufig nicht viel Sinn ergeben und der Aufzählungswert zu groß ist.

Davon gibt es sehr viele, aber ihre Anwendungen sind relativ einfach, deshalb möchte ich nicht ins Detail gehen, da dieser Blog sonst sehr lang werden würde und es schwierig wäre, die Kernideen hervorzuheben.

Mängel und Zusammenfassung

Die Mängel hier sind eher auf Faulheit zurückzuführen. Beispielsweise unterstützen die zuvor erwähnte Funktion zum Umbenennen von Ordnern und Dateien sowie die benutzerdefinierten Regeln zum Anpassen von Tag-Regeln keine Änderungen und Löschungen.

Es ist machbar, ich bin nur zu faul dazu.

Ich habe mehrere Monate an dieser Sache gearbeitet. Es ist nicht so, dass ich jede Nacht darüber geschrieben habe. Ich habe darüber geschrieben, wenn ich Inspiration hatte oder wenn ich etwas fand, das verbessert werden konnte.

Insgesamt habe ich etwa zwei oder drei Wochen lang jede Nacht daran gearbeitet und dann, als es vollständiger und brauchbarer wurde, wurde ich immer nachlässiger.

Da die restlichen Vorgänge nicht sehr wichtig sind und mit ein wenig Vorstellungskraft durchgeführt werden können, gibt es nicht viele anspruchsvolle Teile.

Aber insgesamt ist die Benutzerfreundlichkeit dieses Dings immer noch sehr gut.

Es kann nicht nur zum Schreiben von XML-Dateien für eine Reihe von Spielen wie „Mount & Blade 2“, „The Great Cultivation Simulator“ und „Civilization 6“ verwendet werden, sondern auch für XML-Konfigurationen, die keine XSD-Regeln haben und zu komplex sind. Es kann sogar Ihre benutzerdefinierten XML-Regeln lernen.

Dies ist das Ende dieses Artikels über die Verwendung von js zum Erstellen eines XML-Online-Editors. Weitere Informationen zur Verwendung von js zum Erstellen eines XML-Online-Editors finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!