في أول مشاركة مدونة ، أنشأنا محرر مستندات Google مثل تطبيق الويب الذي يحتوي على الميزات التالية:

  • تحرير نص منسق (تغيير خط النص ، الحجم ، اللون ، النمط (بخط عريض ، مائل) ، المحاذاة وما إلى ذلك).
  • تحرير تعاوني في الوقت الحقيقي لنفس المستند. يمكن لعدة مستخدمين الوصول إلى المستند في نفس الوقت وتعديله.
  • تحميل محتوى مستند Word موجود إلى محرر.

في منشور المدونة هذا ، سنوسع تطبيق الويب الخاص بنا ليشمل الميزات التالية:

  • قم بتنزيل محتوى المحرر كمستند MS Word أو PDF أو TXT أو HTML.
  • شارك عنوان URL مع الأصدقاء حتى يتمكنوا من تحرير المستند في نفس الوقت.

سيبدو المنتج النهائي على النحو التالي:

محرر مستندات Google مثل واجهة التطبيق

تنزيل محتوى المحرر كمستند Microsoft Word

أولاً ، نضيف `` “عنصر من النوع يتم إرساله إلى النموذج الخاص بنا لإظهار زر” تنزيل المستند “في الواجهة الأمامية. نستخدم سمة asp-page-handler لتحديد معالج الزر. يبدو عنصر النموذج لدينا الآن على النحو التالي:

<form method="post" enctype="multipart/form-data" id="uploadForm">
    <input asp-for="UploadedDocument" />
    
    <input type="submit" value="Upload Document" class="btn btn-primary" asp-page-handler="UploadDocument" />
    <input type="submit" value="Download Document" class="btn btn-primary" asp-page-handler="DownloadDocument" />

    <input asp-for="DocumentContent" type="hidden" />
</form>

ربما لاحظت أننا أضفنا ملفًا آخر ` عنصر من النوع مخفي. يرتبط هذا العنصر بخاصية DocumentContent في Index.cshtml.cs. سنستخدم هذه الخاصية لتخزين محتوى المحرر كسلسلة HTML.

[BindProperty]
public string DocumentContent { get; set; }

يوفر Firepad حدثًا آخر متزامنًا للاستماع. يتم تشغيله عندما يقوم عميلنا المحلي بتحرير المستند وعندما تتم كتابة هذه التعديلات بنجاح إلى Firebase. نرفق رد اتصال بهذا النوع من الأحداث لتعيين قيمة خاصية DocumentContent إلى firepad.getHtml (). الرجاء إضافة الكود التالي في دالة init () في Index.cshtml.

firepad.on('synced', function (isSynced) {
    // isSynced will be false immediately after the user edits 
    // the pad, and true when their edit has been saved to Firebase.
    if (isSynced) {
        document.getElementById("DocumentContent").value = firepad.getHtml();
    }
});

الآن نقوم بتنفيذ وظيفة معالج OnPostDownloadDocument (). نستخدم مكتبة GroupDocs.Editor لحفظ محتويات المحرر كمستند Microsoft Word ، والتي يتم تخزينها في خاصية DocumentContent. يقوم المعالج بإرجاع مستند Word كاستجابة للمستخدم.

public FileResult OnPostDownloadDocument()
{
    // Editor object is referencing to the document initially uploaded for editing.
    WordProcessingLoadOptions loadOptions = new WordProcessingLoadOptions();
    Editor editor = new Editor(UploadedDocumentPath, delegate { return loadOptions; });
    
    // <html>, <head> and <body> tags are missing in the HTML string stored in DocumentContent, so we are adding them manually.
    string completeHTML = "<!DOCTYPE html><html><head><title></title></head><body>" + DocumentContent + "</body></html>";
    EditableDocument document = EditableDocument.FromMarkup(completeHTML, null);
    
    // Path to the output document        
    var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "DownloadedDocuments");
    var outputPath = Path.Combine(projectRootPath, Path.GetFileName(UploadedDocumentPath));
    
    // Save the Word Document at the outputPath 
    WordProcessingSaveOptions saveOptions = new WordProcessingSaveOptions(WordProcessingFormats.Docx);
    editor.Save(document, outputPath, saveOptions);
    
    // Return the Word Document as response to the User
    var bytes = System.IO.File.ReadAllBytes(outputPath);        
    return new FileContentResult(bytes, new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.wordprocessingml.document"))
    {
        FileDownloadName = Path.GetFileName(UploadedDocumentPath)
    };
}

يتم تعريف متغير UploadedDocumentPath على أنه سلسلة متغيرة للاحتفاظ بقيمة مسار المستند الذي تم تحميله بين الجلسات.

static volatile string UploadedDocumentPath;

public void OnPostUploadDocument()
{
    var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "UploadedDocuments");
    var filePath = Path.Combine(projectRootPath, UploadedDocument.FileName);
    UploadedDocument.CopyTo(new FileStream(filePath, FileMode.Create));

    // Retain the path of uploaded document between sessions.
    UploadedDocumentPath = filePath;

    ShowDocumentContentInTextEditor();
}

يرجى مراجعة Save Document و Create EditableDocument from file or markup من المقالات لمعرفة المزيد حول فئات GroupDocs.Editor.

قم بتشغيل المشروع واختبر حالة الاستخدام التالية:

  1. قم بتحميل محتوى مستند Word موجود في محرر بالنقر فوق الزر تحميل مستند.
  2. قم بإجراء التغييرات المطلوبة في المحتوى.
  3. انقر فوق الزر تنزيل المستند لتنزيل المحتوى المحدث كمستند Word.

تنزيل محتوى المحرر كمستند PDF

نحتاج إلى إجراء بعض التعديلات في معالج OnPostDownloadDocument () لإرجاع مستند PDF كرد. نستخدم PdfSaveOptions بدلاً من WordProcessingSaveOptions ونستخدم application / pdf كنوع MIME.

public FileResult OnPostDownloadDocument()
{
    WordProcessingLoadOptions loadOptions = new WordProcessingLoadOptions();
    Editor editor = new Editor(UploadedDocumentPath, delegate { return loadOptions; });

    string completeHTML = "<!DOCTYPE html><html><head><title></title></head><body>" + DocumentContent + "</body></html>";
    EditableDocument document = EditableDocument.FromMarkup(completeHTML, null);

    var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "DownloadedDocuments");
    var outputPath = Path.Combine(projectRootPath, Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".pdf");

    PdfSaveOptions saveOptions = new PdfSaveOptions();
    editor.Save(document, outputPath, saveOptions);

    var bytes = System.IO.File.ReadAllBytes(outputPath);
    return new FileContentResult(bytes, new MediaTypeHeaderValue("application/pdf"))
    {
        FileDownloadName = Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".pdf"
    };
}

تنزيل محتوى المحرر كمستند نصي عادي

من أجل إرجاع مستند نصي عادي (.txt) كرد ، نستخدم فئة TextSaveOptions ونستخدم نص / عادي كنوع MIME.

public FileResult OnPostDownloadDocument()
{
    WordProcessingLoadOptions loadOptions = new WordProcessingLoadOptions();
    Editor editor = new Editor(UploadedDocumentPath, delegate { return loadOptions; });

    string completeHTML = "<!DOCTYPE html><html><head><title></title></head><body>" + DocumentContent + "</body></html>";
    EditableDocument document = EditableDocument.FromMarkup(completeHTML, null);

    var projectRootPath = Path.Combine(_hostingEnvironment.ContentRootPath, "DownloadedDocuments");
    var outputPath = Path.Combine(projectRootPath, Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".txt");

    TextSaveOptions saveOptions = new TextSaveOptions();
    editor.Save(document, outputPath, saveOptions);

    var bytes = System.IO.File.ReadAllBytes(outputPath);
    return new FileContentResult(bytes, new MediaTypeHeaderValue("text/plain"))
    {
        FileDownloadName = Path.GetFileNameWithoutExtension(UploadedDocumentPath) + ".txt"
    };
}

مشاركة عنوان URL لمحرر مع الأصدقاء

يجب أن نوفر للمستخدمين طريقة مناسبة لنسخ عنوان URL الخاص بالمحرر ومشاركته مع الأصدقاء. للقيام بذلك ، أضف ملف `عنصر من نوع النص في Index.cshtml.

<div>
    <strong>
        <label for="shareURL">Edit with Friends: </label>
    </strong>
    <input type="text" name="shareURL" id="shareURL" size="50">
</div>

أضف ما ورد أعلاه <div style=";text-align:right;direction:rtl"> "عنصر قبل"<div id="userlist" style=";text-align:right;direction:rtl"> علامة. قمنا بتعيين قيمة حقل إدخال النص هذا على عنوان URL الخاص بالمحرر باستخدام سطر التعليمات البرمجية التالي. أضف هذا الرمز في init () وظيفة في Index.cshtml.

document.getElementById("shareURL").value = window.location.origin + window.location.pathname + window.location.hash;

سنقوم بإجراء تغييرات طفيفة على CSS لدينا لضمان عرض حقل إدخال النص بشكل صحيح. اضبط الموضع العلوي من firepad وقائمة المستخدمين على 100 بكسل ، وأضف هامشًا يسارًا إلى حقل إدخال النص.

#userlist {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 0;
    height: auto;
    width: 175px;
}

#firepad {
    position: absolute;
    left: 175px;
    top: 100px;
    bottom: 0;
    right: 0;
    height: auto;
}

#uploadForm {
    margin: 16px 2px;
}

#shareURL {
    margin-left: 123px;
}

قم بتشغيل المشروع ، يجب أن ترى حقل نص يتيح لك نسخ عنوان URL للمحرر. شاركه مع أصدقائك وقم بتحرير المستند معهم في نفس الوقت.

كود المصدر الكامل للمشروع متاح على GitHub.

أنظر أيضا