Локализация веб редактора документа

В этом разделе

Демо-приложение "VintaSoft ASP.NET Core Document Editor Demo" содержит словари локализации, позволяющие локализовать веб редактор документа (WebDocumentEditorJS) на 45 языков (африкаанс, арабский, армянский, азербайджанский, белорусский, болгарский, китайский, хорватский, чешский, датский, голландский, английский, эстонский, финский, французский, грузинский, немецкий, греческий, иврит, хинди, венгерский, итальянский, японский, казахский, корейский, киргизский, латышский, литовский, норвежский, португальский, румынский, русский, словацкий, словенский, испанский, суахили, шведский, таджикский, татарский, турецкий, туркменский, украинский, узбекский, вьетнамский, зулу).
Словари локализации можно найти в папке "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Examples\ASP.NET Core\CSharp\AspNetCoreDocumentEditorDemo\wwwroot\locales\".

Если вы хотите создать собственный словарь локализации для пользовательского интерфейса веб редактора документа, выполните следующие шаги:

Определить список языков для локализации.
Создать словари для локализации.
Добавить JavaScript код для локализации пользовательского интерфейса.

Если вы создали собственный словарь локализации для веб редактора документа и хотите поделиться им с другими пользователями, отправьте нам созданный словарь, и мы включим его в исходный код демо-приложения "VintaSoft ASP.NET Core Document Editor Demo".

1. Определение списка языков для локализации

Для начала необходимо определить список языков для локализации и создать файл настроек локализации, например, "settings.json". Вот содержимое файла "settings.json", который определяет, что интерфейс может быть локализован на английский и немецкий языки:

JSON

{
  "locales": [ "en", "af", "ar", "bg", "cs", "da", "de", "el", "es", "fi", "fr", "he", "hi", "hr", "hu", "it", "ja", "ko", "nb", "nl", "pt", "ro", "ru", "sv", "tr", "vi", "zh" ]
}

Затем файл "settings.json" необходимо добавить к содержимому веб-приложения, например, поместить его в папку "locales".

В завершение необходимо добавить на веб-страницу элемент "link" с информацией о настройках локализации:

HTML

<link rel="localization" href="/locales/settings.json">

2. Создание словарей для локализации

Файл словаря должен иметь имя, которое соответствует имени локали браузера, с расширением ".txt". Например, файл словаря английского языка должен иметь имя "en.txt", файл словаря немецкого языка должен иметь имя "de.txt", файл словаря французского языка должен иметь имя "fr.txt", файл словаря испанского языка должен иметь имя "es.txt", файл словаря итальянского языка должен иметь имя "it.txt", файл словаря португальского языка должен иметь имя "pt.txt", файл словаря русского языка должен иметь имя "ru.txt".

Файл словаря должен располагаться в той же папке, что и файл "settings.json". В нашем случае эта папка называется "locales".

Для создания словаря английского языка необходимо выполнить следующие шаги:

Отобразить на HTML-странице все элементы, которые должны быть локализованы.
Создать экземпляр класса VintasoftLocalizationJS, который позволяет локализовать DOM-элементы на HTML-странице.
Вызвать функцию VintasoftLocalizationJS.getDocumentLocalizationDictionary для получения словаря локализации на английском языке для DOM-элементов на HTML-странице.
Сериализовать словарь локализации на английском языке с помощью функции "JSON.stringify".
Сохранить сериализованный JSON-объект в файл с именем "en.txt".

Вот JavaScript-код, демонстрирующий создание словаря локализации для HTML-страницы, содержащей веб редактор документа:

JavaScript

...
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
...

/**
 Creates the dictionary for localization of application UI.
*/
function __createUiLocalizationDictionary() {
    var tempDialogs = [];
    __createDocumentViewerDialogsForLocalization(tempDialogs);

    var localizationDict = _localizer.getDocumentLocalizationDictionary();
    var localizationDictString = JSON.stringify(localizationDict, null, '\t');
    console.log(localizationDictString);

    var floatingContainer = document.getElementById("documentEditorContainer");
    for (var i = 0; i < tempDialogs.length; i++) {
        floatingContainer.removeChild(tempDialogs[i].get_DomElement());
        delete tempDialogs[i];
    }
}

/**
 Creates the dialogs, which are used in Web Document Editor, for localization.
*/
function __createDocumentViewerDialogsForLocalization(tempDialogs) {
    var floatingContainer = document.getElementById("documentEditorContainer");

    var documentTextPropertiesDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentTextPropertiesDialogJS();
    documentTextPropertiesDialog.render(floatingContainer);
    tempDialogs.push(documentTextPropertiesDialog);

    var documentParagraphPropertiesDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentParagraphPropertiesDialogJS();
    documentParagraphPropertiesDialog.render(floatingContainer);
    tempDialogs.push(documentParagraphPropertiesDialog);

    var documentParagraphIndentationSettingsDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentParagraphIndentationSettingsDialogJS();
    documentParagraphIndentationSettingsDialog.render(floatingContainer);
    tempDialogs.push(documentParagraphIndentationSettingsDialog);

    var documentParagraphLineSpacingSettingsDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentParagraphLineSpacingSettingsDialogJS();
    documentParagraphLineSpacingSettingsDialog.render(floatingContainer);
    tempDialogs.push(documentParagraphLineSpacingSettingsDialog);

    var documentParagraphPaginationSettingsDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentParagraphPaginationSettingsDialogJS();
    documentParagraphPaginationSettingsDialog.render(floatingContainer);
    tempDialogs.push(documentParagraphPaginationSettingsDialog);

    var documentInfoDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentInfoDialogJS();
    documentInfoDialog.render(floatingContainer);
    tempDialogs.push(documentInfoDialog);

    var documentEditorSettingsDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentEditorSettingsDialogJS();
    documentEditorSettingsDialog.render(floatingContainer);
    tempDialogs.push(documentEditorSettingsDialog);

    var documentEditorViewSettingsDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentEditorViewSettingsDialogJS();
    documentEditorViewSettingsDialog.render(floatingContainer);
    tempDialogs.push(documentEditorViewSettingsDialog);

    var documentPageSettingsDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentPageSettingsDialogJS();
    documentPageSettingsDialog.render(floatingContainer);
    tempDialogs.push(documentPageSettingsDialog);

    var documentPageColumnsSettingsDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiDocumentPageColumnsSettingsDialogJS();
    documentPageColumnsSettingsDialog.render(floatingContainer);
    tempDialogs.push(documentPageColumnsSettingsDialog);
}

Для создания словаря немецкого языка (или любого другого языка, кроме английского) необходимо выполнить следующие шаги:

Использовать словарь локализации на английском языке в качестве шаблона для словаря локализации на немецком языке, т.е. скопировать файл "en.txt" в файл "de.txt".
Перевести текстовые значения с английского языка на немецкий язык в файле "de.txt".

Вот пример простого файла словаря:

JSON

{
        "documentEditor": {
                "fileLabel": {
                        "text": "File"
                },
                "homeLabel": {
                        "text": "Home"
                },
                "insertLabel": {
                        "text": "Insert"
                },
                "layoutLabel": {
                        "text": "Layout"
                },
                "createDocxDocumentButton": {
                        "title": "Create new DOCX document"
                },
                "uploadDocumentFileButton": {
                        "title": "Upload and open document"
                },
                "documentInfoButton": {
                        "title": "Document information..."
                },
                "downloadFileButton": {
                        "title": "Download file"
                },
                "exportDocxDocumentToPdfAndDownloadPdfFileButton": {
                        "title": "Export DOCX document to PDF and download PDF file..."
                },
                "printDocumentButton": {
                        "title": "Print document..."
                },
                "closeDocumentButton": {
                        "title": "Close document"
                },
                "vsde-clearSessionCacheButton": {
                        "title": "Clear session cache"
                },
                ...
        }
}

3. Добавление JavaScript-кода для локализации пользовательского интерфейса

Класс VintasoftLocalizationJS предоставляет функции для локализации DOM-элементов и константных строк.

Вот JavaScript-код, демонстрирующий включение локализации для веб редактора документа в веб приложении:

JavaScript

...
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
...

/**
 Enables the localization of application UI.
*/
function __enableUiLocalization() {
    // if localizer is ready (localizer loaded localization dictionary)
    if (_localizer.get_IsReady()) {
        // localize DOM-elements of web page
        _localizer.localizeDocument();
    }
    // if localizer is NOT ready
    else
        // wait when localizer will be ready
        Vintasoft.Shared.subscribeToEvent(_localizer, "ready", function () {
            // localize DOM-elements of web page
            _localizer.localizeDocument();
        });

    // subscribe to the "dialogShown" event of web spreadsheet document editor
    Vintasoft.Shared.subscribeToEvent(_documentEditor, "dialogShown", function (event, data) {
        _localizer.localizeDocument();
    });
}

Отправить отзыв