Bouw je eigen Google Docs-achtige app

Verschillende klanten hebben ons benaderd en gevraagd hoe ze een Google Docs-achtige webapp kunnen maken met behulp van onze API’s. [Google Docs][1] is een tekstverwerker waarmee gebruikers online bestanden kunnen maken en bewerken terwijl ze in realtime samenwerken met andere gebruikers. In deze blogpost wordt uitgelegd hoe eenvoudig het is om een Lite-versie van Google Documenten te maken met de volgende functies:

Rich Text Editing (lettertype, grootte, kleur, stijl (vet, cursief), uitlijning enz.) wijzigen.
Realtime gezamenlijke bewerking van hetzelfde document. Meerdere gebruikers hebben tegelijkertijd toegang tot het document en kunnen het wijzigen.
Upload inhoud van een bestaand Word-document naar een editor.
Bewaar tekst in de editor als MS Word-, PDF-, TXT- of HTML-document. Ons eindproduct ziet er als volgt uit:
[Tools en technologieën][2]
[Firepad integreren][3]
[Upload inhoud van een bestaand Word-document naar een editor][4]
[Integreer GroupDocs.Editor][5]
[Verwerking van formuliergegevens][6]

Tools en technologieën - Maak Google Docs zoals App

We zullen de Google Docs-achtige web-app ontwikkelen in ASP.NET Core en de volgende twee bibliotheken gebruiken:

[Firepad][7] is een open-source, collaboratieve teksteditor. Het gebruikt de [Firebase][8] Realtime Database als een backend, dus het vereist geen server-side code en kan eenvoudig aan elke webapp worden toegevoegd door de JavaScript-bestanden op te nemen.
[GroupDocs.Editor voor .NET][9] geeft ons de mogelijkheid om de meest populaire documentindelingen te bewerken met elke [WYSIWYG][10]-editor zonder extra applicaties. We laden het document via GroupDocs.Editor in Firepad, bewerken het document op de manier die wij willen en slaan het weer op in het oorspronkelijke documentformaat. Ik heb [Visual Studio for Mac][11] gebruikt als een [IDE][12]. U kunt de gratis community-editie van Visual Studio echter downloaden, afhankelijk van uw platform, van [hier][13]. Laten we beginnen. Maak een nieuw ASP.NET Core Web Application-project en noem het project “GoogleDocsLite”.

    // Get Firebase Database reference.
    var firepadRef = getExampleRef();
    
    // Create CodeMirror (with lineWrapping on).
    var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
    // Create a random ID to use as our user ID (we must give this to firepad and FirepadUserList).
    var userId = Math.floor(Math.random() * 9999999999).toString();
    // Create Firepad (with rich text features and our desired userId).
    var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
                { richTextToolbar: true, richTextShortcuts: true, userId: userId });
    // Create FirepadUserList (with our desired userId).
    var firepadUserList = FirepadUserList.fromDiv(firepadRef.child('users'),
    document.getElementById('userlist'), userId);
}

// Helper to get hash from end of URL or generate a random one.
function getExampleRef() {
    var ref = firebase.database().ref();
    var hash = window.location.hash.replace(/#/g, '');
    if (hash) {
        ref = ref.child(hash);
    } else {
        ref = ref.push(); // generate unique location.
        window.location = window.location + '#' + ref.key; // add it as a hash to the URL.
    }
    if (typeof console !== 'undefined') {
        console.log('Firebase data: ', ref.toString());
    }
    return ref;
}

Tools en technologieën - Maak Google Docs zoals App#

Tools en technologieën - Maak Google Docs zoals App