New apps for text, slide and spreadsheet

www/common/onlyoffice/web-apps/apps/api/documents/api.js

@@ -0,0 +1,739 @@
+/**
+ * Copyright (c) Ascensio System SIA 2013. All rights reserved
+ *
+ * http://www.onlyoffice.com
+ */
+
+;(function(DocsAPI, window, document, undefined) {
+
+    /*
+
+        # Full #
+
+        config = {
+            type: 'desktop or mobile',
+            width: '100% by default',
+            height: '100% by default',
+            documentType: 'text' | 'spreadsheet' | 'presentation',
+            document: {
+                title: 'document title',
+                url: 'document url'
+                fileType: 'document file type',
+                options: <advanced options>,
+                key: 'key',
+                vkey: 'vkey',
+                info: {
+                    author: 'author name',
+                    folder: 'path to document',
+                    created: '<creation date>',
+                    sharingSettings: [
+                        {
+                            user: 'user name',
+                            permissions: '<permissions>',
+                            isLink: false
+                        },
+                        ...
+                    ]
+                },
+                permissions: {
+                    edit: <can edit>, // default = true
+                    download: <can download>, // default = true
+                    reader: <can view in readable mode>,
+                    review: <can review>, // default = edit
+                    print: <can print>, // default = true
+                    rename: <can rename>, // default = false
+                    changeHistory: <can change history>, // default = false
+                }
+            },
+            editorConfig: {
+                mode: 'view or edit',
+                lang: <language code>,
+                location: <location>,
+                canCoAuthoring: <can coauthoring documents>,
+                canBackToFolder: <can return to folder> - deprecated. use "customization.goback" parameter,
+                createUrl: 'create document url', 
+                sharingSettingsUrl: 'document sharing settings url',
+                fileChoiceUrl: 'mail merge sources url',
+                callbackUrl: <url for connection between sdk and portal>,
+                mergeFolderUrl: 'folder for saving merged file',
+                licenseUrl: <url for license>,
+                customerId: <customer id>,
+
+                user: {
+                    id: 'user id',
+                    name: 'user name'
+                },
+                recent: [
+                    {
+                        title: 'document title',
+                        url: 'document url',
+                        folder: 'path to document'
+                    },
+                    ...
+                ],
+                templates: [
+                    {
+                        name: 'template name',
+                        icon: 'template icon url',
+                        url: 'http://...'
+                    },
+                    ...
+                ],
+                customization: {
+                    logo: {
+                        image: url,
+                        imageEmbedded: url,
+                        url: http://...
+                    },
+                    backgroundColor: 'header background color',
+                    textColor: 'header text color',
+                    customer: {
+                        name: 'SuperPuper',
+                        address: 'New-York, 125f-25',
+                        mail: 'support@gmail.com',
+                        www: 'www.superpuper.com',
+                        info: 'Some info',
+                        logo: ''
+                    },
+                    about: true,
+                    feedback: {
+                        visible: false,
+                        url: http://...
+                    },
+                    goback: {
+                        url: 'http://...',
+                        text: 'Go to London'
+                    },
+                    chat: true,
+                    comments: true,
+                    zoom: 100,
+                    compactToolbar: false,
+                    leftMenu: true,
+                    rightMenu: true,
+                    toolbar: true,
+                    header: true,
+                    statusBar: true,
+                    autosave: true,
+                    forcesave: false,
+                    commentAuthorOnly: false
+                },
+                plugins: {
+                    autoStartGuid: 'asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}',
+                    url: '../../../../sdkjs-plugins/',
+                    pluginsData: [
+                        "helloworld/config.json",
+                        "chess/config.json",
+                        "speech/config.json",
+                        "clipart/config.json",
+                    ]
+                }
+            },
+            events: {
+                'onReady': <document ready callback>,
+                'onBack': <back to folder callback>,
+                'onDocumentStateChange': <document state changed callback>
+            }
+        }
+
+        # Embedded #
+
+        config = {
+            type: 'embedded',
+            width: '100% by default',
+            height: '100% by default',
+            documentType: 'text' | 'spreadsheet' | 'presentation',
+            document: {
+                title: 'document title',
+                url: 'document url',
+                fileType: 'document file type',
+                key: 'key',
+                vkey: 'vkey'
+            },
+            editorConfig: {
+                licenseUrl: <url for license>,
+                customerId: <customer id>,
+                autostart: 'document',    // action for app's autostart. for presentations default value is 'player'
+                embedded: {
+                     embedUrl: 'url',
+                     fullscreenUrl: 'url',
+                     saveUrl: 'url',
+                     shareUrl: 'url',
+                     toolbarDocked: 'top or bottom'
+                }
+            },
+            events: {
+                'onReady': <document ready callback>,
+                'onBack': <back to folder callback>,
+                'onError': <error callback>,
+            }
+        }
+    */
+
+    // TODO: allow several instances on one page simultaneously
+
+    DocsAPI.DocEditor = function(placeholderId, config) {
+        var _self = this,
+            _config = config || {};
+
+        extend(_config, DocsAPI.DocEditor.defaultConfig);
+        _config.editorConfig.canUseHistory = _config.events && !!_config.events.onRequestHistory;
+        _config.editorConfig.canHistoryClose = _config.events && !!_config.events.onRequestHistoryClose;
+        _config.editorConfig.canHistoryRestore = _config.events && !!_config.events.onRequestRestore;
+        _config.editorConfig.canSendEmailAddresses = _config.events && !!_config.events.onRequestEmailAddresses;
+        _config.editorConfig.canRequestEditRights = _config.events && !!_config.events.onRequestEditRights;
+        _config.frameEditorId = placeholderId;
+
+        var onMouseUp = function (evt) {
+            _processMouse(evt);
+        };
+
+        var _attachMouseEvents = function() {
+            if (window.addEventListener) {
+                window.addEventListener("mouseup", onMouseUp, false)
+            } else if (window.attachEvent) {
+                window.attachEvent("onmouseup", onMouseUp);
+            }
+        };
+
+        var _detachMouseEvents = function() {
+            if (window.removeEventListener) {
+                window.removeEventListener("mouseup", onMouseUp, false)
+            } else if (window.detachEvent) {
+                window.detachEvent("onmouseup", onMouseUp);
+            }
+        };
+
+        var _onReady = function() {
+            if (_config.type === 'mobile') {
+                document.body.onfocus = function(e) {
+                    setTimeout(function(){
+                        iframe.contentWindow.focus();
+
+                        _sendCommand({
+                            command: 'resetFocus',
+                            data: {}
+                        })
+                    }, 10);
+                };
+            }
+
+            _attachMouseEvents();
+
+            if (_config.editorConfig) {
+                _init(_config.editorConfig);
+            }
+
+            if (_config.document) {
+                _openDocument(_config.document);
+            }
+        };
+
+        var _callLocalStorage = function(data) {
+            if (data.cmd == 'get') {
+                if (data.keys && data.keys.length) {
+                    var af = data.keys.split(','), re = af[0];
+                    for (i = 0; ++i < af.length;)
+                        re += '|' + af[i];
+
+                    re = new RegExp(re); k = {};
+                    for (i in localStorage)
+                        if (re.test(i)) k[i] = localStorage[i];
+                } else {
+                    k = localStorage;
+                }
+
+                _sendCommand({
+                    command: 'internalCommand',
+                    data: {
+                        type: 'localstorage',
+                        keys: k
+                    }
+                });
+            } else
+            if (data.cmd == 'set') {
+                var k = data.keys, i;
+                for (i in k) {
+                    localStorage.setItem(i, k[i]);
+                }
+            }
+        };
+
+        var _onMessage = function(msg) {
+            if ( msg ) {
+                if ( msg.type === "onExternalPluginMessage" ) {
+                    _sendCommand(msg);
+                } else
+                if ( msg.frameEditorId == placeholderId ) {
+                    var events = _config.events || {},
+                        handler = events[msg.event],
+                        res;
+
+                    if (msg.event === 'onRequestEditRights' && !handler) {
+                        _applyEditRights(false, 'handler isn\'t defined');
+                    } else if (msg.event === 'onInternalMessage' && msg.data && msg.data.type == 'localstorage') {
+                        _callLocalStorage(msg.data.data);
+                    } else {
+                        if (msg.event === 'onReady') {
+                            _onReady();
+                        }
+
+                        if (handler) {
+                            res = handler.call(_self, {target: _self, data: msg.data});
+                        }
+                    }
+                }
+            }
+        };
+
+        var _checkConfigParams = function() {
+            if (_config.document) {
+                if (!_config.document.url || ((typeof _config.document.fileType !== 'string' || _config.document.fileType=='') &&
+                                              (typeof _config.documentType !== 'string' || _config.documentType==''))) {
+                    window.alert("One or more required parameter for the config object is not set");
+                    return false;
+                }
+
+                var appMap = {
+                        'text': 'docx',
+                        'text-pdf': 'pdf',
+                        'spreadsheet': 'xlsx',
+                        'presentation': 'pptx'
+                    }, app;
+
+                if (typeof _config.documentType === 'string' && _config.documentType != '') {
+                    app = appMap[_config.documentType.toLowerCase()];
+                    if (!app) {
+                        window.alert("The \"documentType\" parameter for the config object is invalid. Please correct it.");
+                        return false;
+                    } else if (typeof _config.document.fileType !== 'string' || _config.document.fileType == '') {
+                        _config.document.fileType = app;
+                    }
+                }
+
+                if (typeof _config.document.fileType === 'string' && _config.document.fileType != '') {
+                    var type = /^(?:(xls|xlsx|ods|csv|xlst|xlsy|gsheet)|(pps|ppsx|ppt|pptx|odp|pptt|ppty|gslides)|(doc|docx|doct|odt|gdoc|txt|rtf|pdf|mht|htm|html|epub|djvu|xps))$/
+                                    .exec(_config.document.fileType);
+                    if (!type) {
+                        window.alert("The \"document.fileType\" parameter for the config object is invalid. Please correct it.");
+                        return false;
+                    } else if (typeof _config.documentType !== 'string' || _config.documentType == ''){
+                        if (typeof type[1] === 'string') _config.documentType = 'spreadsheet'; else
+                        if (typeof type[2] === 'string') _config.documentType = 'presentation'; else
+                        if (typeof type[3] === 'string') _config.documentType = 'text';
+                    }
+                }
+
+                var type = /^(?:(pdf|djvu|xps))$/.exec(_config.document.fileType);
+                if (type && typeof type[1] === 'string') {
+                    if (!_config.document.permissions)
+                        _config.document.permissions = {};
+                    _config.document.permissions.edit = false;
+                }
+
+                if (!_config.document.title || _config.document.title=='')
+                    _config.document.title = 'Unnamed.' + _config.document.fileType;
+
+                if (!_config.document.key) {
+                    _config.document.key = 'xxxxxxxxxxxxxxxxxxxx'.replace(/[x]/g, function (c) {var r = Math.random() * 16 | 0; return r.toString(16);});
+                } else if (typeof _config.document.key !== 'string') {
+                    window.alert("The \"document.key\" parameter for the config object must be string. Please correct it.");
+                    return false;
+                }
+
+                _config.document.token = _config.token;
+            }
+            
+            return true;
+        };
+
+        (function() {
+            var result = /[\?\&]placement=(\w+)&?/.exec(window.location.search);
+            if (!!result && result.length) {
+                if (result[1] == 'desktop') {
+                    _config.editorConfig.targetApp = result[1];
+                    _config.editorConfig.canBackToFolder = false;
+                    _config.editorConfig.canUseHistory = false;
+                    if (!_config.editorConfig.customization) _config.editorConfig.customization = {};
+                    _config.editorConfig.customization.about = false;
+                }
+            }
+        })();
+
+        var target = document.getElementById(placeholderId),
+            iframe;
+
+        if (target && _checkConfigParams()) {
+            iframe = createIframe(_config);
+            target.parentNode && target.parentNode.replaceChild(iframe, target);
+            var _msgDispatcher = new MessageDispatcher(_onMessage, this);
+        }
+
+        /*
+         cmd = {
+         command: 'commandName',
+         data: <command specific data>
+         }
+         */
+
+        var _destroyEditor = function(cmd) {
+            var target = document.createElement("div");
+            target.setAttribute('id', placeholderId);
+
+            if (iframe) {
+                _msgDispatcher && _msgDispatcher.unbindEvents();
+                _detachMouseEvents();
+                iframe.parentNode && iframe.parentNode.replaceChild(target, iframe);
+            }
+        };
+
+        var _sendCommand = function(cmd) {
+            if (iframe && iframe.contentWindow)
+                postMessage(iframe.contentWindow, cmd);
+        };
+
+        var _init = function(editorConfig) {
+            _sendCommand({
+                command: 'init',
+                data: {
+                    config: editorConfig
+                }
+            });
+        };
+
+        var _openDocument = function(doc) {
+            _sendCommand({
+                command: 'openDocument',
+                data: {
+                    doc: doc
+                }
+            });
+        };
+
+        var _showError = function(title, msg) {
+            _showMessage(title, msg, "error");
+        };
+
+        // severity could be one of: "error", "info" or "warning"
+        var _showMessage = function(title, msg, severity) {
+            if (typeof severity !== 'string') {
+                severity = "info";
+            }
+            _sendCommand({
+                command: 'showMessage',
+                data: {
+                    title: title,
+                    msg: msg,
+                    severity: severity
+                }
+            });
+        };
+
+        var _applyEditRights = function(allowed, message) {
+            _sendCommand({
+                command: 'applyEditRights',
+                data: {
+                    allowed: allowed,
+                    message: message
+                }
+            });
+        };
+
+        var _processSaveResult = function(result, message) {
+            _sendCommand({
+                command: 'processSaveResult',
+                data: {
+                    result: result,
+                    message: message
+                }
+            });
+        };
+
+        // TODO: remove processRightsChange, use denyEditingRights
+        var _processRightsChange = function(enabled, message) {
+            _sendCommand({
+                command: 'processRightsChange',
+                data: {
+                    enabled: enabled,
+                    message: message
+                }
+            });
+        };
+
+        var _denyEditingRights = function(message) {
+            _sendCommand({
+                command: 'processRightsChange',
+                data: {
+                    enabled: false,
+                    message: message
+                }
+            });
+        };
+
+        var _refreshHistory = function(data, message) {
+            _sendCommand({
+                command: 'refreshHistory',
+                data: {
+                    data: data,
+                    message: message
+                }
+            });
+        };
+
+        var _setHistoryData = function(data, message) {
+            _sendCommand({
+                command: 'setHistoryData',
+                data: {
+                    data: data,
+                    message: message
+                }
+            });
+        };
+
+        var _setEmailAddresses = function(data) {
+            _sendCommand({
+                command: 'setEmailAddresses',
+                data: {
+                    data: data
+                }
+            });
+        };
+
+        var _processMailMerge = function(enabled, message) {
+            _sendCommand({
+                command: 'processMailMerge',
+                data: {
+                    enabled: enabled,
+                    message: message
+                }
+            });
+        };
+
+        var _downloadAs = function() {
+            _sendCommand({
+                command: 'downloadAs'
+            });
+        };
+
+        var _processMouse = function(evt) {
+            var r = iframe.getBoundingClientRect();
+            var data = {
+                type: evt.type,
+                x: evt.x - r.left,
+                y: evt.y - r.top,
+                event: evt
+            };
+
+            _sendCommand({
+                command: 'processMouse',
+                data: data
+            });
+        };
+
+        var _serviceCommand = function(command, data) {
+            _sendCommand({
+                command: 'internalCommand',
+                data: {
+                    command: command,
+                    data: data
+                }
+            });
+        };
+
+        return {
+            showError           : _showError,
+            showMessage         : _showMessage,
+            processSaveResult   : _processSaveResult,
+            processRightsChange : _processRightsChange,
+            denyEditingRights   : _denyEditingRights,
+            refreshHistory      : _refreshHistory,
+            setHistoryData      : _setHistoryData,
+            setEmailAddresses   : _setEmailAddresses,
+            processMailMerge    : _processMailMerge,
+            downloadAs          : _downloadAs,
+            serviceCommand      : _serviceCommand,
+            attachMouseEvents   : _attachMouseEvents,
+            detachMouseEvents   : _detachMouseEvents,
+            destroyEditor       : _destroyEditor
+        }
+    };
+
+
+    DocsAPI.DocEditor.defaultConfig = {
+        type: 'desktop',
+        width: '100%',
+        height: '100%',
+        editorConfig: {
+            lang: 'en',
+            canCoAuthoring: true,
+            customization: {
+                about: true,
+                feedback: false
+            }
+        }
+    };
+
+    DocsAPI.DocEditor.version = function() {
+        return '0.0.0';
+    };
+
+    MessageDispatcher = function(fn, scope) {
+        var _fn     = fn,
+            _scope  = scope || window,
+            eventFn = function(msg) {
+                _onMessage(msg);
+            };
+
+        var _bindEvents = function() {
+            if (window.addEventListener) {
+                window.addEventListener("message", eventFn, false)
+            }
+            else if (window.attachEvent) {
+                window.attachEvent("onmessage", eventFn);
+            }
+        };
+
+        var _unbindEvents = function() {
+            if (window.removeEventListener) {
+                window.removeEventListener("message", eventFn, false)
+            }
+            else if (window.detachEvent) {
+                window.detachEvent("onmessage", eventFn);
+            }
+        };
+
+        var _onMessage = function(msg) {
+            // TODO: check message origin
+            if (msg && window.JSON) {
+
+                try {
+                    var msg = window.JSON.parse(msg.data);
+                    if (_fn) {
+                        _fn.call(_scope, msg);
+                    }
+                } catch(e) {}
+            }
+        };
+
+        _bindEvents.call(this);
+
+        return {
+            unbindEvents: _unbindEvents
+        }
+    };
+
+    function getBasePath() {
+        var scripts = document.getElementsByTagName('script'),
+            match;
+
+        for (var i = scripts.length - 1; i >= 0; i--) {
+            match = scripts[i].src.match(/(.*)api\/documents\/api.js/i);
+            if (match) {
+                return match[1];
+            }
+        }
+
+        return "";
+    }
+
+    function getExtensionPath() {
+        if ("undefined" == typeof(extensionParams) || null == extensionParams["url"])
+            return null;
+        return extensionParams["url"] + "apps/";
+    }
+
+    function getAppPath(config) {
+        var extensionPath = getExtensionPath(),
+            path = extensionPath ? extensionPath : getBasePath(),
+            appMap = {
+                'text': 'documenteditor',
+                'text-pdf': 'documenteditor',
+                'spreadsheet': 'spreadsheeteditor',
+                'presentation': 'presentationeditor'
+            },
+            app = appMap['text'];
+
+        if (typeof config.documentType === 'string') {
+            app = appMap[config.documentType.toLowerCase()];
+        } else
+        if (!!config.document && typeof config.document.fileType === 'string') {
+            var type = /^(?:(xls|xlsx|ods|csv|xlst|xlsy|gsheet)|(pps|ppsx|ppt|pptx|odp|pptt|ppty|gslides))$/
+                            .exec(config.document.fileType);
+            if (type) {
+                if (typeof type[1] === 'string') app = appMap['spreadsheet']; else
+                if (typeof type[2] === 'string') app = appMap['presentation'];
+            }
+        }
+
+        path += app + "/";
+        path += config.type === "mobile"
+            ? "mobile"
+            : config.type === "embedded"
+                ? "embed"
+                : "main";
+        path += "/index.html";
+
+        return path;
+    }
+
+    function getAppParameters(config) {
+        var params = "?_dc=0";
+
+        if (config.editorConfig && config.editorConfig.lang)
+            params += "&lang=" + config.editorConfig.lang;
+
+        if (config.editorConfig && config.editorConfig.targetApp!=='desktop') {
+            if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.loaderName) {
+                if (config.editorConfig.customization.loaderName !== 'none') params += "&customer=" + config.editorConfig.customization.loaderName;
+            } else
+                params += "&customer=ONLYOFFICE";
+            if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.loaderLogo) {
+                if (config.editorConfig.customization.loaderLogo !== '') params += "&logo=" + config.editorConfig.customization.loaderLogo;
+            }
+        }
+
+        if (config.frameEditorId)
+            params += "&frameEditorId=" + config.frameEditorId;
+        
+        return params;
+    }
+
+    function createIframe(config) {
+        var iframe = document.createElement("iframe");
+
+        iframe.src = getAppPath(config) + getAppParameters(config);
+        iframe.width = config.width;
+        iframe.height = config.height;
+        iframe.align = "top";
+        iframe.frameBorder = 0;
+        iframe.name = "frameEditor";
+        iframe.allowFullscreen = true;
+        iframe.setAttribute("allowfullscreen",""); // for IE11
+        iframe.setAttribute("onmousewheel",""); // for Safari on Mac
+        return iframe;
+    }
+
+    function postMessage(wnd, msg) {
+        if (wnd && wnd.postMessage && window.JSON) {
+            // TODO: specify explicit origin
+            wnd.postMessage(window.JSON.stringify(msg), "*");
+        }
+
+    }
+
+    function extend(dest, src) {
+        for (var prop in src) {
+            if (src.hasOwnProperty(prop)) {
+                if (typeof dest[prop] === 'undefined') {
+                    dest[prop] = src[prop];
+                } else
+                if (typeof dest[prop] === 'object' &&
+                        typeof src[prop] === 'object') {
+                    extend(dest[prop], src[prop])
+                }
+            }
+        }
+        return dest;
+    }
+
+})(window.DocsAPI = window.DocsAPI || {}, window, document);
+

www/common/onlyoffice/web-apps/apps/api/documents/cache-scripts.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ONLYOFFICE Documents</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <style type="text/css"></style>
+</head>
+<body>
+    <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
+    <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
+    <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
+	<script type="text/javascript" src="../../../../sdkjs/common/AllFonts.js"></script>
+    <script type="text/javascript" src="../../../../sdkjs/word/sdk-all-min.js"></script>
+    <script type="text/javascript" src="../../../../sdkjs/word/sdk-all.js"></script>
+    <div id="editor_sdk">
+    <script type="text/javascript">
+        window['AscNotLoadAllScript'] = true;
+        var editor = new Asc.asc_docs_api({
+            'id-view'  : 'editor_sdk'
+        });
+        editor.LoadFontsFromServer();
+    </script>
+</body>
+</html>

www/common/onlyoffice/web-apps/apps/api/documents/index.html

@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ONLYOFFICE Documents</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8"/>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-touch-fullscreen" content="yes">
+
+    <style type="text/css">
+        html {
+            height: 100%;
+        }
+
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #wrap {
+            position:absolute;
+            left:0;
+            top:0;
+            right:0;
+            bottom:0;
+        }
+    </style>
+</head>
+<body>
+    <div id="wrap">
+        <div id="placeholder"></div>
+    </div>
+
+    <script type="text/javascript" src="api.js"></script>
+    <script>
+        (function() {
+
+            // Url parameters
+
+            var urlParams = getUrlParams(),
+                cfg = getEditorConfig(urlParams),
+                doc = getDocumentData(urlParams);
+
+            // Document Editor
+
+            var docEditor = new DocsAPI.DocEditor('placeholder', {
+                type: urlParams['type'],
+                width: '100%',
+                height: '100%',
+                documentType: urlParams['doctype'] || 'text',
+                document: doc,
+                editorConfig: cfg,
+                events: {
+                    'onReady': onDocEditorReady,
+                    'onDocumentStateChange': onDocumentStateChange,
+                    'onRequestEditRights': onRequestEditRights,
+                    'onRequestHistory': onRequestHistory,
+                    'onRequestHistoryData': onRequestHistoryData,
+                    'onRequestEmailAddresses': onRequestEmailAddresses,
+                    'onRequestStartMailMerge': onRequestStartMailMerge,
+                    'onRequestHistoryClose': onRequestHistoryClose,
+                    'onError': onError
+                }
+            });
+
+            // Document Editor event handlers
+
+            function onRequestEmailAddresses() {
+                docEditor.setEmailAddresses({emailAddresses: ['aaa@mail.ru'], createEmailAccountUrl: 'http://ya.ru'});
+            }
+
+            function onRequestHistory() {
+                docEditor.refreshHistory({
+                    'currentVersion': 3,
+                    'history': [
+                    {
+                        'user': {
+                            id: '8952d4ee-e8a5-42bf-86f0-6cd77801ec15',
+                            name: 'Татьяна Щербакова'
+                        },
+                        'changes': null,
+                        'created': '1/18/2015 6:38 PM',
+                        'version': 1,
+                        'versionGroup': 1,
+                        'key': 'wyX9AwRq_677SWKjhfk='
+                    },
+                    {
+                        'user': {
+                            id: '8952d4ee-e8a5-42bf-86f0-6cd77801ec15',
+                            name: 'Татьяна Щербакова'
+                        },
+                        'changes': [
+                            {
+                                'user': {
+                                    id: '8952d4ee-e8a5-42bf-86f0-6cd77801ec15',
+                                    name: 'Татьяна Щербакова'
+                                },
+                                'created': '1/19/2015 6:30 PM'
+                            },
+                            {
+                                'user': {
+                                    'id': '8952d4ee-e8a5-42bf-11f0-6cd77801ec15',
+                                    'name': 'Александр Трофимов'
+                                },
+                                'created': '1/19/2015 6:32 PM'
+                            },
+                            {
+                                'user': {
+                                    id: '8952d4ee-e8a5-42bf-86f0-6cd77801ec15',
+                                    name: 'Татьяна Щербакова'
+                                },
+                                'created': '1/19/2015 6:38 PM'
+                            }
+                        ],
+                        'created': '2/19/2015 6:38 PM',
+                        'version': 2,
+                        'versionGroup': 1,
+                        'key': 'wyX9AwRq_677SWKjhfk='
+                    },
+                    {
+                        'user': {
+                            id: '895255ee-e8a5-42bf-86f0-6cd77801ec15',
+                            name: 'Me'
+                        },
+                        'changes': null,
+                        'created': '2/21/2015 6:38 PM',
+                        'version': 3,
+                        'versionGroup': 2,
+                        'key': 'wyX9AwRq_677SWKjhfk='
+                    },
+                    {
+                        'user': {
+                            id: '8952d4ee-e8a5-42bf-11f0-6cd77801ec15',
+                            name: 'Александр Трофимов'
+                        },
+                        'changes': null,
+                        'created': '2/22/2015 6:37 PM',
+                        'version': 4,
+                        'versionGroup': 3,
+                        'key': 'wyX9AwRq_677SWKjhfk='
+                    },
+                    {
+                        'user': {
+                            id: '8952d4ee-e8a5-42bf-11f0-6cd33801ec15',
+                            name: 'Леонид Орлов'
+                        },
+                        'changes': null,
+                        'created': '2/24/2015 6:29 PM',
+                        'version': 5,
+                        'versionGroup': 3,
+                        'key': 'wyX9AwRq_677SWKjhfk='
+                    }]
+                });
+            }
+
+            function onRequestHistoryData(revision) {
+                docEditor.setHistoryData(
+                    {
+                        'version': revision.data,
+                        'url': 'http://isa2',
+                        'urlDiff': 'http://isa2',
+                        'changesUrl': 'http://isa2'
+                    }
+                );
+            }
+
+            function onRequestStartMailMerge() {
+                docEditor.processMailMerge(true, 'some error message');
+            }
+
+            function onRequestHistoryClose() {
+                // reload page
+            }
+
+            function onDocEditorReady(event) {
+                if (event.target) {
+                    //console.log('Ready! Editor: ', event.target);
+                }
+            }
+
+            function onDocumentStateChange(event) {
+                var isModified = event.data;
+                //console.log(isModified);
+            }
+
+            function onRequestEditRights(event) {
+                // occurs whenever the user tryes to enter edit mode
+                docEditor.applyEditRights(true, "Someone is editing this document right now. Please try again later.");
+            }
+
+            function onError(event) {
+                // critical error happened
+                // examine event.data.errorCode and event.data.errorDescription for details
+            }
+
+            function onDownloadAs(event) {
+                // return url of downloaded doc
+                // console.log(event.data);
+            }
+
+
+            // helpers
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function getDocumentData(urlParams) {
+                return {
+                    key: urlParams["key"],
+                    url: urlParams["url"] || '_offline_',
+                    title: urlParams["title"],
+                    fileType: urlParams["filetype"],
+                    vkey: urlParams["vkey"],
+                    permissions: {
+                        edit: true,
+                        download: true,
+                        reader: true
+                    }
+                };
+            }
+
+            function getEditorConfig(urlParams) {
+                return {
+                    mode            : urlParams["mode"] || 'edit',
+                    lang            : urlParams["lang"] || 'en',
+                    canCoAuthoring  : true,
+                    createUrl       : 'http://www.example.com/create',
+
+                    user: {
+                        id: urlParams["userid"] || 'uid-901', firstname: urlParams["userfname"] || 'Mitchell', lastname: urlParams["userlname"] || 'Hamish'
+                    },
+                    recent          : [
+                        {title: 'Memory.docx',          url: 'http://onlyoffice.com',  folder: 'Document Editor'},
+                        {title: 'Description.doc',      url: 'http://onlyoffice.com',  folder: 'Document Editor'},
+                        {title: 'DocEditor_right.xsl',  url: 'http://onlyoffice.com',  folder: 'Spreadsheet Editor'},
+                        {title: 'api.rtf',              url: 'http://onlyoffice.com',  folder: 'Unnamed folder'}
+                    ],
+//                    templates       : [
+//                        {name: 'Contracts', icon: '../../api/documents/resources/templates/contracts.png', url: 'http://...'},
+//                        {name: 'Letter',    icon: '../../api/documents/resources/templates/letter.png', url: 'http://...'},
+//                        {name: 'List',      icon: '../../api/documents/resources/templates/list.png', url: 'http://...'},
+//                        {name: 'Plan',      icon: '../../api/documents/resources/templates/plan.png', url: 'http://...'}
+//                    ],
+                    embedded        : {
+                        embedUrl        : 'http://onlyoffice.com/embed',
+                        fullscreenUrl   : 'http://onlyoffice.com/fullscreen',
+                        saveUrl         : 'http://onlyoffice.com/download',
+                        shareUrl        : 'http://tl.com/72b4la97',
+                        toolbarDocked   : 'top'
+                    }
+                    ,customization: {
+//                        logo: {
+//                            image: 'https://dylnrgbh910l3.cloudfront.net/studio/tag/i8.8.237/skins/default/images/onlyoffice_logo/editor_logo_general.png', // default size 86 x 20
+//                            imageEmbedded: 'https://d2hw9csky753gb.cloudfront.net/studio/tag/i8.8.237/skins/default/images/onlyoffice_logo/editor_embedded_logo.png', // default size 124 x 20
+//                            url: 'http://...'
+//                        },
+//                        backgroundColor: '#ffffff',
+//                        textColor: '#ff0000',
+//                        customer: {
+//                            name: 'SuperPuper',
+//                            address: 'New-York, 125f-25',
+//                            mail: 'support@gmail.com',
+//                            www: 'www.superpuper.com',
+//                            info: 'Some info',
+//                            logo: 'https://img.imgsmail.ru/r/default/portal/0.1.29/logo.png' // default size 216 x 35
+//                        },
+//                        goback: {text: 'Go To London', url: 'http://...'},
+                        about: true,
+                        feedback: true
+                    }
+                };
+            }
+
+            // Mobile version
+
+            function isMobile(){
+                var prefixes = {
+                        ios: 'i(?:Pad|Phone|Pod)(?:.*)CPU(?: iPhone)? OS ',
+                        android: '(Android |HTC_|Silk/)',
+                        blackberry: 'BlackBerry(?:.*)Version\/',
+                        rimTablet: 'RIM Tablet OS ',
+                        webos: '(?:webOS|hpwOS)\/',
+                        bada: 'Bada\/'
+                    },
+                    i, prefix, match;
+
+                for (i in prefixes){
+                    if (prefixes.hasOwnProperty(i)) {
+                        prefix = prefixes[i];
+
+                        if (navigator.userAgent.match(new RegExp('(?:'+prefix+')([^\\s;]+)')))
+                            return true;
+                    }
+                }
+
+                return false;
+            }
+
+            var fixSize = function() {
+                var wrapEl = document.getElementById('wrap');
+                if (wrapEl){
+                    wrapEl.style.height = screen.availHeight + 'px';
+                    window.scrollTo(0, -1);
+                    wrapEl.style.height = window.innerHeight + 'px';
+                }
+            };
+
+            var fixIpadLandscapeIos7 = function() {
+                if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
+                    var wrapEl = document.getElementById('wrap');
+                    if (wrapEl){
+                        wrapEl.style.position = "fixed";
+                        wrapEl.style.bottom = 0;
+                        wrapEl.style.width = "100%";
+                    }
+                }
+            };
+
+            if (isMobile()){
+                window.addEventListener('load', fixSize);
+                window.addEventListener('resize', fixSize);
+
+                fixIpadLandscapeIos7();
+            }
+
+        })();
+    </script>
+</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/index.html

@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ONLYOFFICE Document Editor</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8"/>
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" type="text/css" href="../../../apps/documenteditor/main/resources/css/app.css">
+
+    <!-- splash -->        
+
+    <style type="text/css">
+        .loadmask {
+            left: 0;
+            top: 0;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            border: none;
+            background-color: #f4f4f4;
+            z-index: 100;
+        }
+
+        .loader-page {
+            width: 100%;
+            height: 170px;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            line-height: 10px;
+        }
+
+        .loader-logo {
+            max-height: 160px;
+            margin-bottom: 10px;
+        }
+
+        .loader-page-romb {
+            width: 40px;
+            display: inline-block;
+        }
+
+        .loader-page-text {
+            width: 100%;
+            bottom: 42%;
+            position: absolute;
+            text-align: center;
+            color: #888;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 20px;
+        }
+
+        .loader-page-text-loading {
+            font-size: 14px;
+        }
+
+        .loader-page-text-customer {
+            font-size: 16px;
+            margin-bottom: 5px;
+        }
+
+        .romb {
+            width: 40px;
+            height: 40px;
+            -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+            -moz-transform: rotate(135deg) skew(20deg, 20deg);
+            -ms-transform: rotate(135deg) skew(20deg, 20deg);
+            -o-transform: rotate(135deg) skew(20deg, 20deg);
+            position: absolute;
+            background: red;
+            border-radius: 6px;
+            -webkit-animation: movedown 3s infinite ease;
+            -moz-animation: movedown 3s infinite ease;
+            -ms-animation: movedown 3s infinite ease;
+            -o-animation: movedown 3s infinite ease;
+            animation: movedown 3s infinite ease;
+        }
+
+        #blue {
+            z-index: 3;
+            background: #55bce6;
+            -webkit-animation-name: blue;
+            -moz-animation-name: blue;
+            -ms-animation-name: blue;
+            -o-animation-name: blue;
+            animation-name: blue;
+        }
+
+        #red {
+            z-index:1;
+            background: #de7a59;
+            -webkit-animation-name: red;
+            -moz-animation-name: red;
+            -ms-animation-name: red;
+            -o-animation-name: red;
+            animation-name: red;
+        }
+
+        #green {
+            z-index: 2;
+            background: #a1cb5c;
+            -webkit-animation-name: green;
+            -moz-animation-name: green;
+            -ms-animation-name: green;
+            -o-animation-name: green;
+            animation-name: green;
+        }
+
+        @-webkit-keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0;}
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @keyframes red {
+              0%    { top:120px; background: #de7a59; }
+             10%    { top:120px; background: #F2CBBF; }
+             14%    { background: #f4f4f4; top:120px; }
+             15%    { background: #f4f4f4; top:0; }
+             20%    { background: #E6E4E4; }
+             30%    { background: #D2D2D2; }
+             40%    { top:120px; }
+            100%    { top:120px; background: #de7a59; }
+        }
+
+        @-webkit-keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @keyframes green {
+              0%    { top:110px; background: #a1cb5c; opacity:1; }
+             10%    { top:110px; background: #CBE0AC; opacity:1; }
+             14%    { background: #f4f4f4; top:110px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #EFEFEF; top:0; opacity:1; }
+             30%    { background:#E6E4E4; }
+             70%    { top:110px; }
+            100%    { top:110px; background: #a1cb5c; }
+        }
+
+        @-webkit-keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0,2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+
+        @keyframes blue {
+              0%    { top:100px; background: #55bce6; opacity:1; }
+             10%    { top:100px; background: #BFE8F8; opacity:1; }
+             14%    { background: #f4f4f4; top:100px; opacity:1; }
+             15%    { background: #f4f4f4; top:0; opacity:1; }
+             20%    { background: #f4f4f4; top:0; opacity:0; }
+             25%    { background: #f4f4f4; top:0; opacity:0; }
+             45%    { background: #EFEFEF; top:0; opacity:0,2; }
+            100%    { top:100px; background: #55bce6; }
+        }
+    </style>
+</head>
+<body>
+
+    <script>
+        var userAgent = navigator.userAgent.toLowerCase(),
+            check = function(regex){ return regex.test(userAgent); },
+            stopLoading = false;
+        if (!check(/opera/) && (check(/msie/) || check(/trident/))) {
+            var m = /msie (\d+\.\d+)/.exec(userAgent);
+            if (m && parseFloat(m[1]) < 9.0) {
+                document.write('<div class="app-error-panel">' +
+                                '<div class="message-block">' +
+                                    '<div class="message-inner">' +
+                                        '<div class="title">Your browser is not supported.</div>' +
+                                        '<div class="text">Sorry, Document Editor is currently only supported in the latest versions of the Chrome, Firefox, Safari or Internet Explorer web browsers.</div>' +
+                                    '</div>' +
+                                '</div></div>');
+                stopLoading = true;
+            }
+        }
+
+        function getUrlParams() {
+            var e,
+                a = /\+/g,  // Regex for replacing addition symbol with a space
+                r = /([^&=]+)=?([^&]*)/g,
+                d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                q = window.location.search.substring(1),
+                urlParams = {};
+
+            while (e = r.exec(q))
+                urlParams[d(e[1])] = d(e[2]);
+
+            return urlParams;
+        }
+
+        function encodeUrlParam(str) {
+            return str.replace(/&/g, '&amp;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#39;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;');
+        }
+
+        var params = getUrlParams(),
+            lang = (params["lang"] || 'en').split("-")[0],
+            customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+            margin = (customer !== '') ? 50 : 20,
+            loading = 'Loading...',
+            logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+        window.frameEditorId = params["frameEditorId"];
+
+        if ( lang == 'de')      loading = 'Ladevorgang...';
+        else if ( lang == 'es') loading = 'Cargando...';
+        else if ( lang == 'fr') loading = 'Chargement en cours...';
+        else if ( lang == 'it') loading = 'Caricamento in corso...';
+        else if ( lang == 'pt') loading = 'Carregando...';
+        else if ( lang == 'ru') loading = 'Загрузка...';
+        else if ( lang == 'sl') loading = 'Nalaganje...';
+        else if ( lang == 'tr') loading = 'Yükleniyor...';
+
+        if (!stopLoading)
+        document.write(
+            '<div id="loading-mask" class="loadmask">' +
+                '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                    ((logo!==null) ? logo :
+                    '<div class="loader-page-romb">' +
+                        '<div class="romb" id="blue"></div>' +
+                        '<div class="romb" id="green"></div>' +
+                        '<div class="romb" id="red"></div>' +
+                    '</div>') +
+                '</div>' +
+                '<div class="loader-page-text">' +  customer +
+                '<div class="loader-page-text-loading">' + loading + '</div>' +
+                '</div>' +
+            '</div>');
+
+        var require = { 
+            waitSeconds: 30 
+        };
+    </script>
+
+
+    <div id="viewport"></div>
+    <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+
+</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/Contents.json

@@ -0,0 +1,42 @@
+[
+	{"src": "UsageInstructions/SetPageParameters.htm", "name": "Set page parameters", "headername": "Usage Instructions"},
+	{"src": "UsageInstructions/ChangeColorScheme.htm", "name": "Change color scheme"},
+	{"src": "UsageInstructions/CopyPasteUndoRedo.htm", "name": "Copy/paste text passages, undo/redo your actions"},
+	{"src": "UsageInstructions/NonprintingCharacters.htm", "name": "Show/hide nonprinting characters"},
+	{"src": "UsageInstructions/AlignText.htm", "name": "Align your text in a paragraph"},
+	{"src": "UsageInstructions/FormattingPresets.htm", "name": "Apply formatting styles"},
+	{"src": "UsageInstructions/BackgroundColor.htm", "name": "Select background color for a paragraph"},
+	{"src": "UsageInstructions/ParagraphIndents.htm", "name": "Change paragraph indents"},
+	{"src": "UsageInstructions/LineSpacing.htm", "name": "Set paragraph line spacing"},
+	{"src": "UsageInstructions/PageBreaks.htm", "name": "Insert page breaks"},
+	{"src": "UsageInstructions/SectionBreaks.htm", "name": "Insert section breaks"},
+	{"src": "UsageInstructions/AddBorders.htm", "name": "Add borders"},
+	{"src": "UsageInstructions/FontTypeSizeColor.htm", "name": "Set font type, size, and color"},
+	{"src": "UsageInstructions/DecorationStyles.htm", "name": "Apply font decoration styles"},
+	{"src": "UsageInstructions/CopyClearFormatting.htm", "name": "Copy/clear text formatting"},
+	{"src": "UsageInstructions/SetTabStops.htm", "name": "Set tab stops"},
+	{"src": "UsageInstructions/CreateLists.htm", "name": "Create lists"},
+	{"src": "UsageInstructions/InsertTables.htm", "name": "Insert tables"},
+	{"src": "UsageInstructions/InsertImages.htm", "name": "Insert images"},
+	{"src": "UsageInstructions/InsertAutoshapes.htm", "name": "Insert autoshapes"},
+	{"src": "UsageInstructions/InsertCharts.htm", "name": "Insert charts"},
+	{"src": "UsageInstructions/AddHyperlinks.htm", "name": "Add hyperlinks"},
+	{"src": "UsageInstructions/InsertDropCap.htm", "name": "Insert a drop cap"},
+	{"src": "UsageInstructions/InsertHeadersFooters.htm", "name": "Insert headers and footers"},
+    {"src":"UsageInstructions/InsertPageNumbers.htm", "name": "Insert page numbers" },
+    {"src": "UsageInstructions/InsertEquation.htm", "name": "Insert equations" },
+    {"src": "UsageInstructions/InsertTextObjects.htm", "name": "Insert text objects" },
+    {"src": "UsageInstructions/UseMailMerge.htm", "name": "Use mail merge"},
+	{"src": "UsageInstructions/ViewDocInfo.htm", "name": "View document information"},
+	{"src": "UsageInstructions/SavePrintDownload.htm", "name": "Save/download/print your document"},
+	{"src": "UsageInstructions/OpenCreateNew.htm", "name": "Create a new document or open an existing one"},
+	{"src": "HelpfulHints/About.htm", "name": "About Document Editor", "headername": "Helpful Hints"},
+	{"src": "HelpfulHints/SupportedFormats.htm", "name": "Supported Formats of Electronic Documents"},
+	{"src": "HelpfulHints/AdvancedSettings.htm", "name": "Advanced Settings of Document Editor"},
+	{"src": "HelpfulHints/Navigation.htm", "name": "View Settings and Navigation Tools"},
+	{"src": "HelpfulHints/Search.htm", "name": "Search and Replace Function"},
+	{"src": "HelpfulHints/CollaborativeEditing.htm", "name": "Collaborative Document Editing"},
+	{"src": "HelpfulHints/Review.htm", "name": "Document Review"},
+	{"src": "HelpfulHints/SpellChecking.htm", "name": "Spell-checking"},
+	{"src": "HelpfulHints/KeyboardShortcuts.htm", "name": "Keyboard Shortcuts"}
+]

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/About.htm

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>About Document Editor</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="The short description of Document Editor" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+		<h1>About Document Editor</h1>
+			<p><b>Document Editor</b> is an <span class="onlineDocumentFeatures">online</span> application that lets you look through 
+			and edit documents<span class="onlineDocumentFeatures"> directly in your browser</span>.</p>
+			<p>Using <b>Document Editor</b>, you can perform various editing operations like in any desktop editor, 
+			print the edited documents keeping all the formatting details or download them onto your computer hard disk drive 
+			as PDF, TXT, DOCX, ODT, or HTML files.</p>
+			<p>To view the current software version and licensor details, click the <img alt="About icon" src="../images/about.png" /> icon at the left sidebar.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/AdvancedSettings.htm

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Advanced Settings of Document Editor</title>
+    <meta charset="utf-8" />
+    <meta name="description" content="The advanced settings of Document Editor" />
+    <link type="text/css" rel="stylesheet" href="../editor.css" />
+</head>
+<body>
+    <div class="mainpart">
+        <h1>Advanced Settings of Document Editor</h1>
+        <p><b>Document Editor</b> lets you change its advanced settings. To access them, click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Advanced Settings...</b> option. You can also use the <img alt="Advanced Settings icon" src="../images/advanced_settings_icon.png" /> icon in the right upper corner of the top toolbar.</p>
+        <p>The advanced settings are:</p>
+        <ul>
+            <li><b>Commenting Display</b><sup class="oOfficeFeatures">*</sup> is used to turn on/off the live commenting option. If you disable this feature, the commented passages will be highlighted only if you click the <b>Comments</b> <img alt="Comments icon" src="../images/commentsicon.png" /> icon.</li>
+            <li><b>Spell Checking</b> is used to turn on/off the spell checking option.</li>
+            <li><b>Alternate Input</b> is used to turn on/off hieroglyphs.</li>
+            <li><b>Alignment Guides</b> is used to turn on/off alignment guides that appear when you move objects and allow you to position them on the page precisely.</li>
+            <li class="onlineDocumentFeatures"><b>Autosave</b> is used to turn on/off automatic saving of changes you make while editing.</li>
+            <li class="onlineDocumentFeatures"><b>Co-editing Mode</b> is used to select the display of the changes made during the co-editing:
+                <ul>
+                    <li>By default the <b>Fast</b> mode is selected, the users who take part in the document co-editing will see the changes in realtime once they are made by other users.</li>
+                    <li>If you prefer not to see other user changes (so that they do not disturb you, or for some other reason), select the <b>Strict</b> mode and all the changes will be shown only after you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon notifying you that there are changes from other users.</li>
+                </ul>
+            </li>
+            <li class="onlineDocumentFeatures">
+                <b>Realtime Collaboration Changes</b><sup>*</sup> is used to specify what changes you want to be highlighted during co-editing:
+                <ul>
+                    <li>Selecting the <b>View None</b> option, changes made during the current session will not be highlighted.</li>
+                    <li>Selecting the <b>View All</b> option, all the changes made during the current session will be highlighted.</li>
+                    <li>Selecting the <b>View Last</b> option, only the changes made since you last time clicked the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon will be highlighted. This option is only available when the <b>Strict</b> co-editing mode is selected.</li>
+                </ul>
+            </li>
+            <li><b>Default Zoom Value</b> is used to set the default zoom value selecting it in the list of available options from 50% to 200%. You can also choose the <b>Fit to Page</b> or <b>Fit to Width</b> option.</li>
+            <li>
+                <b>Font Hinting</b> is used to select the type a font is displayed in Document Editor:
+                <ul>
+                    <li>Choose <b>As Windows</b> if you like the way fonts are usually displayed on Windows, i.e. using Windows font hinting.</li>
+                    <li>Choose <b>As OS X</b> if you like the way fonts are usually displayed on a Mac, i.e. without any font hinting at all.</li>
+                    <li>Choose <b>Native</b> if you want your text to be displayed with the hinting embedded into font files.</li>
+                </ul>
+            </li>
+            <li><b>Unit of Measurement</b> is used to specify what units are used on the rulers and in properties windows for measuring elements parameters such as width, height, spacing, margins etc. You can select the <b>Centimeter</b>, <b>Point</b>, or <b>Inch</b> option.</li>
+        </ul>
+        <p>To save the changes you made, click the <b>Apply</b> button.</p>
+        <p class="oOfficeFeatures"><sup>*</sup>available for paid versions only</p>
+    </div>
+</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/CollaborativeEditing.htm

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Collaborative Document Editing</title>
+    <meta charset="utf-8" />
+    <meta name="description" content="Tips on collaborative editing" />
+    <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <script type="text/javascript" src="../callback.js"></script>
+</head>
+<body>
+    <div class="mainpart">
+        <h1>Collaborative Document Editing</h1>
+        <p><b>Document Editor</b> offers you the possibility to work at a document collaboratively with other users. This feature includes:</p>
+        <ul>
+            <li class="onlineDocumentFeatures">simultaneous multi-user access to the edited document</li>
+            <li class="onlineDocumentFeatures">visual indication of passages that are being edited by other users</li>
+            <li class="onlineDocumentFeatures">synchronization of changes with one button click</li>
+            <li class="onlineDocumentFeatures">chat to share ideas concerning particular document parts</li>
+            <li>comments containing the description of a task or problem that should be solved</li>
+        </ul>
+        <div class="onlineDocumentFeatures">
+        <h3>Co-editing</h3>
+        <p><b>Document Editor</b> allows to select one of the two available co-editing modes. <b>Fast</b> is used by default and shows the changes made by other users in realtime. <b>Strict</b> is selected to hide other user changes until you click the <b>Save</b> <img alt="Save icon" src="../images/saveupdate.png" /> icon to save your own changes and accept the changes made by others. The mode can be selected in the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a>.</p>
+        <p>When a document is being edited by several users simultaneously in the <b>Strict</b> mode, the edited text passages are marked with dashed lines of different colors. By hovering the mouse cursor over one of the edited passages, the name of the user who is editing it at the moment is displayed. The <b>Fast</b> mode will show the actions and the names of the co-editors once they are editing the text.</p>
+        <p>The number of users who are working at the current document is specified in the left lower corner at the status bar - <img alt="Number of users icon" src="../images/usersnumber.png" />. If you want to see who exactly are editing the file now, you can open the <b>Chat</b> panel with the full list of the users.</p>
+        <p>When no users are viewing or editing the file, the icon in the status bar will look like <img alt="Manage document access rights icon" src="../images/access_rights.png" /> allowing you to manage the users who have access to the file right from the document: invite new users giving them either full or read-only access, or denying some users access rights to the file. Click this icon to manage the access to the file; this can be done both when there are no other users who view or co-edit the document at the moment and when there are other users and the icon looks like <img alt="Number of users icon" src="../images/usersnumber.png" />.</p>
+        <p>As soon as one of the users saves his/her changes by clicking the <img alt="Save icon" src="../images/savewhilecoediting.png" /> icon, the others will see a note within the status bar stating that they have updates. To save the changes you made, so that other users can view them, and get the updates saved by your co-editors, click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar. The updates will be highlighted for you to check what exactly has been changed.</p>
+        <p>You can specify what changes you want to be highlighted during co-editing if you click the <img alt="File icon" src="../images/file.png" /> icon at the left sidebar, select the <b>Advanced Settings...</b> option and choose between <b>none</b>, <b>all</b> and <b>last</b> realtime collaboration changes. Selecting <b>View all</b> changes, all the changes made during the current session will be highlighted. Selecting <b>View last</b> changes, only the changes made since you last time clicked the <img alt="Save icon" src="../images/saveupdate.png" /> icon will be highlighted. Selecting <b>View None</b> changes, changes made during the current session will not be highlighted.</p>
+        <h3>Chat<a class="sup_link" href="../HelpfulHints/CollaborativeEditing.htm#footnote" onclick="onhyperlinkclick(this)"><sup>*</sup></a></h3>
+        <p>You can use this tool to coordinate the co-editing process on-the-fly, for example, to arrange with your collaborators about who is doing what, which paragraph you are going to edit now etc.</p>
+        <p>The chat messages are stored during one session only. To discuss the document content it is better to use comments which are stored until you decide to delete them.</p>
+        <p>To access the chat and leave a message for other users,</p>
+        <ol>
+            <li>click the <img alt="Chat icon" src="../images/chaticon.png" /> icon at the left sidebar,</li>
+            <li>enter your text into the corresponding field below,</li>
+            <li>press the <b>Send</b> button.</li>
+        </ol>
+        <p>All the messages left by users will be displayed on the panel on the left. If there are new messages you haven't read yet, the chat icon will look like this - <img alt="Chat icon" src="../images/chaticon_new.png" />.</p>
+        <p>To close the panel with chat messages, click the <img alt="Chat icon" src="../images/chaticon.png" /> icon once again.</p>
+        </div>
+                <h3>Comments<a class="sup_link oOfficeFeatures" href="../HelpfulHints/CollaborativeEditing.htm#footnote" onclick="onhyperlinkclick(this)"><sup>*</sup></a></h3>
+        <p>To leave a comment,</p>
+        <ol>
+            <li>select a text passage where you think there is an error or problem,</li>
+            <li>
+                use the <img alt="Comments icon" src="../images/commentsicon.png" /> icon at the left sidebar to open the <b>Comments</b> panel and click the <b>Add Comment to Document</b> link, or<br />
+                right-click the selected text passage and select the <b>Add Сomment</b> option from the menu,
+            </li>
+            <li>enter the needed text,</li>
+            <li>click the <b>Add Comment/Add</b> button.</li>
+        </ol>
+        <p>The comment will be seen on the panel on the left. Any other user can answer to the added comment asking questions or reporting on the work he/she has done. For this purpose, click the <b>Add Reply</b> link situated under the comment.</p>
+        <p>The text passage you commented will be highlighted in the document. To view the comment, just click within the passage. If you need to disable this feature, click the <img alt="File icon" src="../images/file.png" /> icon, select the <b>Advanced Settings...</b> option and uncheck the <b>Turn on live commenting option</b> box. In this case the commented passages will be highlighted only if you click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon.</p>
+        <p>You can manage the comments you added in the following way:</p>
+        <ul>
+            <li>edit them by clicking the <img alt="Edit icon" src="../images/editcommenticon.png" /> icon,</li>
+            <li>delete them by clicking the <img alt="Delete icon" src="../images/deletecommenticon.png" /> icon,</li>
+            <li>close the discussion by clicking the <img alt="Resolve icon" src="../images/resolveicon.png" /> icon if the task or problem you stated in your comment was solved, after that the discussion you opened with your comment gets the resolved status. To open it again, click the <img alt="Open again icon" src="../images/resolvedicon.png" /> icon.</li>
+        </ul>
+        <p>New comments added by other users will become visible only after you click the <img alt="Save icon" src="../images/saveupdate.png" /> icon in the left upper corner of the top toolbar.</p>
+        <p>To close the panel with comments, click the <img alt="Comments icon" src="../images/commentsicon.png" /> icon once again.</p>
+        <p class="oOfficeFeatures"><sup id="footnote">*</sup>available for paid versions only</p>
+    </div>
+</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/KeyboardShortcuts.htm

@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Keyboard Shortcuts</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="The keyboard shortcut list used for a faster and easier access to the features of Document Editor using the keyboard." />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Keyboard Shortcuts</h1>
+			<table>
+				<tr>
+					<th colspan="3">Working with Document</th>
+				</tr>
+				<tr>
+					<td class="function">Open 'File' panel</td>
+					<td class="combination">Alt+F</td>
+					<td class="description">Open the <b>File</b> panel to save, download, print the current document, view its info, create a new document or open an existing one, access Document Editor help or advanced settings.</td>
+				</tr>
+				<tr>
+					<td>Open 'Search' panel</td>
+					<td>Ctrl+F</td>
+					<td>Open the <b>Search</b> panel to start searching for a character/word/phrase in the currently edited document.</td>
+				</tr>
+				<tr>
+					<td>Open 'Comments' panel<a class="sup_link oOfficeFeatures" href="../HelpfulHints/KeyboardShortcuts.htm#footnote" onclick="onhyperlinkclick(this)"><sup>*</sup></a></td>
+					<td>Ctrl+Shift+H</td>
+					<td>Open the <b>Comments</b> panel to add your own comment or reply to other users' comments.</td>
+				</tr>
+				<tr>
+					<td>Open comment field<a class="sup_link oOfficeFeatures" href="../HelpfulHints/KeyboardShortcuts.htm#footnote" onclick="onhyperlinkclick(this)"><sup>*</sup></a></td>
+					<td>Alt+H</td>
+					<td>Open a data entry field where you can add the text of your comment.</td>
+				</tr>
+				<tr class="onlineDocumentFeatures">
+					<td>Open 'Chat' panel<a class="sup_link oOfficeFeatures" href="../HelpfulHints/KeyboardShortcuts.htm#footnote" onclick="onhyperlinkclick(this)"><sup>*</sup></a></td>
+					<td>Alt+Q</td>
+					<td>Open the <b>Chat</b> panel and send a message.</td>
+				</tr>
+				<tr>
+					<td>Save document</td>
+					<td>Ctrl+S</td>
+					<td>Save all the changes to the document currently edited with Document Editor.</td>
+				</tr>
+				<tr>
+					<td>Print document</td>
+					<td>Ctrl+P</td>
+					<td>Print the document with one of the available printers or save it to a file.</td>
+				</tr>
+				<tr>
+					<td>Save As (Download As)</td>
+					<td>Ctrl+Shift+S</td>
+					<td>Save the currently edited document to the computer hard disk drive in one of the supported formats: PDF, TXT, DOCX, DOC, ODT, RTF, HTML, EPUB.</td>
+				</tr>
+				<tr>
+					<td>Full screen</td>
+					<td>F11</td>
+					<td>Switch to the full screen view to fit Document Editor into your screen.</td>
+				</tr>
+                <tr>
+                    <td>Help menu</td>
+                    <td>F1</td>
+                    <td>Open Document Editor <b>Help</b> menu.</td>
+                </tr>
+				<tr>
+					<th colspan="3">Navigation</th>
+				</tr>
+				<tr>
+					<td>Jump to the beginning of the line</td>
+					<td>Home</td>
+					<td>Put the cursor to the beginning of the currently edited line.</td>
+				</tr>
+				<tr>
+					<td>Jump to the beginning of the document</td>
+					<td>Ctrl+Home</td>
+					<td>Put the cursor to the very beginning of the currently edited document.</td>
+				</tr>
+				<tr>
+					<td>Jump to the end of the line</td>
+					<td>End</td>
+					<td>Put the cursor to the end of the currently edited line.</td>
+				</tr>
+				<tr>
+					<td>Jump to the end of the document</td>
+					<td>Ctrl+End</td>
+					<td>Put the cursor to the very end of the currently edited document.</td>
+				</tr>
+				<tr>
+					<td>Scroll down</td>
+					<td>PgDn</td>
+					<td>Scroll the document approximately one visible page down.</td>
+				</tr>
+				<tr>
+					<td>Scroll up</td>
+					<td>PgUp</td>
+					<td>Scroll the document approximately one visible page up.</td>
+				</tr>
+				<tr>
+					<td>Next page</td>
+					<td>Alt+PgDn</td>
+					<td>Go to the next page in the currently edited document.</td>
+				</tr>
+				<tr>
+					<td>Previous page</td>
+					<td>Alt+PgUp</td>
+					<td>Go to the previous page in the currently edited document.</td>
+				</tr>
+				<tr>
+					<td>Zoom In</td>
+					<td>Ctrl++</td>
+					<td>Zoom in the currently edited document.</td>
+				</tr>
+				<tr>
+					<td>Zoom Out</td>
+					<td>Ctrl+-</td>
+					<td>Zoom out the currently edited document.</td>
+				</tr>
+				<tr>
+					<th colspan="3">Writing</th>
+				</tr>
+				<tr>
+					<td>End paragraph</td>
+					<td>Enter</td>
+					<td>End the current paragraph and start a new one.</td>
+				</tr>
+				<tr>
+					<td>Add line break</td>
+					<td>Shift+Enter</td>
+					<td>Add a line break without starting a new paragraph.</td>
+				</tr>
+				<tr>
+					<td>Delete</td>
+					<td>Backspace, Delete</td>
+					<td>Delete one character to the left (Backspace) or to the right (Delete) of the cursor.</td>
+				</tr>
+				<tr>
+					<td>Create nonbreaking space</td>
+					<td>Ctrl+Shift+Spacebar</td>
+					<td>Create a space between characters which cannot be used to start a new line.</td>
+				</tr>
+				<tr>
+					<td>Create nonbreaking hyphen</td>
+					<td>Ctrl+Shift+Hyphen</td>
+					<td>Create a hyphen between characters which cannot be used to start a new line.</td>
+				</tr>
+				<tr>
+					<th colspan="3">Undo and Redo</th>
+				</tr>
+				<tr>
+					<td>Undo</td>
+					<td>Ctrl+Z</td>
+					<td>Reverse the latest performed action.</td>
+				</tr>
+				<tr>
+					<td>Redo</td>
+					<td>Ctrl+Y</td>
+					<td>Repeat the latest undone action.</td>
+				</tr>
+				<tr>
+					<th colspan="3">Cut, Copy, and Paste</th>
+				</tr>
+				<tr>
+					<td>Cut</td>
+					<td>Ctrl+X, Shift+Delete</td>
+					<td>Delete the selected text fragment and send it to the computer clipboard memory. The copied text can be later inserted to another place in the same document, into another document, or into some other program.</td>
+				</tr>
+				<tr>
+					<td>Copy</td>
+					<td>Ctrl+C, Ctrl+Insert</td>
+					<td>Send the selected text fragment to the computer clipboard memory. The copied text can be later inserted to another place in the same document, into another document, or into some other program.</td>
+				</tr>
+				<tr>
+					<td>Paste</td>
+					<td>Ctrl+V, Shift+Insert</td>
+					<td>Insert the previously copied text fragment from the computer clipboard memory to the current cursor position. The text can be previously copied from the same document, from another document, or from some other program.</td>
+				</tr>
+				<tr>
+					<td>Insert hyperlink</td>
+					<td>Ctrl+K</td>
+					<td>Insert a hyperlink which can be used to go to a web address.</td>
+				</tr>
+				<tr>
+					<td>Copy style</td>
+					<td>Ctrl+Shift+C</td>
+					<td>Copy the formatting from the selected fragment of the currently edited text. The copied formatting can be later applied to another text fragment in the same document.</td>
+				</tr>
+				<tr>
+					<td>Apply style</td>
+					<td>Ctrl+Shift+V</td>
+					<td>Apply the previously copied formatting to the text in the currently edited document.</td>
+				</tr>
+				<tr>
+					<th colspan="3"><a id="textselection"></a>Text Selection</th>
+				</tr>
+				<tr>
+					<td>Select all</td>
+					<td>Ctrl+A</td>
+					<td>Select all the document text with tables and images.</td>
+				</tr>
+				<tr>
+					<td>Select fragment</td>
+					<td>Shift+Arrow</td>
+					<td>Select the text character by character.</td>
+				</tr>
+				<tr>
+					<td>Select from cursor to beginning of line</td>
+					<td>Shift+Home</td>
+					<td>Select a text fragment from the cursor to the beginning of the current line.</td>
+				</tr>
+				<tr>
+					<td>Select from cursor to end of line</td>
+					<td>Shift+End</td>
+					<td>Select a text fragment from the cursor to the end of the current line.</td>
+				</tr>
+				<tr>
+					<th colspan="3">Text Styling</th>
+				</tr>
+				<tr>
+					<td>Bold</td>
+					<td>Ctrl+B</td>
+					<td>Make the font of the selected text fragment bold giving it more weight.</td>
+				</tr>
+				<tr>
+					<td>Italic</td>
+					<td>Ctrl+I</td>
+					<td>Make the font of the selected text fragment italicized giving it some right side tilt.</td>
+				</tr>
+				<tr>
+					<td>Underline</td>
+					<td>Ctrl+U</td>
+					<td>Make the selected text fragment underlined with the line going under the letters.</td>
+				</tr>
+                <tr>
+                    <td>Strikeout</td>
+                    <td>Ctrl+5</td>
+                    <td>Make the selected text fragment struck out with the line going through the letters.</td>
+                </tr>
+				<tr>
+					<td>Subscript</td>
+					<td>Ctrl+.(dot)</td>
+					<td>Make the selected text fragment smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</td>
+				</tr>
+				<tr>
+					<td>Superscript</td>
+					<td>Ctrl+,(comma)</td>
+					<td>Make the selected text fragment smaller and place it to the upper part of the text line, e.g. as in fractions.</td>
+				</tr>
+				<tr>
+					<td>Heading 1 style</td>
+					<td>Alt+1 (for Windows and Linux browsers)
+                        <br />Alt+Ctrl+1 (for Mac browsers)
+                    </td>
+					<td>Apply the style of the heading 1 to the selected text fragment.</td>
+				</tr>
+				<tr>
+					<td>Heading 2 style</td>
+					<td>Alt+2 (for Windows and Linux browsers)
+                        <br />Alt+Ctrl+2 (for Mac browsers)
+                    </td>
+					<td>Apply the style of the heading 2 to the selected text fragment.</td>
+				</tr>
+				<tr>
+					<td>Heading 3 style</td>
+					<td>Alt+3 (for Windows and Linux browsers)
+                        <br />Alt+Ctrl+3 (for Mac browsers)
+                    </td>
+					<td>Apply the style of the heading 3 to the selected text fragment.</td>
+				</tr>
+				<tr>
+					<td>Bulleted list</td>
+					<td>Ctrl+Shift+L</td>
+					<td>Create an unordered bulleted list from the selected text fragment or start a new one.</td>
+				</tr>
+				<tr>
+					<td>Remove formatting</td>
+					<td>Ctrl+Spacebar</td>
+					<td>Remove formatting from the selected text fragment.</td>
+				</tr>
+				<tr>
+					<td>Increase font</td>
+					<td>Ctrl+]</td>
+					<td>Increase the size of the font for the selected text fragment 1 point.</td>
+				</tr>
+				<tr>
+					<td>Decrease font</td>
+					<td>Ctrl+[</td>
+					<td>Decrease the size of the font for the selected text fragment 1 point.</td>
+				</tr>
+				<tr>
+					<td>Align center/left</td>
+					<td>Ctrl+E</td>
+					<td>Switch a paragraph between centered and left-aligned.</td>
+				</tr>
+				<tr>
+					<td>Align justified/left</td>
+					<td>Ctrl+J, Ctrl+L</td>
+					<td>Switch a paragraph between justified and left-aligned.</td>
+				</tr>
+				<tr>
+					<td>Align right/left</td>
+					<td>Ctrl+R</td>
+					<td>Switch a paragraph between right-aligned and left-aligned.</td>
+				</tr>
+				<!--<tr>
+					<td>Align left</td>
+					<td>Ctrl+L</td>
+					<td>Align left with the text lined up by the left side of the page, the right side remains unaligned. If your text is initially left-aligned</td>
+				</tr>-->
+				<tr>
+					<td>Increase indent</td>
+					<td>Ctrl+M</td>
+					<td>Indent a paragraph from the left incrementally.</td>
+				</tr>
+                <tr>
+                    <td>Decrease indent</td>
+                    <td>Ctrl+Shift+M</td>
+                    <td>Remove a paragraph indent from the left incrementally.</td>
+                </tr>
+                <tr>
+                    <td>Add page number</td>
+                    <td>Ctrl+Shift+P</td>
+                    <td>Add the current page number to the text or to the page footer.</td>
+                </tr>
+				<tr>
+					<th colspan="3">Modifying Objects</th>
+				</tr>
+				<tr>
+					<td>Constrain movement</td>
+					<td>Shift+drag</td>
+					<td>Constrain the movement of the selected object horizontally or vertically.</td>
+				</tr>
+				<tr>
+					<td>Set 15-degree rotation</td>
+					<td>Shift+drag (when rotating)</td>
+					<td>Constrain the rotation angle to 15-degree increments.</td>
+				</tr>
+				<tr>
+					<td>Maintain proportions</td>
+					<td>Shift+drag (when resizing)</td>
+					<td>Maintain the proportions of the selected object when resizing.</td>
+				</tr>
+				<tr>
+					<td>Movement by three-pixel increments</td>
+					<td>Ctrl</td>
+					<td>Hold down the Ctrl key and use the keybord arrows to move the selected object by three pixels at a time.</td>
+				</tr>
+			</table>
+            <p class="oOfficeFeatures"><sup id="footnote">*</sup> - available for paid versions only</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/Navigation.htm

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>View Settings and Navigation Tools</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="The description of view settings and navigation tools such as zoom, previous/next page buttons" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+		<h1>View Settings and Navigation Tools</h1>
+			<p><b>Document Editor</b> offers several tools to help you view and navigate through your document: zoom, previous/next page buttons, page number indicator.</p>
+			<h3>Adjust the View Settings</h3>
+			<p>To adjust default view settings and set the most convenient mode to work with the document, click the <b>View Settings</b> <img alt="View Settings icon" src="../images/viewsettingsicon.png" /> icon at the upper right corner of the top toolbar and select which interface elements you want to be hidden or shown.
+			You can select the following options from the <b>View Settings</b> drop-down list:
+			</p>
+			<ul>
+			<li><b>View Compact Toolbar</b> -  enables a compact toolbar mode that provides access to basic features. To view the default toolbar click this option once again.</li>
+			<li><b>Hide Title Bar</b> - hides the topmost bar where the document name and the <b>Go to Documents</b> option are displayed. To show the hidden <b>Title Bar</b> click this option once again.</li>
+			<li><b>Hide Status Bar</b> - hides the bottommost bar where the <b>Page Number Indicator</b> and <b>Zoom</b> buttons are situated. To show the hidden <b>Status Bar</b> click this option once again.</li>
+			<li><b>Hide Rulers</b> - hides rulers which are used to align text, graphics, tables, and other elements in a document, set up margins, tab stops, and paragraph indents. To show the hidden <b>Rulers</b> click this option once again.</li>
+			</ul>
+			<p>The right sidebar is minimized by default. To expand it, select any object/text passage and click the icon of the currently activated tab on the right (click the icon once again to minimize the right sidebar).</p>
+			<p>When the <b>Comments</b> or <b>Chat</b> panel is opened, the left sidebar width is adjusted by simple drag-and-drop: 
+			move the mouse cursor over the left sidebar border so that it turns into the bidirectional arrow and drag the border to the to the right to extend the sidebar width. To restore its original width move the border to the left.</p>
+			<h3>Use the Navigation Tools</h3>
+			<p>To navigate through your document, use the following tools:</p>
+			<p>The <b>Zoom</b> buttons are situated in the right lower corner and are used to zoom in and out the current document. 
+			To change the currently selected zoom value that is displayed in percent, click it and select one of the available zoom options from the list 
+			or use the <b>Zoom In</b> <img alt="Zoom In button" src="../images/zoomin.png" /> or <b>Zoom Out</b> <img alt="Zoom Out button" src="../images/zoomout.png" /> buttons. 
+			Click the <b>Fit Width</b> <img alt="Fit Width button" src="../images/fitwidth.png" /> icon to fit the document page width to the visible part of the working area.
+			To fit the whole document page to the visible part of the working area, click the <b>Fit Page</b> <img alt="Fit Page button" src="../images/fitpage.png" /> icon.
+			Zoom settings are also available in the <b>View Settings</b> <img alt="View Settings icon" src="../images/viewsettingsicon.png" /> drop-down list that can be useful if you decide to hide the <b>Status Bar</b>.</p>
+			<p>The <b>Previous Page</b> <img alt="Previous Page button" src="../images/previouspage.png" /> and <b>Next Page</b> <img alt="Next Page button" src="../images/nextpage.png" /> buttons are situated in the lower right corner under the scrollbar and used to go to the previous or next page of the current document.</p>
+			<p>The <b>Page Number Indicator</b> shows the current page as a part of all the pages in the current document (page 'n' of 'nn'). 
+			Click this caption to open the window where you can enter the page number and quickly go to it.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/Review.htm

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Document Review</title>
+    <meta charset="utf-8" />
+    <meta name="description" content="Tips on document review option" />
+    <link type="text/css" rel="stylesheet" href="../editor.css" />
+</head>
+<body>
+    <div class="mainpart">
+        <h1>Document Review</h1>
+        <p>When somebody shares a file with you that has review permissions, you need to use the document <b>Review</b> feature.</p>
+        <p>If you are the reviewer, then you can use the <b>Review</b> option to review the document, change the sentences, phrases and other page elements, correct spelling, and do other things to the document without actually editing it. All your changes will be recorded and shown to the person who sent the document to you.</p>
+        <p>If you are the person who sends the file for the review, you will need to display all the changes which were made to it, view and either accept or reject them.</p>
+        <p>In either case the <b>Review</b> is enabled with the help of the <img alt="Review button" src="../images/review.png" /> button in the right lower corner at the status bar. You can click the <b>Review</b> button to enable both <b>Track Changes</b> and <b>Changes Panel</b> options, or use the arrow next to it to select which options you want to be enabled.</p>
+        <p>Once selected the <b>Changes Panel</b> is displayed:</p>
+        <p><img alt="Review panel" src="../images/review_panel.png" /></p>
+        <p class="note"><b>Note</b>: it is not necessary for the reviewer to display the <b>Changes Panel</b>, the <b>Track Changes</b> option is enabled by default and cannot be disabled when the document is shared with review only access rights.</p>
+        <p>To accept the changes use the appropriate <b>Changes Panel</b> menu option (<b>Accept</b>) or the <b>Accept</b> <img alt="Accept button" src="../images/review_accept.png" /> button of the change notification.</p>
+        <p class="note"><b>Note</b>: if you review the document please do not use <b>Accept</b> as your changes will not be visible to anyone else.</p>
+        <p>Use the <img alt="To Previous Change button" src="../images/review_previous.png" /> <b>To Previous Change</b> and the <img alt="To Next Change button" src="../images/review_next.png" /> <b>To Next Change</b> buttons to navigate among the changes or use the the <b>Accept Current Change</b> menu option of the <b>Changes Panel</b> to progress from one change to another. To quickly accept all the changes, the <b>Accept All Changes</b> menu option of the <b>Changes Panel</b> can be used.</p>
+        <p>To reject the current change click the <img alt="Reject button" src="../images/review_reject.png" /> <b>Reject</b> button or use the <b>Reject Current Change</b> menu option of the <b>Changes Panel</b> and move on to the next available change. To quickly reject all the changes, the <b>Reject All Changes</b> menu option of the <b>Changes Panel</b> can be used.</p>
+    </div>
+</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/Search.htm

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Search and Replace Function</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="The description of the document search and replace function in Document Editor" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+		<h1>Search and Replace Function</h1>
+			<p>To search for the needed characters, words or phrases used in the currently edited document, 
+			click the <img alt="Search icon" src="../images/searchicon.png" /> icon situated at the left sidebar. </p>
+			<p>The <b>Find and Replace</b> window will open:</p>
+            <p><img alt="Find and Replace Window" src="../images/search_window.png" /></p>
+			<ol>
+			<li>Type in your inquiry into the corresponding data entry field.</li>
+			<li>Specify search parameters by clicking the <img alt="Search options icon" src="../images/search_options.png" /> icon and checking the necessary options:
+			<ul>
+			<li><b>Case sensitive</b> - is used to find only the occurrences typed in the same case as your inquiry (e.g. if your inquiry is 'Editor' and this option is selected, such words as 'editor' or 'EDITOR' etc. will not be found). To disable this option click it once again.</li>
+			<li><b>Highlight results</b> - is used to highlight all found occurrences at once. To disable this option and remove the highlight click the option once again.</li>
+			</ul>
+			</li>			
+			<li>Click one of the <b>arrow buttons</b> at the bottom right corner of the window. 
+			The search will be performed either towards the beginning of the document (if you click the <img alt="Left arrow button" src="../images/searchupbutton.png" /> button) or towards the end of the document (if you click the <img alt="Right arrow button" src="../images/searchdownbutton.png" /> button) from the current position.
+			<p class="note"><b>Note</b>: when the <b>Highlight results</b> option is enabled, use these buttons to navigate through the highlighted results.</p>
+			</li>
+			</ol>
+			<p>The first occurrence of the required characters in the selected direction will be highlighted on the page. If it is not the word you are looking for, click the selected button again to find the next occurrence of the characters you entered.</p> 
+			<p><b>To replace</b> one or more occurrences of the found characters click the <b>Replace</b> link below the data entry field. The <b>Find and Replace</b> window will change:</p>
+            <p><img alt="Find and Replace Window" src="../images/search_replace_window.png" /></p>
+			<ol>
+			<li>Type in the replacement text into the bottom data entry field.</li>			
+			<li>Click the <b>Replace</b> button to replace the currently selected occurrence or the <b>Replace All</b> button to replace all the found occurrences.</li>
+			</ol>
+            <p>To hide the replace field, click the <b>Hide Replace</b> link.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/SpellChecking.htm

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Spell-checking</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Spell check the text in your language while editing a document" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+		<h1>Spell-checking</h1>
+			<p><b>Document Editor</b> allows you to check the spelling of your text in a certain language and correct mistakes while editing.</p>
+			<p>First of all, <b>choose a language</b> for your document. Click the <img alt="Set Document Language icon" src="../images/document_language.png" /> icon at the right part of the <b>Status bar</b>. In the window that appears, select the necessary language and click <b>OK</b>. The selected language will be applied to the whole document. </p>
+			<p><img alt="Set Document Language window" src="../images/document_language_window.png" /></p>
+			<p>To <b>choose a different language</b> for any piece of text within the document, select the necessary text passage with the mouse and use the <img alt="Spell-checking - Text Language selector" src="../images/spellchecking_language.png" /> menu at the <b>Status bar</b>.</p>
+			<p>Incorrectly spelled words will be underlined by a red line.</p>
+			<p>Right click on the necessary word to activate the menu and:</p>
+			<ul>
+			<li>choose one of the suggested similar words spelled correctly to replace the misspelled word with the suggested one. If too many variants are found, the <b>More variants...</b> option appears in the menu;</li>
+			<li>use the <b>Ignore</b> option to skip just that word and remove underlining or <b>Ignore all</b> to skip all the identical words repeated in the text;</li>
+			<li>select a different language for this word.</li>
+			</ul>  
+            <p><img alt="Spell-checking" src="../images/spellchecking.png" /></p>
+			<p>To <b>turn off</b> the spell checking option,</p>
+			<ol>
+				<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
+				<li>select the <b>Advanced Settings...</b> option,</li>
+				<li>uncheck the <b>Turn on spell checking option</b> box,</li>
+                <li>click the <b>Apply</b> button.</li>
+			</ol>
+            <p>You can alternatively click the <img alt="Spell Checking activated icon" src="../images/spellcheckactivated.png" /> icon at the right part of the <b>Status bar</b> - after that the icon will look like this <img alt="Spell Checking deactivated icon" src="../images/spellcheckdeactivated.png" />.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/HelpfulHints/SupportedFormats.htm

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Supported Formats of Electronic Documents</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="The list of document formats supported by Document Editor" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+		<h1>Supported Formats of Electronic Documents</h1>
+			<p>Electronic documents represent one of the most commonly used computer files. 
+			Thanks to the computer network highly developed nowadays, it's possible and more convenient to distribute electronic documents than printed ones. 
+			Due to the variety of devices used for document presentation, there are a lot of proprietary and open file formats. 
+			<b>Document Editor</b> handles the most popular of them.</p>
+			<table>
+				<tr>
+					<td><b>Formats</b></td>
+					<td><b>Description</b></td>
+					<td>View</td>
+					<td>Edit</td>
+					<td>Download</td>
+				</tr>
+				<tr>
+					<td>DOC</td>
+					<td>Filename extension for word processing documents created with Microsoft Word</td>
+					<td>+</td>
+					<td>+</td>
+					<td></td>
+				</tr>
+				<tr>
+					<td>DOCX</td>
+					<td>Office Open XML<br />Zipped, XML-based file format developed by Microsoft for representing spreadsheets, charts, presentations, and word processing documents</td>
+					<td>+</td>
+					<td>+</td>
+					<td>+</td>
+				</tr>
+				<tr>
+					<td>ODT</td>
+					<td>Word processing file format of OpenDocument, an open standard for electronic documents</td>
+					<td>+</td>
+					<td>+</td>
+					<td>+</td>
+				</tr>
+				<tr>
+					<td>RTF</td>
+					<td>Rich Text Format<br />Document file format developed by Microsoft for cross-platform document interchange</td>
+					<td>+</td>
+					<td>+</td>
+					<td></td>
+				</tr>
+				<tr>
+					<td>TXT</td>
+					<td>Filename extension for text files usually containing very little formatting</td>
+					<td>+</td>
+					<td>+</td>
+					<td>+</td>
+				</tr>
+				<tr>
+					<td>PDF</td>
+					<td>Portable Document Format<br />File format used to represent documents in a manner independent of application software, hardware, and operating systems</td>
+					<td>+</td>
+					<td></td>
+					<td>+</td>
+				</tr>
+				<tr>
+					<td>HTML</td>
+					<td>HyperText Markup Language<br />The main markup language for web pages</td>
+					<td></td>
+					<td></td>
+					<td>+</td>
+				</tr>
+				<tr>
+					<td>EPUB</td>
+					<td>Electronic Publication<br />Free and open e-book standard created by the International Digital Publishing Forum</td>
+					<td>+</td>
+					<td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td>XPS</td>
+					<td>Open XML Paper Specification<br />Open royalty-free fixed-layout document format developed by Microsoft</td>
+					<td>+</td>
+					<td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td>DjVu</td>
+					<td>File format designed primarily to store scanned documents, especially those containing a combination of text, line drawings, and photographs</td>
+					<td>+</td>
+					<td></td>
+					<td></td>
+				</tr>
+				<!--<tr>
+					<td>PPTX</td>
+					<td>Office Open XML Presentation<br />Zipped, XML-based file format developed by Microsoft for representing spreadsheets, charts, presentations, and word processing documents</td>
+					<td>+</td>
+					<td></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td>PPT</td>
+					<td>File format used by Microsoft PowerPoint</td>
+					<td>+</td>
+					<td></td>
+					<td></td>
+				</tr>-->
+			</table>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/AddBorders.htm

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Add borders</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Add borders to your document selecting their style" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Add borders</h1>
+			<p>To add borders to a paragraph, page, or the whole document,</p>
+			<ol>
+				<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
+				<li>click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar,</li>
+				<li>switch to the <b>Borders &amp; Fill</b> tab in the opened <b>Paragraph - Advanced Settings</b> window,</li>
+				<li>set the needed value for <b>Border Size</b> and select a <b>Border Color</b>,</li>
+				<li>click within the available diagram or use buttons to select borders and apply the chosen style to them,</li>
+				<li>click the <b>OK</b> button.</li>
+			</ol>
+			<p><img alt="Paragraph Advanced Settings - Borders &amp; Fill" src="../images/paradvsettings_borders.png" /></p>
+			<p>After you add borders, you can also set <b>paddings</b> i.e. distances between the <b>right</b>, <b>left</b>, <b>top</b> and <b>bottom</b> borders and the paragraph text within them.</p>
+			<p>To set the necessary values, switch to the <b>Paddings</b> tab of the <b>Paragraph - Advanced Settings</b> window:</p>
+			<p><img alt="Paragraph Advanced Settings - Paddings" src="../images/paradvsettings_margins.png" /></p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/AddHyperlinks.htm

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Add hyperlinks</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Add hyperlinks to a word or text fragment leading to an external website" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Add hyperlinks</h1>
+			<p>To add a hyperlink,</p>
+			<ol>
+				<li>place the cursor to a position where a hyperlink will be added,</li>
+				<li>click the <b>Add Hyperlink</b> <img alt="Add Hyperlink icon" src="../images/addhyperlink.png" /> icon at the top toolbar,</li>
+				<li>after that the <b>Hyperlink Settings</b> window will appear where you can specify the hyperlink parameters:
+				<ul>
+					<li><b>Link to</b> - enter a URL in the format <i>http://www.example.com</i>.</li>
+					<li><b>Display</b> - enter a text that will get clickable and lead to the web address specified in the upper field.</li>
+					<li><b>ScreenTip text</b> - enter a text that will become visible in a small pop-up window that provides a brief note or label pertaining to the hyperlink being pointed to.</li>
+				</ul>
+				<p><img alt="Hyperlink Settings window" src="../images/hyperlinkwindow.png" /></p>
+				</li>
+				<li>Click the <b>OK</b> button.</li>
+			</ol>
+			<p>To add a hyperlink, you can also click with the right mouse button at a position where a hyperlink will be added and select the <b>Hyperlink</b> option in the menu that opens the window displayed above.</p>
+			<p class="note"><b>Note</b>: it's also possible to select a caracter, word, word combination, text passage with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a> and
+			click the <b>Add Hyperlink</b> <img alt="Add Hyperlink icon" src="../images/addhyperlink.png" /> icon at the top toolbar or right-click the selection and choose the <b>Hyperlink</b> option in the menu. 
+			After that the window displayed above will open with the <b>Display</b> field filled with the text fragment you selected.</p>
+			<p>By hovering the cursor over the added hyperlink, the ScreenTip will appear containing the text you specified. 
+			You can follow the link by pressing the <b>CTRL</b> key and clicking the link in your document.</p>
+			<p>To edit or delete the added hyperlink, click it with the right mouse button, select the <b>Hyperlink</b> option and then the action you want to perform - <b>Edit Hyperlink</b> or <b>Remove Hyperlink</b>.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/AlignText.htm

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Align your text in a paragraph</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Everything that pertains to the text alignment in a paragraph: aligning left, right, justified, center" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Align your text in a paragraph</h1>
+			<p>The text is commonly aligned in four ways: left, right, center or justified. To do that,</p>
+			<ol>
+				<li>place the cursor to the position where you want the alignment to be applied (this can be a new line or already entered text),</li>
+				<li>select the alignment type you would like to apply:
+					<ul>
+						<li><b>Left</b> alignment with the text lined up by the left side of the page (the right side remains unaligned) is done with the <b>Align Left</b> <img alt="Align Left icon" src="../images/alignleft.png" /> icon situated at the top toolbar.</li>
+						<li><b>Center</b> alignment with the text lined up by the center of the page (the right and the left sides remains unaligned) is done with the <b>Align Center</b> <img alt="Align Center icon" src="../images/aligncenter.png" /> icon situated at the top toolbar.</li>
+						<li><b>Right</b> alignment with the text lined up by the right side of the page (the left side remains unaligned) is done with the <b>Align Right</b> <img alt="Align Right icon" src="../images/alignright.png" /> icon situated at the top toolbar.</li>
+						<li><b>Justify</b> alignment with the text lined up by both the left and the right sides of the page (additional spacing is added where necessary to keep the alignment) is done with the <b>Justify</b> <img alt="Justify icon" src="../images/justify.png" /> icon situated at the top toolbar.</li>
+					</ul>
+				</li>
+			</ol>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/BackgroundColor.htm

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Select background color for a paragraph</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Learn how to select background color for a paragraph" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Select background color for a paragraph</h1>
+			<p>Background color is applied to the whole paragraph and completely fills all the paragraph space from the left page margin to the right page margin.</p>
+			<p>To apply a background color to a certain paragraph or change the current one,</p>
+			<ol>
+				<li>select a color scheme for your document from the available ones clicking the <b>Change Color Scheme</b> <img alt="Change Color Scheme" src="../images/changecolorscheme.png" /> icon at the top toolbar</li>
+				<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or the whole text using the <b>Ctrl+A</b> key combination</li>
+				<li>open the color palettes window. You can access it in one of the following ways: 
+				<ul>
+				<li>click the downward arrow next to the <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> icon at the top toolbar, or</li>
+				<li>click the color field next to the <b>Background Color</b> caption at the right sidebar, or</li>
+				<li>click the 'Show advanced settings' link at the right sidebar or select the 'Paragraph Advanced Settings' option in the right-click menu, then switch to the 'Borders &amp; Fill' tab within the 'Paragraph - Advanced Settings' window and click the color field next to the <b>Background Color</b> caption.</li>
+				</ul>
+				</li>
+				<li>select any color in the available <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">palettes</a></li>
+			</ol>
+			<p>After you select the necessary color using the <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> icon, you'll be able to apply this color to any selected paragraph just clicking the <img alt="Selected Paragraph Background Color" src="../images/backgroundcolor_selected.png" /> icon (it displays the selected color), without the necessity to choose this color on the palette again. If you use the <b>Background Color</b> option at the right sidebar or within the 'Paragraph - Advanced Settings' window, remember that the selected color is not retained for quick access. (These options can be useful if you wish to select a different background color for a specific paragraph, while you are also using some general color selected with the help of the <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> icon).</p>
+			<hr />
+			<p>To clear the background color of a certain paragraph,</p>
+			<ol>
+				<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or the whole text using the <b>Ctrl+A</b> key combination</li>
+				<li>open the color palettes window clicking the color field next to the <b>Background Color</b> caption at the right sidebar</li>
+				<li>select the <img alt="No Fill" src="../images/nofill.png" /> icon.</li>
+			</ol>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/ChangeColorScheme.htm

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Change color scheme</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Learn how to change color scheme for a document" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Change color scheme</h1>
+			<p>Color schemes are applied to the whole document. They are used to quickly change the appearance of your document, since they are define the <b>Theme Colors</b> palette for document elements (<a href="../UsageInstructions/FontTypeSizeColor.htm" onclick="onhyperlinkclick(this)">font</a>, <a href="../UsageInstructions/BackgroundColor.htm" onclick="onhyperlinkclick(this)">background</a>, <a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">tables</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">autoshapes</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">charts</a>). If you've applied some <b>Theme Colors</b> to document elements and then selected a different <b>Color Scheme</b>, the applied colors in your document change correspondingly.</p>
+			<p>To change a color scheme, click the downward arrow next to the <b>Change Color Scheme</b> <img alt="Change Color Scheme" src="../images/changecolorscheme.png" /> icon at the right part of the top toolbar and select the necessary color scheme from the available ones: <b>Office</b>, <b>Grayscale</b>, <b>Apex</b>, <b>Aspect</b>, <b>Civic</b>, <b>Concourse</b>, <b>Equity</b>, <b>Flow</b>, <b>Foundry</b>, <b>Median</b>, <b>Metro</b>, <b>Module</b>, <b>Odulent</b>, <b>Oriel</b>, <b>Origin</b>, <b>Paper</b>, <b>Solstice</b>, <b>Technic</b>, <b>Trek</b>, <b>Urban</b>, <b>Verve</b>.</p>
+			<p><img alt="Color Schemes" src="../images/colorscheme.png" /></p>
+			<p>Once you select the preferred color scheme, you can select colors in a color palettes window that corresponds to the document element you want to apply the color to. For most of the document elements, the color palettes window can be accessed by clicking the colored box at the right sidebar when the necessary element is selected. For the font, this window can be opened using the downward arrow next to the <b>Font Color</b> <img alt="Font Color" src="../images/fontcolor.png" /> icon at the top toolbar. The following palettes are available:</p>
+			<p><img alt="Palette" src="../images/palette.png" /></p>
+					<ul>
+						<li><b>Theme Colors</b> - the colors that correspond to the selected color scheme of the document.</li>
+						<li><b>Standard Colors</b> - the default colors set. The selected color scheme does not affect them.</li>
+						<li><b>Custom Color</b> - click this caption if there is no needed color in the available palettes. Select the necessary colors range moving the vertical color slider and set the specific color dragging the color picker within the large square color field. Once you select a color with the color picker, the appropriate RGB and sRGB color values will be displayed in the fields on the right. You can also specify a color on the base of the RGB color model entering the necessary numeric values into the <b>R</b>, <b>G</b>, <b>B</b> (red, green, blue) fields or enter the sRGB hexadecimal code into the field marked with the <b>#</b> sign. The selected color appears in the <b>New</b> preview box. If the object was previously filled with any custom color, this color is displayed in the <b>Current</b> box so you can compare the original and modified colors. When the color is specified, click the <b>Add</b> button:
+						<p><img alt="Palette - Custom Color" src="../images/palette_custom.png" /></p>
+						<p>The custom color will be applied to the selected element and added to the <b>Custom color</b> palette.</p>
+						</li>
+					</ul>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/CopyClearFormatting.htm

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Copy/clear text formatting</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Copy/clear text formatting within your document" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Copy/clear text formatting</h1>
+			<p>To copy a certain text formatting,</p>
+			<ol>
+				<li>select the text passage which formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
+				<li>click the <b>Copy Style</b> <img alt="Copy Style" src="../images/copystyle.png" /> icon at the top toolbar (the mouse pointer will look like this <img alt="Mouse pointer while pasting style" src="../images/paste_style.png" />),</li>
+				<li>select the text passage you want to apply the same formatting to.</li>
+			</ol>
+            <p>To apply the copied formatting to multiple text passages,</p>
+            <ol>
+                <li>select the text passage which formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
+                <li>double-click the <b>Copy Style</b> <img alt="Copy Style" src="../images/copystyle.png" /> icon at the top toolbar (the mouse pointer will look like this <img alt="Mouse pointer while pasting style" src="../images/paste_style.png" /> and the <b>Copy Style</b> icon will remain selected: <img alt="Multiple copying style" src="../images/copystyle_selected.png" />),</li>
+                <li>select the necessary text passages one by one to apply the same formatting to each of them,</li>
+                <li>to exit this mode, click the <b>Copy Style</b> <img alt="Multiple copying style" src="../images/copystyle_selected.png" /> icon once again or press the <b>Esc</b> key on the keyboard.</li>
+            </ol>
+			<p>To quickly remove the applied formatting from your text,</p>
+			<ol>
+				<li>select the text passage which formatting you want to remove,</li>
+				<li>click the <b>Clear Style</b> <img alt="Clear Style" src="../images/clearstyle.png" /> icon at the top toolbar.</li>
+			</ol>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/CopyPasteUndoRedo.htm

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Copy/paste text passages, undo/redo your actions</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Perform the basic operations with the document text: copy, paste, undo, redo" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Copy/paste text passages, undo/redo your actions</h1>
+			<p>To cut, copy and paste text passages and inserted objects (autoshapes, images, charts) within the current document use the corresponding options from the right-click menu or icons at the top toolbar:</p>
+			<ul>
+                <li><b>Cut</b> – select a text fragment or an object and use the <b>Cut</b> option from the right-click menu to delete the selection and send it to the computer clipboard memory. The cut data can be later inserted to another place in the same document.</li>
+				<li><b>Copy</b> – select a text fragment or an object and use the <b>Copy</b> option from the right-click menu, or the <b>Copy</b> <img alt="Copy icon" src="../images/copy.png" /> icon at the top toolbar to copy the selection to the computer clipboard memory. The copied data can be later inserted to another place in the same document.</li>
+				<li><b>Paste</b> – find the place in your document where you need to paste the previously copied text fragment/object and use the <b>Paste</b> option from the right-click menu, or the <b>Paste</b> <img alt="Paste icon" src="../images/paste.png" /> icon at the top toolbar.
+				The text/object will be inserted at the current cursor position. The data can be previously copied from the same document.</li>			
+			</ul>
+            <p>To copy or paste data from/into another document or some other program use the following key combinations:</p>
+            <ul>
+                <li><b>Ctrl+X</b> key combination for cutting;</li>
+                <li><b>Ctrl+C</b> key combination for copying;</li>
+                <li><b>Ctrl+V</b> key combination for pasting.</li>
+            </ul>
+			<p class="note"><b>Note</b>: instead of cutting and pasting text within the same document you can just select the necessary text passage and drag and drop it to the necessary position.</p>
+			<p>To perform the undo/redo operations, use the corresponding icons at the top toolbar or keyboard shortcuts:</p>
+            <ul>
+                <li><b>Undo</b> – use the <b>Undo</b> <img alt="Undo icon" src="../images/undo.png" /> icon at the top toolbar or the <b>Ctrl+Z</b> key combination to undo the last operation you performed.</li>
+                <li><b>Redo</b> – use the <b>Redo</b> <img alt="Redo icon" src="../images/redo.png" /> icon at the top toolbar or the <b>Ctrl+Y</b> key combination to redo the last undone operation.</li>
+            </ul>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/CreateLists.htm

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Create lists</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Create bulleted and numbered lists in the document changing the lists outline" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Create lists</h1>
+			<p>To create a list in your document,</p>
+			<ol>
+				<li>place the cursor to the position where a list will be started (this can be a new line or the already entered text),</li>
+				<li>select the list type you would like to start:
+					<ul>
+						<li><b>Unordered list</b> with markers is created using the <b>Bullets</b> <img alt="Unordered List icon" src="../images/bullets.png" /> icon situated at the top toolbar</li>
+						<li><b>Ordered list</b> with digits or letters is created using the <b>Numbering</b> <img alt="Ordered List icon" src="../images/numbering.png" /> icon situated at the top toolbar
+							<p class="note"><b>Note</b>: click the downward arrow next to the <b>Bullets</b> or <b>Numbering</b> icon to select how the list is going to look like.</p>
+						</li>
+					</ul>
+				</li>
+				<li>now each time you press the <b>Enter</b> key at the end of the line a new ordered or unordered list item will appear. To stop that, press the <b>Backspace</b> key and continue with the common text paragraph.</li>
+			</ol>
+			<p>You can also change the text indentation in the lists and their nesting using the <b>Outline</b> <img alt="Outline icon" src="../images/outline.png" />, <b>Decrease Indent</b> <img alt="Decrease Indent icon" src="../images/decreaseindent.png" />, and <b>Increase Indent</b> <img alt="Increase Indent icon" src="../images/increaseindent.png" /> icons at the top toolbar.</p>
+			<p class="note"><b>Note</b>: the additional indentation and spacing parameters can be changed at the right sidebar and in the advanced settings window. To learn more about it, read the <a href="ParagraphIndents.htm" onclick="onhyperlinkclick(this)">Change paragraph indents</a> and <a href="LineSpacing.htm" onclick="onhyperlinkclick(this)">Set paragraph line spacing</a> section.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/DecorationStyles.htm

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Apply font decoration styles</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Apply font decoration styles: increment/decrement values, bold, italic, underline, strikeout, superscript/subscript" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Apply font decoration styles</h1>
+			<p>You can apply various font decoration styles using the corresponding icons situated at the top toolbar.</p>
+			<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a> and apply the formatting.</p>
+			<table>
+				<tr>
+					<td>Bold</td>
+					<td><img alt="Bold" src="../images/bold.png" /></td>
+					<td>Is used to make the font bold giving it more weight.</td>
+				</tr>
+				<tr>
+					<td>Italic</td>
+					<td><img alt="Italic" src="../images/italic.png" /></td>
+					<td>Is used to make the font italicized giving it some right side tilt.</td>
+				</tr>
+				<tr>
+					<td>Underline</td>
+					<td><img alt="Underline" src="../images/underline.png" /></td>
+					<td>Is used to make the text underlined with the line going under the letters.</td>
+				</tr>
+				<tr>
+					<td>Strikeout</td>
+					<td><img alt="Strikeout" src="../images/strike.png" /></td>
+					<td>Is used to make the text struck out with the line going through the letters.</td>
+				</tr>
+				<tr>
+					<td>Superscript</td>
+					<td><img alt="Superscript" src="../images/sup.png" /></td>
+					<td>Is used to make the text smaller and place it to the upper part of the text line, e.g. as in fractions.</td>
+				</tr>
+				<tr>
+					<td>Subscript</td>
+					<td><img alt="Subscript" src="../images/sub.png" /></td>
+					<td>Is used to make the text smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</td>
+				</tr>
+			</table>
+			<p>To access advanced font settings, click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar. Then the <b>Paragraph - Advanced Settings</b> window will open where you need to switch to the <b>Font</b> tab.</p>
+			<p>Here you can use the following font decoration styles and settings:</p>
+			<ul>
+				<li><b>Strikethrough</b> is used to make the text struck out with the line going through the letters.</li>
+				<li><b>Double strikethrough</b> is used to make the text struck out with the double line going through the letters.</li>
+				<li><b>Superscript</b> is used to make the text smaller and place it to the upper part of the text line, e.g. as in fractions.</li>
+				<li><b>Subscript</b> is used to make the text smaller and place it to the lower part of the text line, e.g. as in chemical formulas.</li>
+				<li><b>Small caps</b> is used to make all letters lower case.</li>
+				<li><b>All caps</b> is used to make all letters upper case.</li>
+				<li><b>Spacing</b> is used to set the space between the characters.</li>
+				<li><b>Position</b> is used to set the characters position in the line.</li>
+			</ul>
+			<p><img alt="Paragraph Advanced Settings - Font" src="../images/paradvsettings_font.png" /></p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/FontTypeSizeColor.htm

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Set font type, size, and color</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Change the following text formatting parameters: font type, size, and color" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Set font type, size, and color</h1>
+			<p>You can select the font type, its size and color using the corresponding icons situated at the top toolbar.</p>
+			<p class="note"><b>Note</b>: in case you want to apply the formatting to the text already present in the document, select it with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a> and apply the formatting.</p>
+			<table>
+				<tr>
+					<td>Font Name</td>
+					<td><img alt="Font Name" src="../images/fontfamily.png" /></td>
+					<td>Is used to select one of the fonts from the list of the available ones.</td>
+				</tr>
+				<tr>
+					<td>Font Size</td>
+					<td><img alt="Font Size" src="../images/fontsize.png" /></td>
+					<td>Is used to select among the preset font size values from the dropdown list, or can be entered manually to the font size field.</td>
+				</tr>
+                <tr>
+                    <td>Increment font size</td>
+                    <td><img alt="Increment font size" src="../images/larger.png" /></td>
+                    <td>Is used to change the font size making it larger one point each time the button is pressed.</td>
+                </tr>
+                <tr>
+                    <td>Decrement font size</td>
+                    <td><img alt="Decrement font size" src="../images/smaller.png" /></td>
+                    <td>Is used to change the font size making it smaller one point each time the button is pressed.</td>
+                </tr>
+				<tr>
+					<td>Highlight Color</td>
+					<td><img alt="Highlight Color" src="../images/highlightcolor.png" /></td>
+					<td>Is used to mark separate sentences, phrases, words, or even characters by adding a color band that imitates highlighter pen effect around the text. You can select the necessary part of the text and then click the downward arrow next to the icon to select a color on the palette (this color set does not depend on the selected <b>Color Scheme</b> and includes 16 colors) - the color will be applied to the text selection. Alternatively, you can first choose a highlight color and then start selecting the text with the mouse - the mouse pointer will look like this <img alt="Mouse pointer while highlighting" src="../images/highlight_color_mouse_pointer.png" /> and you'll be able to highlight several different parts of your text sequentially. To stop highlighting just click the icon once again. To clear the highlight color, choose the <b>No Fill</b> option. <b>Highlight Color</b> is different from the <a href="../UsageInstructions/BackgroundColor.htm" onclick="onhyperlinkclick(this)"><b>Background Color</b></a> <img alt="Paragraph Background Color Icon" src="../images/backgroundcolor.png" /> as the latter is applied to the whole paragraph and completely fills all the paragraph space from the left page margin to the right page margin.</td>
+				</tr>
+				<tr>
+					<td>Font Color</td>
+					<td><img alt="Font Color" src="../images/fontcolor.png" /></td>
+					<td>Is used to change the color of the letters/characters in the text. By default, the automatic font color is set in a new blank document. It is displayed as a black font on the white background. If you change the background color into black, the font color will automatically change into white to keep the text clearly visible. To choose a different color, click the downward arrow next to the icon and select a color from the available palettes (the colors on the <b>Theme Colors</b> palette depend on the selected <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">color scheme</a>). After you change the default font color, you can use the <b>Automatic</b> option in the color palettes window to quickly restore the automatic color for the selected text passage.</td>
+				</tr>
+			</table>
+			<p class="note"><b>Note</b>: to learn more about the work with color palettes, please refer to <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">this page</a>.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/FormattingPresets.htm

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Apply formatting styles</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Apply formatting styles: normal, heading, quote, list, etc." />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Apply formatting styles</h1>
+            <p>Each formatting style is a set of predefined formatting options: (font size, color, line spacing, alignment etc.). The styles allow you to quickly format different parts of the document (headings, subheadings, lists, normal text, quotes) instead of applying several formatting options individually each time. This also ensures a consistent appearance throughout the entire document. A style can be applied to the whole paragraph only.</p>
+			<h3>Use default styles</h3>
+            <p>To apply one of the available text formatting styles,</p>
+			<ol>
+				<li>place the cursor within the paragraph you need, or select several paragraphs you want to apply one of the formatting styles to,</li>
+				<li>select the needed style from the style gallery on the right at the top toolbar.</li>
+			</ol>
+			<p>The following formatting styles are available: normal, no spacing, heading 1-9, title, subtitle, quote, intense quote, list paragraph.</p>
+			<p><img alt="Formatting styles" src="../images/formattingpresets.png" /></p>
+            <h3>Edit existing styles and create new ones</h3>
+            <p><b>To change an existing style:</b></p>
+            <ol>
+                <li>Apply the necessary style to a paragraph.</li>
+                <li>Select the paragraph text and change all the formatting parameters you need.</li>
+                <li>Save the changes made:
+                <ul>
+                    <li>right-click the edited text, select the <b>Formatting as Style</b> option and then choose the <b>Update 'StyleName' Style</b> option ('StyleName' corresponds to the style you've applied at the step 1),</li>
+                    <li>or select the edited text passage with the mouse, drop-down the style gallery, right-click the style you want to change and select the <b>Update from selection</b> option.</li>
+                </ul>
+                </li>
+            </ol>
+            <p>Once the style is modified, all the paragraphs within the document formatted using this style will change their appearance correspondingly.</p>
+            <p><b>To create a completely new style:</b></p>
+            <ol>
+                <li>Format a text passage as you need.</li>
+                <li>Select an appropriate way to save the style:
+                    <ul>
+                        <li>right-click the edited text, select the <b>Formatting as Style</b> option and then choose the <b>Create new Style</b> option,</li>
+                        <li>or select the edited text passage with the mouse, drop-down the style gallery and click the <b>New style from selection</b> option.</li>
+                    </ul>
+                </li>
+                <li>Set the new style parameters in the <b>Create New Style</b> window that opens:
+                <p><img alt="Create New Style window" src="../images/createnewstylewindow.png" /></p>
+                <ul>
+                    <li>Specify the new style name in the text entry field.</li>
+                    <li>Select the desired style for the subsequent paragraph from the <b>Next paragraph style</b> list.</li>
+                    <li>Click the <b>OK</b> button.</li>
+                </ul>
+                </li>
+            </ol>
+            <p>The created style will be added to the style gallery.</p>
+            <p><b>Manage your custom styles:</b></p>
+            <ul>
+                <li>To restore the default settings of a certain style you've changed, right-click the style you want to restore and select the <b>Restore to default</b> option.</li>
+                <li>To restore the default settings of all the styles you've changed, right-click any default style in the style gallery and select the <b>Restore all to default styles</b> option.
+                    <p><img alt="Edited style menu" src="../images/editedstylemenu.png" /></p>
+                </li>
+                <li>To delete one of the new styles you've created, right-click the style you want to delete and select the <b>Delete style</b> option.</li>
+                <li>To delete all the new styles you've created, right-click any new style you've created and select the <b>Delete all custom styles</b> option.
+                    <p><img alt="Custom style menu" src="../images/customstylemenu.png" /></p>
+                </li>
+            </ul>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertAutoshapes.htm

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert autoshapes</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Add an autoshape to your document and adjust its properties." />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert autoshapes</h1>
+            <h3>Insert an autoshape</h3>
+			<p>To add an autoshape to your document,</p>
+			<ol>
+				<li>click the <b>Insert Autoshape</b> <img alt="Insert Autoshape icon" src="../images/insertautoshape.png" /> icon at the top toolbar,</li>
+				<li>select one of the available autoshape groups: basic shapes, figured arrows, math, charts, stars &amp; ribbons, callouts, buttons, rectangles, lines,</li>
+				<li>click the necessary autoshape within the selected group,</li>
+				<li>place the mouse cursor where you want the shape to be put,</li>
+				<li>once the autoshape is added you can change its size, position and properties.
+				<p class="note"><b>Note</b>: to add a caption within the autoshape make sure the shape is selected on the page and start typing your text. The text you add in this way becomes a part of the autoshape (when you move or rotate the shape, the text moves or rotates with it).</p>
+				</li>
+			</ol>
+            <h3>Move and resize autoshapes</h3>
+            <p id ="shape_resize"><img class="floatleft" alt="Reshaping autoshape" src="../images/reshaping.png" />To change the autoshape size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on the shape edges. To maintain the original proportions of the selected autoshape while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</pid>
+			<p>When modifying some shapes, for example figured arrows or callouts, the yellow diamond-shaped <img alt="Yellow diamond icon" src="../images/yellowdiamond.png" /> icon is also available. It allows you to adjust some aspects of the shape, for example, the length of the head of an arrow.</p>
+			<p>To alter the autoshape position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the autoshape. Drag the autoshape to the necessary position without releasing the mouse button. 
+			When you move the autoshape, guide lines are displayed to help you position the object on the page precisely (if a wrapping style other than inline is selected).
+			To move the autoshape by three-pixel increments, hold down the <b>Ctrl</b> key and use the keybord arrows. 
+			To move the autoshape strictly horizontally/vertically and prevent it from moving in a perpendicular direction, hold down the <b>Shift</b> key when dragging.</p>
+			<p>To rotate the autoshape, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
+			<hr />
+            <h3>Adjust autoshape settings</h3>
+            <p id ="shape_rightclickmenu">To align and arrange autoshapes, use the <b>right-click menu</b>. The menu options are:</p>
+			<ul>
+                <li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
+                <li><b>Arrange</b> is used to bring the selected autoshape to foreground, send to background, move forward or backward as well as group or ungroup shapes to perform operations with several of them at once.</li>
+				<li><b>Align</b> is used to align the shape left, center, right, top, middle, bottom.</li>
+				<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <img alt="Editing Wrap Boundary" src="../images/wrap_boundary.png" /></li>
+				<li><b>Shape Advanced Settings</b> is used to open the 'Shape - Advanced Settings' window.</li>
+			</ul>
+			<hr />
+			<p>Some of the autoshape settings can be altered using the <b>Shape Settings</b> tab of the right sidebar. To activate it click the shape and choose the <b>Shape Settings</b> <img alt="Shape Settings icon" src="../images/shape_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
+			<ul>
+			<li  id="shape_fill"><b>Fill</b> - use this section to select the autoshape fill. You can choose the following options:
+			<ul>
+				<li><b>Color Fill</b> - select this option to specify the solid color you want to fill the inner space of the selected autoshape with.
+				<p><img alt="Color Fill" src="../images/fill_color.png" /></p>
+				<p id="color">Click the colored box below and select the necessary color from the available <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">color sets</a> or specify any color you like:</p>
+				</li>
+				<li><b>Gradient Fill</b> - select this option to fill the shape with two colors which smoothly change from one to another.
+				<p><img alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
+				    <ul>
+				    <li><b>Style</b> - choose one of the available options: <b>Linear</b> (colors change in a straight line i.e. along a horizontal/vertical axis or diagonally at a 45 degree angle) or <b>Radial</b> (colors change in a circular path from the center to the edges).</li>
+				    <li><b>Direction</b> - choose a template from the menu. If the <b>Linear</b> gradient is selected, the following directions are available: top-left to bottom-right, top to bottom, top-right to bottom-left, right to left, bottom-right to top-left, bottom to top, bottom-left to top-right, left to right. If the <b>Radial</b> gradient is selected, only one template is available.</li>
+				    <li><b>Gradient</b> - click on the left slider <img alt="Slider" src="../images/gradientslider.png" /> under the gradient bar to activate the color box which corresponds to the first color. Click on the color box on the right to choose the first color in the palette. Drag the slider to set the gradient stop i.e. the point where one color changes into another. Use the right slider under the gradient bar to specify the second color and set the gradient stop.</li>
+				    </ul>			
+				</li>
+				<li><b>Picture or Texture</b> - select this option to use an image or a predefined texture as the shape background.
+				<p><img alt="Picture or Texture Fill" src="../images/fill_picture.png" /></p>
+					<ul>
+						<li>If you wish to use an image as a background for the shape, you can add an image <b>From File</b> selecting it on your computer HDD or <b>From URL</b> inserting the appropriate URL address into the opened window.</li>
+						<li>If you wish to use a texture as a background for the shape, open the <b>From Texture</b> menu and select the necessary texture preset.
+						<p>Currently, the following textures are available: canvas, carton, dark fabric, grain, granite, grey paper, knit, leather, brown paper, papyrus, wood.</p>
+						</li>
+					</ul>
+					<ul>
+						<li>In case the selected <b>Picture</b> has less or more dimensions than the autoshape has, you can choose the <b>Stretch</b> or <b>Tile</b> setting from the dropdown list.
+						<p>The <b>Stretch</b> option allows you to adjust the image size to fit the autoshape size so that it could fill the space completely.</p>
+						<p>The <b>Tile</b> option allows you to display only a part of the bigger image keeping its original dimensions or repeat the smaller image keeping its original dimensions over the autoshape surface so that it could fill the space completely.</p>
+						<p class="note"><b>Note</b>: any selected <b>Texture</b> preset fills the space completely, but you can apply the <b>Stretch</b> effect if necessary.</p>
+						</li>
+					</ul>
+				</li>
+				<li><b>Pattern</b> - select this option to fill the shape with a two-colored design composed of regularly repeated elements.
+				<p><img alt="Pattern Fill" src="../images/fill_pattern.png" /></p>
+				    <ul>
+				        <li><b>Pattern</b> - select one of the predefined designs from the menu.</li>
+				        <li><b>Foreground color</b> - click this color box to change the color of the pattern elements.</li>
+				        <li><b>Background color</b> - click this color box to change the color of the pattern background.</li>
+				    </ul>			
+				</li>
+				<li><b>No Fill</b> - select this option if you don't want to use any fill.</li>
+			</ul>
+			</li>
+			</ul>
+			<p><img class="floatleft" alt="Autoshape Settings tab" src="../images/right_autoshape.png" /></p>
+			<ul style="margin-left: 280px;">			
+			<li><b>Opacity</b> - use this section to set an <b>Opacity</b> level dragging the slider or entering the percent value manually. The default value is <b>100%</b>. It corresponds to the full opacity. The <b>0%</b> value corresponds to the full transparency.</li>
+			<li id="shape_stroke"><b>Stroke</b> - use this section to change the autoshape stroke width, color or type.
+				<ul>
+				<li>To change the stroke width, select one of the available options from the <b>Size</b> dropdown list. The available options are: 0.5 pt, 1 pt, 1.5 pt, 2.25 pt, 3 pt, 4.5 pt, 6 pt. Alternatively, select the <b>No Line</b> option if you don't want to use any stroke.</li>
+				<li>To change the stroke <b>color</b>, click on the colored box below and <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">select the necessary color</a>.</li>
+                <li>To change the stroke <b>type</b>, select the necessary option from the corresponding dropdown list (a solid line is applied by default, you can change it to one of the available dashed lines).</li>
+				</ul>
+			</li>
+			<li><b>Wrapping Style</b> - use this section to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
+			<li><b>Change Autoshape</b> - use this section to replace the current autoshape with another one selected from the dropdown list.</li>
+			</ul>
+			<hr />
+			<p>To change the <b>advanced settings</b> of the autoshape, right-click it and select the <b>Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar. The 'Shape - Advanced Settings' window will open:</p>
+            <p><img alt="Shape - Advanced Settings" src="../images/shape_properties.png" /></p>
+			<p>The <b>Size</b> tab contains the following parameters:</p>
+			<ul>
+				<li><b>Width</b> - use one of these options to change the autoshape width.
+                <ul>
+                    <li><b>Absolute</b> - specify an exact value measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab).</li>
+                    <li><b>Relative</b> - specify a percentage <b>relative to</b> the <em>left margin</em> width, the <em>margin</em> (i.e. the distance between the left and right margins), the <em>page</em> width, or the <em>right margin</em> width.</li>
+                </ul>
+                </li>
+                <li><b>Height</b> - use one of these options to change the autoshape height.
+                    <ul>
+                        <li><b>Absolute</b> - specify an exact value measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab).</li>
+                        <li><b>Relative</b> - specify a percentage <b>relative to</b> the <em>margin</em> (i.e. the distance between the top and bottom margins), the <em>bottom margin</em> height, the <em>page</em> height, or the <em>top margin</em> height.</li>
+                    </ul>
+                </li>
+                <li>If the <b>Lock aspect ratio</b> option is checked, the width and height will be changed together preserving the original shape aspect ratio.</li>
+			</ul>
+            <p id="shape_wrapping"><img alt="Shape - Advanced Settings" src="../images/shape_properties_1.png" /></p>
+			<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
+			<ul>
+				<li><b>Wrapping Style</b> - use this option to change the way the shape is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
+				<ul>
+				    <li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the shape is considered to be a part of the text, like a character, so when the text moves, the shape moves as well. In this case the positioning options are inaccessible.</p>
+				    <p>If one of the following styles is selected, the shape can be moved independently of the text and positioned on the page exactly:</p>
+				    </li>
+				    <li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the shape.</p></li>
+				    <li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual shape edges.</p></li>
+				    <li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the shape edges and fills in the open white space within the shape. So that the effect can appear, use the <b>Edit Wrap Boundary</b> option from the right-click menu.</p></li>
+				    <li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the shape.</p></li>
+				    <li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the shape overlaps the text.</p></li>
+				    <li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the shape.</p></li>
+				    </ul>
+				</li>
+			</ul>
+			<p>If you select the square, tight, through, or top and bottom style you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
+			<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_2.png" /></p>
+			<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
+			<ul>
+                <li>
+                    The <b>Horizontal</b> section allows you to select one of the following three autoshape positioning types:
+                    <ul>
+                        <li><b>Alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin,</li>
+                        <li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>to the right of</b> character, column, left margin, margin, page or right margin,</li>
+                        <li><b>Relative position</b> measured in percent <b>relative to</b> the left margin, margin, page or right margin.</li>
+                    </ul>
+                </li>
+                <li>
+                    The <b>Vertical</b> section allows you to select one of the following three autoshape positioning types:
+                    <ul>
+                        <li><b>Alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin,</li>
+                        <li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>below</b> line, margin, bottom margin, paragraph, page or top margin,</li>
+                        <li><b>Relative position</b> measured in percent <b>relative to</b> the margin, bottom margin, page or top margin.</li>
+                    </ul>
+                </li>
+                <li><b>Move object with text</b> controls whether the autoshape moves as the text to which it is anchored moves.</li>
+				<li><b>Allow overlap</b> controls whether two autoshapes overlap or not if you drag them near each other on the page.</li>
+			</ul>
+			<p><img alt="Shape - Advanced Settings" src="../images/shape_properties_3.png" /></p>
+			<p>The <b>Shape Settings</b> tab contains the following parameters:</p>
+			<ul>
+				<li><b>Line Style</b> - this option group allows to specify the following parameters:
+				<ul>
+				<li><b>Cap Type</b> - this option allows to set the style for the end of the line, therefore it can be applied only to the shapes with the open outline, such as lines, polylines etc.: 
+					<ul>
+					<li><b>Flat</b> - the end points will be flat.</li>
+					<li><b>Round</b> - the end points will be rounded.</li>
+					<li><b>Square</b> - the end points will be square.</li>
+					</ul>
+				</li>
+				<li><b>Join Type</b> - this option allows to set the style for the intersection of two lines, for example, it can affect a polyline or the corners of the triangle or rectangle outline:
+					<ul>
+					<li><b>Round</b> - the corner will be rounded.</li>
+					<li><b>Bevel</b> - the corner will be cut off angularly.</li>
+					<li><b>Miter</b> - the corner will be pointed. It goes well to shapes with sharp angles.</li>
+					</ul>
+					<p class="note"><b>Note</b>: the effect will be more noticeable if you use a large outline width.</p>
+				</li>
+				</ul>
+				</li>
+				<li><b>Arrows</b> - this option group is available if a shape from the <b>Lines</b> shape group is selected. It allows to set the arrow <b>Start</b> and <b>End Style</b> and <b>Size</b> by selecting the appropriate option from the dropdown lists.</li>
+			</ul>
+            <p><img alt="Shape - Advanced Settings" src="../images/shape_properties_4.png" /></p>
+			<p>The <b>Text Padding</b> tab allows to change the autoshape <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> internal margins (i.e. the distance between the text within the shape and the autoshape borders).</p>
+            <p class="note"><b>Note</b>: this tab is only available if text is added within the autoshape, otherwise the tab is disabled.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertCharts.htm

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert charts</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Add a chart to your document and adjust its position, size and properties" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert charts</h1>
+            <h3>Insert a chart</h3>
+			<p>To insert a chart into your document,</p>
+			<ol>
+				<li>put the cursor at the place where you want to add a chart,</li>
+				<li>click the <b>Insert Chart</b> <img alt="Insert Chart icon" src="../images/insertchart.png" /> icon at the top toolbar,</li>
+				<li>select the needed chart type from the available ones -  Column, Line, Pie, Bar, Area, XY (Scatter), or Stock,
+                <p class="note"><b>Note</b>: for <b>Column</b>, <b>Line</b>, <b>Pie</b>, or <b>Bar</b> charts, a 3D format is also available.</p>
+                </li>
+				<li>after that the <b>Chart Editor</b> window will appear where you can enter the necessary data into the cells using the following controls:
+					<ul>
+						<li><img alt="Copy" src="../images/copy.png" /> and <img alt="Paste" src="../images/paste.png" /> for copying and pasting the copied data</li>
+						<li><img alt="Undo" src="../images/undo.png" /> and <img alt="Redo" src="../images/redo.png" /> for undoing and redoing actions</li>
+						<li><img alt="Insert function" src="../images/insertfunction.png" /> for inserting a function</li>
+						<li><img alt="Decrease decimal" src="../images/decreasedec.png" /> and <img alt="Increase decimal" src="../images/increasedec.png" /> for decreasing and increasing decimal places</li>
+						<li><img alt="Number format" src="../images/numberformat.png" /> for changing the number format, i.e. the way the numbers you enter appear in cells</li>
+					</ul>
+					<p><img alt="Chart Editor window" src="../images/charteditor.png" /></p>
+				</li>
+				<li>change the chart settings clicking the <b>Edit Chart</b> button situated in the <b>Chart Editor</b> window. The <b>Chart - Advanced Settings</b> window will open. 
+					<p><img alt="Chart - Advanced Settings window" src="../images/chartsettings.png" /></p>
+                    <p>The <b>Type &amp Data</b> tab allows you to change the chart type as well as the data you wish to use to create a chart.</p>
+                    <ul>
+                        <li>Select a chart <b>Type</b> you wish to apply: Column, Line, Pie, Bar, Area, XY (Scatter), or Stock.</li>
+                        <li>Check the selected <b>Data Range</b> and modify it, if necessary, clicking the <b>Select Data</b> button and entering the desired data range in the following format: <em>Sheet1!A1:B4</em>.</li>
+                        <li>Choose the way to arrange the data. You can either select the <b>Data series</b> to be used on the X axis: <b>in rows</b> or <b>in columns</b>.</li>
+                    </ul>
+					<p><img alt="Chart - Advanced Settings window" src="../images/chartsettings2.png" /></p>
+                    <p>The <b>Layout</b> tab allows you to change the layout of chart elements.</p>
+                    <ul>
+                        <li>
+                            Specify the <b>Chart Title</b> position in regard to your chart selecting the necessary option from the drop-down list:
+                            <ul>
+                                <li><b>None</b> to not display a chart title,</li>
+                                <li><b>Overlay</b> to overlay and center a title on the plot area,</li>
+                                <li><b>No Overlay</b> to display the title above the plot area.</li>
+                            </ul>
+                        </li>
+                        <li>
+                            Specify the <b>Legend</b> position in regard to your chart selecting the necessary option from the drop-down list:
+                            <ul>
+                                <li><b>None</b> to not display a legend,</li>
+                                <li><b>Bottom</b> to display the legend and align it to the bottom of the plot area,</li>
+                                <li><b>Top</b> to display the legend and align it to the top of the plot area,</li>
+                                <li><b>Right</b> to display the legend and align it to the right of the plot area,</li>
+                                <li><b>Left</b> to display the legend and align it to the left of the plot area,</li>
+                                <li><b>Left Overlay</b> to overlay and center the legend to the left on the plot area,</li>
+                                <li><b>Right Overlay</b> to overlay and center the legend to the right on the plot area.</li>
+                            </ul>
+                        </li>
+                        <li>
+                            Specify the <b>Data Labels</b> (i.e. text labels that represent exact values of data points) parameters:<br />
+                            <ul>
+                                <li>specify the <b>Data Labels</b> position relative to the data points selecting the necessary option from the drop-down list. The available options vary depending on the selected chart type.
+                                <ul>
+                                    <li>For <b>Column/Bar</b> charts, you can choose the following options: <b>None</b>, <b>Center</b>, <b>Inner Bottom</b>, <b>Inner Top</b>, <b>Outer Top</b>.</li>
+                                    <li>For <b>Line/XY (Scatter)/Stock</b> charts, you can choose the following options: <b>None</b>, <b>Center</b>, <b>Left</b>, <b>Right</b>, <b>Top</b>, <b>Bottom</b>.</li>
+                                    <li>For <b>Pie</b> charts, you can choose the following options: <b>None</b>, <b>Center</b>, <b>Fit to Width</b>, <b>Inner Top</b>, <b>Outer Top</b>.</li>
+                                    <li>For <b>Area</b> charts as well as for <b>3D</b> <b>Column</b>, <b>Line</b> and <b>Bar</b> charts, you can choose the following options: <b>None</b>, <b>Center</b>.</li>
+                                </ul>
+                                </li>
+                                <li>select the data you wish to include into your labels checking the corresponding boxes: <b>Series Name</b>, <b>Category Name</b>, <b>Value</b>,</li>
+                                <li>enter a character (comma, semicolon etc.) you wish to use for separating several labels into the <b>Data Labels Separator</b> entry field.</li>
+                            </ul>
+                        </li>
+                        <li><b>Lines</b> - is used to choose a line style for <b>Line/XY (Scatter) charts</b>. You can choose one of the following options: <b>Straight</b> to use straight lines between data points, <b>Smooth</b> to use smooth curves between data points, or <b>None</b> to not display lines.</li>
+                        <li>
+                            <b>Markers</b> - is used to specify whether the markers should be displayed (if the box is checked) or not (if the box is unchecked) for <b>Line/XY (Scatter) charts</b>.
+                            <p class="note"><b>Note</b>: the <b>Lines</b> and <b>Markers</b> options are available for <b>Line charts</b> and <b>XY (Scatter) charts</b> only.</p>
+                        </li>
+                        <li>
+                            The <b>Axis Settings</b> section allows to specify if you wish to display <b>Horizontal/Vertical Axis</b> or not selecting the <b>Show</b> or <b>Hide</b> option from the drop-down list. You can also specify <b>Horizontal/Vertical Axis Title</b> parameters:
+                            <ul>
+                                <li>
+                                    Specify if you wish to display the <b>Horizontal Axis Title</b> or not selecting the necessary option from the drop-down list:
+                                    <ul>
+                                        <li><b>None</b> to not display a horizontal axis title,</li>
+                                        <li><b>No Overlay</b> to display the title below the horizontal axis.</li>
+                                    </ul>
+                                </li>
+                                <li>
+                                    Specify the <b>Vertical Axis Title</b> orientation selecting the necessary option from the drop-down list:
+                                    <ul>
+                                        <li><b>None</b> to not display a vertical axis title,</li>
+                                        <li><b>Rotated</b> to display the title from bottom to top to the left of the vertical axis,</li>
+                                        <li><b>Horizontal</b> to display the title horizontally to the left of the vertical axis.</li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            The <b>Gridlines</b> section allows to specify which of the <b>Horizontal/Vertical Gridlines</b> you wish to display selecting the necessary option from the drop-down list: <b>Major</b>, <b>Minor</b>, or <b>Major and Minor</b>. You can hide the gridlines at all using the <b>None</b> option.
+                            <p class="note"><b>Note</b>: the <b>Axis Settings</b> and <b>Gridlines</b> sections will be disabled for <b>Pie charts</b> since charts of this type have no axes and gridlines.</p>
+                        </li>
+                    </ul>
+                    <p><img alt="Chart - Advanced Settings window" src="../images/chartsettings3.png" /></p>
+                    <p class="note"><b>Note</b>: the <b>Vertical/Horizontal Axis</b> tabs will be disabled for <b>Pie charts</b> since charts of this type have no axes.</p>
+                <p>The <b>Vertical Axis</b> tab allows you to change the parameters of the vertical axis also referred to as the values axis or y-axis which displays numeric values. Note that the vertical axis will be the category axis which displays text labels for the <b>Bar charts</b>, therefore in this case the <b>Vertical Axis</b> tab options will correspond to the ones described in the next section. For the <b>XY (Scatter) charts</b>, both axes are value axes.</p>
+                <ul>
+                    <li>The <b>Axis Options</b> section allows to set the following parameters:
+                    <ul>
+                        <li><b>Minimum Value</b> - is used to specify a lowest value displayed at the vertical axis start. The <b>Auto</b> option is selected by default, in this case the minimum value is calculated automatically depending on the selected data range. You can select the <b>Fixed</b> option from the drop-down list and specify a different value in the entry field on the right.</li>
+                        <li><b>Maximum Value</b> - is used to specify a highest value displayed at the vertical axis end. The <b>Auto</b> option is selected by default, in this case the maximum value is calculated automatically depending on the selected data range. You can select the <b>Fixed</b> option from the drop-down list and specify a different value in the entry field on the right.</li>
+                        <li><b>Axis Crosses</b> - is used to specify a point on the vertical axis where the horizontal axis should cross it. The <b>Auto</b> option is selected by default, in this case the axes intersection point value is calculated automatically depending on the selected data range. You can select the <b>Value</b> option from the drop-down list and specify a different value in the entry field on the right, or set the axes intersection point at the <b>Minimum/Maximum Value</b> on the vertical axis.</li>
+                        <li><b>Display Units</b> - is used to determine a representation of the numeric values along the vertical axis. This option can be useful if you're working with great numbers and wish the values on the axis to be displayed in more compact and readable way (e.g. you can represent 50 000 as 50 by using the <b>Thousands</b> display units). Select desired units from the drop-down list: <b>Hundreds</b>, <b>Thousands</b>, <b>10 000</b>, <b>100 000</b>, <b>Millions</b>, <b>10 000 000</b>, <b>100 000 000</b>, <b>Billions</b>, <b>Trillions</b>, or choose the <b>None</b> option to return to the default units.</li>
+                        <li><b>Values in reverse order</b> - is used to display values in an opposite direction. When the box is unchecked, the lowest value is at the bottom and the highest value is at the top of the axis. When the box is checked, the values are ordered from top to bottom.</li>
+                    </ul>
+                    </li>
+                    <li>The <b>Tick Options</b> section allows to adjust the appearance of tick marks on the vertical scale. Major tick marks are the larger scale divisions which can have labels displaying numeric values. Minor tick marks are the scale subdivisions which are placed between the major tick marks and have no labels. Tick marks also define where gridlines can be displayed, if the corresponding option is set at the <b>Layout</b> tab. The <b>Major/Minor Type</b> drop-down lists contain the following placement options:
+                    <ul>                        
+                            <li><b>None</b> to not display major/minor tick marks,</li>
+                            <li><b>Cross</b> to display major/minor tick marks on both sides of the axis,</li>
+                            <li><b>In</b> to display major/minor tick marks inside the axis,</li>
+                            <li><b>Out</b> to display major/minor tick marks outside the axis.</li>                                                
+                    </ul>
+                    </li>
+                    <li>The <b>Label Options</b> section allows to adjust the appearance of major tick mark labels which display values. To specify a <b>Label Position</b> in regard to the vertical axis, select the necessary option from the drop-down list:
+                    <ul>
+                        <li><b>None</b> to not display tick mark labels,</li>
+                        <li><b>Low</b> to display tick mark labels to the left of the plot area,</li>
+                        <li><b>High</b> to display tick mark labels to the right of the plot area,</li>
+                        <li><b>Next to axis</b> to display tick mark labels next to the axis.</li>
+                    </ul>
+                    </li>
+                </ul>
+                    <p><img alt="Chart - Advanced Settings window" src="../images/chartsettings4.png" /></p>
+                    <p>The <b>Horizontal Axis</b> tab allows you to change the parameters of the horizontal axis also referred to as the categories axis or x-axis which displays text labels. Note that the horizontal axis will be the value axis which displays numeric values for the <b>Bar charts</b>, therefore in this case the <b>Horizontal Axis</b> tab options will correspond to the ones described in the previous section. For the <b>XY (Scatter) charts</b>, both axes are value axes.</p>
+                    <ul>
+                        <li>The <b>Axis Options</b> section allows to set the following parameters:
+                            <ul>
+                                <li><b>Axis Crosses</b> - is used to specify a point on the horizontal axis where the vertical axis should cross it. The <b>Auto</b> option is selected by default, in this case the axes intersection point value is calculated automatically depending on the selected data range. You can select the <b>Value</b> option from the drop-down list and specify a different value in the entry field on the right, or set the axes intersection point at the <b>Minimum/Maximum Value</b> (that corresponds to the first and last category) on the horizontal axis.</li>
+                                <li><b>Axis Position</b> - is used to specify where the axis text labels should be placed: <b>On Tick Marks</b> or <b>Between Tick Marks</b>.</li>
+                                <li><b>Values in reverse order</b> - is used to display categories in an opposite direction. When the box is unchecked, categories are displayed from left to right. When the box is checked, the categories are ordered from right to left.</li>
+                            </ul>
+                        </li>
+                        <li>The <b>Tick Options</b> section allows to adjust the appearance of tick marks on the horizontal scale. Major tick marks are the larger divisions which can have labels displaying category values. Minor tick marks are the smaller divisions which are placed between the major tick marks and have no labels. Tick marks also define where gridlines can be displayed, if the corresponding option is set at the <b>Layout</b> tab. You can adjust the following tick mark parameters:
+                            <ul>
+                                <li><b>Major/Minor Type</b> - is used to specify the following placement options: <b>None</b> to not display major/minor tick marks, <b>Cross</b> to display major/minor tick marks on both sides of the axis, <b>In</b> to display major/minor tick marks inside the axis, <b>Out</b> to display major/minor tick marks outside the axis.</li>
+                                <li><b>Interval between Marks</b> - is used to specify how many categories should be displayed between two adjacent tick marks.</li>
+                            </ul>
+                        </li>
+                        <li>The <b>Label Options</b> section allows to adjust the appearance of labels which display categories.
+                        <ul>
+                            <li><b>Label Position</b> - is used to specify where the labels should be placed in regard to the horizontal axis. Select the necessary option from the drop-down list: <b>None</b> to not display category labels, <b>Low</b> to display category labels at the bottom of the plot area, <b>High</b> to display category labels at the top of the plot area, <b>Next to axis</b> to display category labels next to the axis.</li>
+                            <li><b>Axis Label Distance</b> - is used to specify how closely the labels should be placed to the axis. You can specify the necessary value in the entry field. The more the value you set, the more the distance between the axis and labels is.</li>
+                            <li><b>Interval between Labels</b> - is used to specify how often the labels should be displayed. The <b>Auto</b> option is selected by default, in this case labels are displayed for every category. You can select the <b>Manual</b> option from the drop-down list and specify the necessary value in the entry field on the right. For example, enter 2 to display labels for every other category etc.</li>
+                        </ul>
+                        </li>
+                    </ul>
+                    </li>
+			</ol>
+			<hr />
+            <h3>Move and resize charts</h3>
+			<p><img class="floatleft" alt="Moving chart" src="../images/moving_chart.png" />Once the chart is added, you can change its size and position. To change the chart size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges. To maintain the original proportions of the selected chart while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
+			<p>To alter the chart position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the chart. Drag the chart to the necessary position without releasing the mouse button. When you move the chart, guide lines are displayed to help you position the object on the page precisely (if a wrapping style other than inline is selected).</p>
+			<hr />
+            <h3>Edit chart elements</h3>
+            <p>To edit the chart <b>Title</b>, select the default text with the mouse and type in your own one instead.</p>
+            <p>To change the font formatting within text elements, such as the chart title, axes titles, legend entries, data labels etc., select the necessary text element by left-clicking it. Then use icons on the top toolbar to change the font <a href="../UsageInstructions/FontTypeSizeColor.htm" onclick="onhyperlinkclick(this)">type, size, color</a> or its <a href="../UsageInstructions/DecorationStyles.htm" onclick="onhyperlinkclick(this)">decoration style</a>.</p>
+            <p>To delete a chart element, select it by left-clicking and press the <b>Delete</b> key on the keyboard.</p>
+            <p>You can also rotate 3D charts using the mouse. Left-click within the plot area and hold the mouse button until a blue dashed box appears. Drag the cursor without releasing the mouse button to change the 3D chart orientation.</p>
+            <p><img alt="3D chart" src="../images/3dchart.png" /></p>
+            <hr />
+            <h3>Adjust chart settings</h3>
+            <p><img class="floatleft" alt="Chart Settings tab" src="../images/right_chart.png" /></p>
+			<p>Some of the chart settings can be altered using the <b>Chart Settings</b> tab of the right sidebar. To activate it click the chart and choose the <b>Chart Settings</b> <img alt="Chart Settings icon" src="../images/chart_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
+			<ul style="margin-left: 280px;">
+				<li><b>Size</b> is used to view the current chart <b>Width</b> and <b>Height</b>.</li>
+				<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
+				<li><b>Change Chart Type</b> is used to change the selected chart type and/or style.
+                <p>To select the necessary chart <b>Style</b>, use the second drop-down menu in the <b>Change Chart Type</b> section.</p>
+                </li>
+				<li><b>Edit Data</b> is used to open the 'Chart Editor' window.
+                <p class="note"><b>Note</b>: to quickly open the 'Chart Editor' window you can also double-click the chart in the document.</p>
+                </li>
+			</ul>
+			<p>Some of these options you can also find in the <b>right-click menu</b>. The menu options are:</p>
+			<ul style="margin-left: 280px;">
+                <li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
+				<li><b>Arrange</b> is used to bring the selected chart to foreground, send to background, move forward or backward as well as group or ungroup charts to perform operations with several of them at once.</li>
+				<li><b>Align</b> is used to align the chart left, center, right, top, middle, bottom.</li>
+				<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind. The <b>Edit Wrap Boundary</b> option is unavailable for charts.</li>
+				<li><b>Edit Data</b> is used to open the 'Chart Editor' window.</li>
+				<li><b>Chart Advanced Settings</b> is used to open the 'Chart - Advanced Settings' window.</li>
+			</ul>	
+			<p>When the chart is selected, the <b>Shape Settings</b> <img alt="Shape Settings icon" src="../images/shape_settings_icon.png" /> icon is also available on the right, since a shape is used as a background for the chart. You can click this icon to open the <b>Shape Settings</b> tab at the right sidebar and adjust the shape <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)"><b>Fill</b></a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Stroke</b></a> and <b>Wrapping Style</b>. Note that you cannot change the shape type.</p>
+			<hr />
+			<p>To change the chart advanced settings, click the needed chart with the right mouse button and select <b>Chart Advanced Settings</b> from the right-click menu or just click the <b>Show advanced settings</b> link at the right sidebar. The chart properties window will open:</p>
+			<p><img alt="Chart - Advanced Settings: Size" src="../images/chart_properties.png" /></p>
+			<p>The <b>Size</b> tab contains the following parameters:</p>
+			<ul>
+				<li><b>Width</b> and <b>Height</b> - use these options to change the chart width and/or height. If the <b>Constant Proportions</b> <img alt="Constant Proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant Proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original chart aspect ratio.</li>
+			</ul>
+			<p><img alt="Chart - Advanced Settings: Text Wrapping" src="../images/chart_properties_1.png" /></p>
+			<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
+			<ul>
+				<li><b>Wrapping Style</b> - use this option to change the way the chart is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
+				    <ul>
+				    <li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the chart is considered to be a part of the text, like a character, so when the text moves, the chart moves as well. In this case the positioning options are inaccessible.</p>
+				    <p>If one of the following styles is selected, the chart can be moved independently of the text and positioned on the page exactly:</p>
+				    </li>
+				    <li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the chart.</p></li>
+				    <li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual chart edges.</p></li>
+				    <li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the chart edges and fills in the open white space within the chart.</p></li>
+				    <li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the chart.</p></li>
+				    <li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the chart overlaps the text.</p></li>
+				    <li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the chart.</p></li>
+				    </ul>
+				</li>
+			</ul>
+			<p>If you select the square, tight, through, or top and bottom style you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
+			<p><img alt="Chart - Advanced Settings: Position" src="../images/chart_properties_2.png" /></p>
+			<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
+			<ul>
+                <li>
+                    The <b>Horizontal</b> section allows you to select one of the following three chart positioning types:
+                    <ul>
+                        <li><b>Alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin,</li>
+                        <li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>to the right of</b> character, column, left margin, margin, page or right margin,</li>
+                        <li><b>Relative position</b> measured in percent <b>relative to</b> the left margin, margin, page or right margin.</li>
+                    </ul>
+                </li>
+                <li>
+                    The <b>Vertical</b> section allows you to select one of the following three chart positioning types:
+                    <ul>
+                        <li><b>Alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin,</li>
+                        <li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>below</b> line, margin, bottom margin, paragraph, page or top margin,</li>
+                        <li><b>Relative position</b> measured in percent <b>relative to</b> the margin, bottom margin, page or top margin.</li>
+                    </ul>
+                </li>
+				<li><b>Move object with text</b> controls whether the chart moves as the text to which it is anchored moves.</li>
+				<li><b>Allow overlap</b> controls whether two charts overlap or not if you drag them near each other on the page.</li>
+			</ul>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertDropCap.htm

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert a drop cap</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Insert a drop cap and adjust its frame properties to make your document look more expressive." />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert a drop cap</h1>
+			<p>A <b>Drop cap</b> is the first letter of a paragraph that is much larger than others and takes up several lines in height.</p>
+			<p>To add a drop cap,</p>
+			<ol>
+				<li>put the cursor within the paragraph you need,</li>
+				<li>click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar,</li>
+				<li>in the opened drop-down list select the option you need:
+				    <ul>
+				    <li><b>In Text</b> <img alt="Insert Drop Cap - In Text" src="../images/dropcap_text.png" /> - to place the drop cap within the paragraph.</li>
+				    <li><b>In Margin</b> <img alt="Insert Drop Cap - In Margin" src="../images/dropcap_margin.png" /> - to place the drop cap in the left margin.</li>
+				    </ul>
+				</li>
+			</ol>
+			<p><img class="floatleft" alt="Drop Cap example" src="../images/dropcap_example.png" />The first character of the selected paragraph will be transformed into a drop cap. If you need the drop cap to include some more characters, add them manually: select the drop cap and type in other letters you need.</p>
+			<p>To adjust the drop cap appearance (i.e. font size, type, decoration style or color), select the letter and use the corresponding icons at the top toolbar.</p>
+			<p>When the drop cap is selected, it's surrounded by a <b>frame</b> (a container used to position the drop cap on the page). You can quickly change the frame size dragging its borders or change its position using the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the frame.</p>
+			<p>To delete the added drop cap, select it, click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar and choose the <b>None</b> <img alt="Insert Drop Cap - None" src="../images/dropcap_none.png" /> option from the drop-down list.</p>
+			<hr />
+			<p>To adjust the added drop cap parameters, select it, click the <b>Insert Drop Cap</b> <img alt="Insert Drop Cap icon" src="../images/insert_dropcap_icon.png" /> icon at the top toolbar and choose the <b>Drop Cap Settings</b> option from the drop-down list. The <b>Drop Cap - Advanced Settings</b> window will open:</p>
+            <p><img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_1.png" /></p>
+			<p>The <b>Drop Cap</b> tab allows to set the following parameters:</p>
+			    <ul>
+			    <li><b>Position</b> - is used to change the drop cap placement. Select the <b>In Text</b> or <b>In Margin</b> option, or click <b>None</b> to delete the drop cap.</li>
+			    <li><b>Font</b> - is used to select one of the fonts from the list of the available ones.</li>
+			    <li><b>Height in rows</b> - is used to specify how many lines the drop cap should span. It's possible to select a value from 1 to 10.</li>
+			    <li><b>Distance from text</b> - is used to specify the amount of space between the text of the paragraph and the right border of the frame that surrounds the drop cap.</li>
+			    </ul>
+            <p><img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_2.png" /></p>
+			<p>The <b>Borders &amp; Fill</b> tab allows to add a border around the drop cap and adjust its parameters. They are the following:</p>
+			<ul>
+				<li><b>Border</b> parameters (size, color and presence or absence) - set the border size, select its color and choose the borders (top, bottom, left, right or their combination) you want to apply these settings to.</li>
+				<li><b>Background color</b> - choose the color for the drop cap background.</li>
+			</ul>
+            <p><img alt="Drop Cap - Advanced Settings" src="../images/dropcap_properties_3.png" /></p>
+			<p>The <b>Margins</b> tab allows to set the distance between the drop cap and the <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> borders around it (if the borders have previously been added).</p>
+			<hr />
+			<p>Once the drop cap is added you can also change the <b>Frame</b> parameters. To access them, right click within the frame and select the <b>Frame Advanced Settings</b> from the menu. The <b>Frame - Advanced Settings</b> window will open:</p> 
+            <p><img alt="Frame - Advanced Settings" src="../images/frame_properties_1.png" /></p>
+			<p>The <b>Frame</b> tab allows to set the following parameters:</p>
+			<ul>
+				<li><b>Position</b> -  is used to select the <b>Inline</b> or <b>Flow</b> wrapping style. Or you can click <b>None</b> to delete the frame.</li>
+				<li><b>Width</b> and <b>Height</b> - are used to change the frame dimensions. The <b>Auto</b> option allows to automatically adjust the frame size to fit the drop cap in it. The <b>Exactly</b> option allows to specify fixed values. The <b>At least</b> option is used to set the minimum height value (if you change the drop cap size, the frame height changes accordingly, but it cannot be less than the specified value).</li>
+				<li><b>Horizontal</b> parameters are used either to set the frame exact <b>position</b> in the selected units of measurement <b>relative to</b> a margin, page or column, or to align the frame (left, center or right) <b>relative to</b> one of these reference points. You can also set the horizontal <b>Distance from text</b> i.e. the amount of space between the vertical frame borders and the text of the paragraph.</li>
+				<li><b>Vertical</b> parameters are used either to set the frame exact <b>position</b> in the selected units of measurement <b>relative to</b> a margin, page or paragraph, or to align the frame (top, center or bottom) <b>relative to</b> one of these reference points. You can also set the vertical <b>Distance from text</b> i.e. the amount of space between the horizontal frame borders and the text of the paragraph.</li>
+				<li><b>Move with text</b> - controls whether the frame moves as the paragraph to which it is anchored moves.</li>
+			</ul>
+			<!--<img alt="Frame - Advanced Settings" src="../images/Frame_properties_2.png" />-->
+			<p>The <b>Borders &amp; Fill</b> and <b>Margins</b> tabs allow to set just the same parameters as at the tabs of the same name in the <b>Drop Cap - Advanced Settings</b> window.</p>
+			<!--<img alt="Frame - Advanced Settings" src="../images/Frame_properties_3.png" />
+			<p>The <b>Margins</b> tab allows to set just the same parameters as at the tab of the same name in the <b>Drop Cap - Advanced Settings</b> window.</p>-->
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertEquation.htm

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert equations</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Insert equations and mathematical symbols." />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert equations</h1>
+            <p><b>Document Editor</b> allows you to build equations using the built-in templates, edit them, insert special characters (including mathematical operators, Greek letters, accents etc.).</p>
+            <h3>Add a new equation</h3>
+            <p>To insert an equation from the gallery,</p>
+			<ol>
+				<li>put the cursor within the necessary line ,</li>
+				<li>click the arrow next to the <b>Insert Equation</b> <img alt="Insert Equation icon" src="../images/insertequationicon.png" /> icon at the top toolbar,</li>
+				<li>in the opened drop-down list select the equation category you need. The following categories are currently available: <em>Symbols</em>, <em>Fractions</em>, <em>Scripts</em>, <em>Radicals</em>, <em>Integrals</em>, <em>Large Operators</em>, <em>Brackets</em>, <em>Functions</em>, <em>Accents</em>, <em>Limits and Logarithms</em>, <em>Operators</em>, <em>Matrices</em>,</li>
+                <li>click the certain symbol/equation in the corresponding set of templates.</li>
+			</ol>
+            <p>The selected symbol/equation box will be inserted at the cursor position. If the selected line is empty, the equation will be centered. To align such an equation left or right, click on the equation box and use the <img alt="Align Left icon" src="../images/alignleft.png" /> or <img alt="Align Right icon" src="../images/alignright.png" /> icon at the top toolbar.</p>
+            <img alt="Inserted Equation" src="../images/insertedequation.png" />
+            <p>Each equation template represents a set of slots. Slot is a position for each element that makes up the equation. An empty slot (also called as a placeholder) has a dotted outline <img alt="Equation Placeholder" src="../images/equationplaceholder.png" />. You need to fill in all the placeholders specifying the necessary values.</p>
+            <p class="note"><b>Note</b>: to start creating an equation, you can also use the <b>Alt + =</b> keyboard shortcut.</p>
+            <h3>Enter values</h3>
+            <p>The <b>insertion point</b> specifies where the next character you enter will appear. To position the insertion point precisely, click within a placeholder and use the keyboard arrows to move the insertion point by one character left/right or one line up/down.</p>
+            <p>If you need to create a new placeholder below the slot with the insertion point within the selected template, press <b>Enter</b>.</p>
+            <img alt="Edited Equation" src="../images/newslot.png" />
+            <p>Once the insertion point is positioned, you can fill in the placeholder:
+            <ul>
+                <li>enter the desired numeric/literal value using the keyboard,</li>
+                <li>insert a special character using the <b>Symbols</b> palette from the <b>Insert Equation</b> <img alt="Insert Equation icon" src="../images/insertequationicon.png" /> menu on the top toolbar,</li>
+                <li>add another equation template from the palette to create a complex nested equation. The size of the primary equation will be automatically adjusted to fit its content. The size of the nested equation elements depends on the primary equation placeholder size, but it cannot be smaller than the sub-subscript size.</li>                
+            </ul>
+            </p>
+            <p><img alt="Edited Equation" src="../images/nestedfraction.png" /></p>
+            <p>To add some new equation elements you can also use the <b>right-click menu options</b>:</p>
+            <ul>
+                <li>To add a new argument that goes before or after the existing one within <em>Brackets</em>, you can right-click on the existing argument and select the <b>Insert argument before/after</b> option from the menu.</li>
+                <li>To add a new equation within <em>Cases</em> with several conditions from the <em>Brackets</em> group (or equations of other types, if you've previously added new placeholders by pressing <b>Enter</b>), you can right-click on an empty placeholder or entered equation within it and select the <b>Insert equation before/after</b> option from the menu.</li>
+                <li>To add a new row or a column in a <em>Matrix</em>, you can right-click on a placeholder within it, select the <b>Insert</b> option from the menu, then select <b>Row Above/Below</b> or <b>Column Left/Right</b>.</li>
+            </ul>
+            <p class="note"><b>Note</b>: currently, equations cannot be entered using the linear format, i.e. <b>\sqrt(4&x^3)</b>.</p>
+            <p>When entering the values of the mathematical expressions, you do not need to use <b>Spacebar</b> as the spaces between the characters and signs of operations are set automatically.</p>
+            <p>If the equation is too long and does not fit to a single line, automatic line breaking occurs as you type. You can also insert a line break in a specific position by right-clicking on a mathematical operator and selecting the <b>Insert manual break</b> option from the menu. The selected operator will start a new line. Once the manual line break is added, you can press the <b>Tab</b> key to align the new line to any math operator of the previous line. To delete the added manual line break, right-click on the mathematical operator that starts a new line and select the <b>Delete manual break</b> option.</p>
+            <h3>Format equations</h3>
+            <p>To increase or decrease the equation <b>font size</b>, click anywhere within the equation box and use the <img alt="Increment font size" src="../images/larger.png" /> and <img alt="Decrement font size" src="../images/smaller.png" /> buttons on the top toolbar or select the necessary font size from the list. All the equation elements will change correspondingly.</p>
+            <p>The letters within the equation are italicized by default. If necessary, you can change the <b>font style</b> (<em>bold, italic, strikeout</em>) or <b>color</b> for a whole equation or its part. The <em>underlined</em> style can be applied to the entire equation only, not to individual characters. Select the necessary part of the equation by clicking and dragging. The selected part will be highlighted blue. Then use the necessary buttons on the top toolbar to format the selection. For example, you can remove the italic format for ordinary words that are not variables or constants.</p>
+            <img alt="Edited Equation" src="../images/formatastext.png" />
+            <p>To modify some equation elements you can also use the <b>right-click menu options</b>:</p>
+            <ul><li>To change the <em>Fractions</em> format, you can right-click on a fraction and select the <b>Change to skewed/linear/stacked fraction</b> option from the menu (the available options differ depending on the selected fraction type). <!--The <b>Remove/Add fraction bar</b> option is also available for stacked fractions.--></li>
+                <li>To change the <em>Scripts</em> position relating to text, you can right-click on the equation that includes scripts and select the <b>Scripts before/after text</b> option from the menu.</li>
+                <li>To change the argument size for <em>Scripts, Radicals, Integrals, Large Operators, Limits and Logarithms, Operators</em> as well as for overbraces/underbraces and templates with grouping characters from the <em>Accents</em> group, you can right-click on the argument you want to change and select the <b>Increase/Decrease argument size</b> option from the menu.</li>
+                <li>To specify whether an empty degree placeholder should be displayed or not for a <em>Radical</em>, you can right-click on the radical and select the <b>Hide/Show degree</b> option from the menu.</li>
+                <li>To specify whether an empty limit placeholder should be displayed or not for an <em>Integral</em> or <em>Large Operator</em>, you can right-click on the equation and select the <b>Hide/Show top/bottom limit</b> option from the menu.</li>
+                <li>To change the limits position relating to the integral or operator sign for <em>Integrals</em> or <em>Large Operators</em>, you can right-click on the equation and select the <b>Change limits location</b> option from the menu. The limits can be displayed to the right of the operator sign (as subscripts and superscripts) or directly above and below the operator sign.</li>
+                <li>To change the limits position relating to text for <em>Limits and Logarithms</em> and templates with grouping characters from the <em>Accents</em> group, you can right-click on the equation and select the <b>Limit over/under text</b> option from the menu.</li>
+                <li>To choose which of the <em>Brackets</em> should be displayed, you can right-click on the expression within them and select the <b>Hide/Show opening/closing bracket</b> option from the menu.</li>
+                <li>To control the <em>Brackets</em> size, you can right-click on the expression within them. The <b>Stretch brackets</b> option is selected by default so that the brackets can grow according to the expression within them, but you can deselect this option to prevent brackets from stretching. When this option is activated, you can also use the <b>Match brackets to argument height</b> option.</li>
+                <li>To change the character position relating to text for overbraces/underbraces or overbars/underbars from the <em>Accents</em> group, you can right-click on the template and select the <b>Char/Bar over/under text</b> option from the menu.</li>
+                <li>To choose which borders should be displayed for a <em>Boxed formula</em> from the <em>Accents</em> group, you can right-click on the equation and select the <b>Border properties</b> option from the menu, then select <b>Hide/Show top/bottom/left/right border</b> or <b>Add/Hide horizontal/vertical/diagonal line</b>.</li>
+                <li>To specify whether empty placeholders should be displayed or not for a <em>Matrix</em>, you can right-click on it and select the <b>Hide/Show placeholder</b> option from the menu.</li>
+            </ul>
+            <p>To align some equation elements you can use the <b>right-click menu options</b>:</p>
+            <ul>
+                <li>To align equations within <em>Cases</em> with several conditions from the <em>Brackets</em> group (or equations of other types, if you've previously added new placeholders by pressing <b>Enter</b>), you can right-click on an equation, select the <b>Alignment</b> option from the menu, then select the alignment type: <b>Top</b>, <b>Center</b>, or <b>Bottom</b>.</li>
+                <li>To align a <em>Matrix</em> vertically, you can right-click on the matrix, select the <b>Matrix Alignment</b> option from the menu, then select the alignment type: <b>Top</b>, <b>Center</b>, or <b>Bottom</b>.</li>
+                <li>To align elements within a <em>Matrix</em> column horizontally, you can right-click on a placeholder within the column, select the <b>Column Alignment</b> option from the menu, then select the alignment type: <b>Left</b>, <b>Center</b>, or <b>Right</b>.</li>
+            </ul>
+            <h3>Delete equation elements</h3>
+            <p>To delete a part of the equation, select the part you want to delete by dragging the mouse or holding down the <b>Shift</b> key and using the arrow buttons, then press the <b>Delete</b> key on the keyboard.</p>
+            <p>A slot can only be deleted together with the template it belongs to.</p>
+            <p>To delete the entire equation, select it completely by dragging the mouse or double-clicking on the equation box and press the <b>Delete</b> key on the keyboard.</p>
+            <img alt="Delete Equation" src="../images/deleteequation.png" />
+            <p>To delete some equation elements you can also use the <b>right-click menu options</b>:</p>
+            <ul>
+                <li>To delete a <em>Radical</em>, you can right-click on it and select the <b>Delete radical</b> option from the menu.</li>
+                <li>To delete a <em>Subscript</em> and/or <em>Superscript</em>, you can right-click on the expression that contains them and select the <b>Remove subscript/superscript</b> option from the menu. If the expression contains scripts that go before text, the <b>Remove scripts</b> option is available.</li>
+                <li>To delete <em>Brackets</em>, you can right-click on the expression within them and select the <b>Delete enclosing characters</b> or <b>Delete enclosing characters and separators</b> option from the menu.</li>
+                <li>If the expression within <em>Brackets</em> inclides more than one argument, you can right-click on the argument you want to delete and select the <b>Delete argument</b> option from the menu.</li>
+                <li>If <em>Brackets</em> enclose more than one equation (i.e. <em>Cases</em> with several conditions), you can right-click on the equation you want to delete and select the <b>Delete equation</b> option from the menu. This option is also available for equations of other types if you've previously added new placeholders by pressing <b>Enter</b>.</li>
+                <li>To delete a <em>Limit</em>, you can right-click on it and select the <b>Remove limit</b> option from the menu.</li>
+                <li>To delete an <em>Accent</em>, you can right-click on it and select the <b>Remove accent character</b>, <b>Delete char</b> or <b>Remove bar</b> option from the menu (the available options differ depending on the selected accent).</li>
+                <li>To delete a row or a column of a <em>Matrix</em>, you can right-click on the placeholder within the row/column you need to delete, select the <b>Delete</b> option from the menu, then select <b>Delete Row/Column</b>.</li>
+            </ul>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertHeadersFooters.htm

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert headers and footers</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Insert headers and footers into your document, add different headers and footer to the first page or odd and even pages" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert headers and footers</h1>
+			<p>To add a header or footer to your document or edit the existing one,</p>
+			<ol>
+				<li>click the <b>Edit Header or Footer</b> <img alt="Edit Header or Footer icon" src="../images/headerfooter.png" /> icon at the top toolbar,</li>
+				<li>select one of the following options:
+					<ul>
+						<li><b>Edit Header</b> to insert or edit the header text.</li>
+						<li><b>Edit Footer</b> to insert or edit the footer text.</li>
+					</ul>
+				</li>
+				<li>change the current parameters for headers or footers at the right sidebar: 
+				<p><img alt="Right Sidebar - Header and Footer Settings" src="../images/right_headerfooter.png" /></p>
+				<ul>
+				<li>Set the <b>Position</b> of text relative to the top (for headers) or bottom (for footers) of the page.</li>
+				<li>Check the <b>Different first page</b> box to apply a different header or footer to the very first page or in case you don't want to add any header/ footer to it at all.</li>
+				<li>Use the <b>Different odd and even pages</b> box to add different headers/footer for odd and even pages.</li>
+				<li>The <b>Link to Previous</b> option is available in case you've previously added <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">sections</a> into your document. If not, it will be grayed out. Moreover, this option is also unavailable for the very first section (i.e. when a header or footer that belongs to the first section is selected). By default, this box is checked, so that the same headers/footers are applied to all the sections. If you select a header or footer area, you will see that the area is marked with the <b>Same as Previous</b> label. Uncheck the <b>Link to Previous</b> box to use different headers/footers for each section of the document. The <b>Same as Previous</b> label will no longer be displayed.</li>
+				</ul> 
+					<p><img alt="Same as previous label" src="../images/sameasprevious_label.png" /></p>
+				</li>
+			</ol>
+			<p>To enter a text or edit the already entered text and adjust the header or footer settings, you can also double-click within the upper or lower part of a page or click with the right mouse button there and select the only menu option - <b>Edit Header</b> or <b>Edit Footer</b>.</p>
+			<p>To switch to the document body, double-click within the working area. The text you use as a header or footer will be displayed in gray.</p>
+			<p class="note"><b>Note</b>: please refer to the <a href="InsertPageNumbers.htm" onclick="onhyperlinkclick(this)">Insert page numbers</a> section to learn how to add page numbers to your document.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertImages.htm

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert images</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Add an image to your document and adjust its position and properties" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert images</h1>
+			<p>In Document Editor, you can insert images in the most popular formats into your document. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
+            <h3>Insert an image</h3>
+            <p>To insert an image into the document text,</p>
+			<ol>
+				<li>place the cursor where you want the image to be put,</li>
+				<li>click the <b>Insert Image</b> <img alt="Insert Image icon" src="../images/image.png" /> icon at the top toolbar,</li>
+				<li>select one of the following options to load the image:
+					<ul>
+						<li>the <b>Picture from File</b> option will open the standard Windows dialog window for file selection. Browse your computer hard disk drive for the necessary file and click the <b>Open</b> button</li>
+						<li>the <b>Picture from URL</b> option will open the window where you can enter the necessary image web address and click the <b>OK</b> button</li>
+					</ul>
+				</li>
+				<li>once the image is added you can change its size, properties, and position.</li>
+			</ol>
+            <h3>Move and resize images</h3>
+			<p><img class="floatleft" alt="Moving image" src="../images/moving_image.png" />To change the image size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on its edges. To maintain the original proportions of the selected image while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
+			<p>To alter the image position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the image. Drag the image to the necessary position without releasing the mouse button.</p>
+			<p>When you move the image, guide lines are displayed to help you position the object on the page precisely (if a wrapping style other than inline is selected).</p>
+			<p>To rotate the image, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
+			<hr />
+            <h3>Adjust image settings</h3>
+			<p><img class="floatleft" alt="Image Settings tab" src="../images/right_image.png" />Some of the image settings can be altered using the <b>Image Settings</b> tab of the right sidebar. To activate it click the image and choose the <b>Image Settings</b> <img alt="Image Settings icon" src="../images/image_settings_icon.png" /> icon on the right. Here you can change the following properties:</p>
+			<ul style="margin-left: 280px;">
+				<li><b>Size</b> is used to view the current image <b>Width</b> and <b>Height</b> or restore the image <b>Default Size</b> if necessary.</li>
+				<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind (for more information see the advanced settings description below).</li>
+				<li><b>Replace Image</b> is used to replace the current image loading another one from file or URL.</li>
+			</ul>			
+			<p>Some of these options you can also find in the <b>right-click menu</b>. The menu options are:</p>
+			<ul style="margin-left: 280px;">
+                <li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
+				<li><b>Arrange</b> is used to bring the selected image to foreground, send to background, move forward or backward as well as group or ungroup images to perform operations with several of them at once.</li>
+				<li><b>Align</b> is used to align the image left, center, right, top, middle, bottom.</li>
+				<li><b>Wrapping Style</b> is used to select a text wrapping style from the available ones - inline, square, tight, through, top and bottom, in front, behind - or edit the wrap boundary. The <b>Edit Wrap Boundary</b> option is available only if you select a wrapping style other than Inline. Drag wrap points to customize the boundary. To create a new wrap point, click anywhere on the red line and drag it to the necessary position. <img alt="Editing Wrap Boundary" src="../images/wrap_boundary.png" /></li>
+				<li><b>Default Size</b> is used to change the current image size to the default one.</li>
+				<li><b>Image Advanced Settings</b> is used to open the 'Image - Advanced Settings' window.</li>
+			</ul>
+			<hr />
+			<p>To change its advanced settings, click the image with the right mouse button and select <b>Advanced Settings</b> from the right-click menu or just click the <b>Show advanced settings</b> link at the right sidebar. The image properties window will open:</p>
+			<p><img alt="Image - Advanced Settings: Size" src="../images/image_properties.png" /></p>
+			<p>The <b>Size</b> tab contains the following parameters:</p>
+			<ul>
+				<li><b>Width</b> and <b>Height</b> - use these options to change the image width and/or height. If the <b>Constant Proportions</b> <img alt="Constant Proportions icon" src="../images/constantproportions.png" /> button is clicked (in this case it looks like this <img alt="Constant Proportions icon activated" src="../images/constantproportionsactivated.png" />), the width and height will be changed together preserving the original image aspect ratio. To restore the default size of the added image, click the <b>Default Size</b> button.</li>
+			</ul>
+			<p><img alt="Image - Advanced Settings: Text Wrapping" src="../images/image_properties_1.png" /></p>
+			<p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
+			<ul>
+				<li><b>Wrapping Style</b> - use this option to change the way the image is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select one of the other styles).
+				<ul>
+				    <li><p><img alt="Wrapping Style - Inline" src="../images/wrappingstyle_inline.png" /> <b>Inline</b> - the image is considered to be a part of the text, like a character, so when the text moves, the image moves as well. In this case the positioning options are inaccessible.</p>
+				    <p>If one of the following styles is selected, the image can be moved independently of the text and positioned on the page exactly:</p>
+				    </li>
+				    <li><p><img alt="Wrapping Style - Square" src="../images/wrappingstyle_square.png" /> <b>Square</b> - the text wraps the rectangular box that bounds the image.</p></li>
+				    <li><p><img alt="Wrapping Style - Tight" src="../images/wrappingstyle_tight.png" /> <b>Tight</b> - the text wraps the actual image edges.</p></li>
+				    <li><p><img alt="Wrapping Style - Through" src="../images/wrappingstyle_through.png" /> <b>Through</b> - the text wraps around the image edges and fills in the open white space within the image. So that the effect can appear, use the <b>Edit Wrap Boundary</b> option from the right-click menu.</p></li>
+				    <li><p><img alt="Wrapping Style - Top and Bottom" src="../images/wrappingstyle_topandbottom.png" /> <b>Top and Bottom</b> - the text is only above and below the image.</p></li>
+				    <li><p><img alt="Wrapping Style - In Front" src="../images/wrappingstyle_infront.png" /> <b>In Front</b> - the image overlaps the text.</p></li>
+				    <li><p><img alt="Wrapping Style - Behind" src="../images/wrappingstyle_behind.png" /> <b>Behind</b> - the text overlaps the image.</p></li>
+				    </ul>
+				</li>
+			</ul>
+			<p>If you select the square, tight, through, or top and bottom style, you will be able to set up some additional parameters - <b>distance from text</b> at all sides (top, bottom, left, right).</p>
+			<p><img alt="Image - Advanced Settings: Position" src="../images/image_properties_2.png" /></p>
+			<p>The <b>Position</b> tab is available only if you select a wrapping style other than inline. This tab contains the following parameters that vary depending on the selected wrapping style:</p>
+			<ul>
+                <li>
+                    The <b>Horizontal</b> section allows you to select one of the following three image positioning types:
+                    <ul>
+                        <li><b>Alignment</b> (left, center, right) <b>relative to</b> character, column, left margin, margin, page or right margin,</li>
+                        <li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>to the right of</b> character, column, left margin, margin, page or right margin,</li>
+                        <li><b>Relative position</b> measured in percent <b>relative to</b> the left margin, margin, page or right margin.</li>
+                    </ul>
+                </li>
+                <li>
+                    The <b>Vertical</b> section allows you to select one of the following three image positioning types:
+                    <ul>
+                        <li><b>Alignment</b> (top, center, bottom) <b>relative to</b> line, margin, bottom margin, paragraph, page or top margin,</li>
+                        <li>Absolute <b>Position</b> measured in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) <b>below</b> line, margin, bottom margin, paragraph, page or top margin,</li>
+                        <li><b>Relative position</b> measured in percent <b>relative to</b> the margin, bottom margin, page or top margin.</li>
+                    </ul>
+                </li>
+                <li><b>Move object with text</b> controls whether the image moves as the text to which it is anchored moves.</li>
+				<li><b>Allow overlap</b> controls whether two images overlap or not if you drag them near each other on the page.</li>
+			</ul>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertPageNumbers.htm

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert page numbers</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Insert page numbers to navigate through your document easier" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert page numbers</h1>
+			<p>To insert page numbers into your document,</p>
+			<ol>
+				<li>click the <b>Edit Header or Footer</b> <img alt="Edit Header or Footer icon" src="../images/headerfooter.png" /> icon at the top toolbar,</li>
+				<li>choose the <b>Insert Page Number</b> submenu,</li>
+				<li>select one of the following options:
+					<ul>
+						<li>To put a page number to each page of your document, select the page number position on the page.</li>
+						<li>To insert a page number at the current cursor position, select the <b>To Current Position</b> option.</li>
+					</ul>
+				</li>
+			</ol>
+            <p>To insert the total number of pages in your document (e.g. if you want to create the <em>Page X of Y</em> entry):</p>
+            <ol>
+                <li>put the cursor where you want to insert the total number of pages,</li>
+                <li>click the <b>Edit Header or Footer</b> <img alt="Edit Header or Footer icon" src="../images/headerfooter.png" /> icon at the top toolbar,</li>
+                <li>select the <b>Insert number of pages</b> option.</li>
+            </ol>
+			<hr />
+			<p>To edit the page number settings,</p>
+			<ol>
+				<li>double-click the page number added,</li>
+				<li>change the current parameters at the right sidebar: 
+				<p><img alt="Right Sidebar - Header and Footer Settings" src="../images/right_headerfooter.png" /></p>
+				<ul>
+				<li>Set the <b>Position</b> of page numbers on the page as well as relative to the top and bottom of the page.</li>
+				<li>Check the <b>Different first page</b> box to apply a different page number to the very first page or in case you don't want to add any number to it at all. </li>
+				<li>Use the <b>Different odd and even pages</b> box to insert different page numbers for odd and even pages. </li>
+				<li>The <b>Link to Previous</b> option is available in case you've previously added <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">sections</a> into your document. If not, it will be grayed out. Moreover, this option is also unavailable for the very first section (i.e. when a header or footer that belongs to the first section is selected). By default, this box is checked, so that unified numbering is applied to all the sections. If you select a header or footer area, you will see that the area is marked with the <b>Same as Previous</b> label. Uncheck the <b>Link to Previous</b> box to use different page numbering for each section of the document, for example, to start each section numbering at 1. The <b>Same as Previous</b> label will no longer be displayed.</li>
+				</ul>
+				<p><img alt="Same as previous label" src="../images/sameasprevious_label.png" /></p>
+				</li>
+			</ol>
+			<p>To return to the document editing, double-click within the working area.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertTables.htm

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert tables</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Add a table to your document and adjust its properties" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert tables</h1>
+            <h3>Insert a table</h3>
+			<p>To insert a table into the document text,</p>
+			<ol>
+				<li>place the cursor where you want the table to be put,</li>
+				<li>click the <b>Insert Table</b> <img alt="Insert Table icon" src="../images/table.png" /> icon at the top toolbar,</li>
+				<li>select the option to create a table:
+					<ul>
+						<li><p>either a table with predefined number of cells (10 by 8 cells maximum)</p>
+						<p>If you want to quickly add a table, just select the number of rows (8 maximum) and columns (10 maximum).</p></li>
+						<li><p>or a custom table</p>
+						<p>In case you need more than 10 by 8 cell table, select the <b>Insert Custom Table</b> option that will open the window where you can enter the necessary number of rows and columns respectively, then click the <b>OK</b> button.</p>
+						<p><img alt="Custom table" src="../images/customtable.png" /></p>
+						</li>
+					</ul>
+				</li>
+				<li>once the table is added you can change its properties and position.</li>
+			</ol>
+			<hr />
+            <h3>Adjust table settings</h3>
+			<p>Some of the table properties as well as its structure can be altered using the right-click menu. The menu options are:</p>
+			<ul>
+				<li><b>Cut, Copy, Paste</b> - standard options which are used to cut or copy a selected text/object and paste a previously cut/copied text passage or object to the current cursor position.</li>
+                <li><b>Select</b> is used to select a row, column, cell, or table.</li>
+				<li><b>Insert</b> is used to insert a row above or row below the row where the cursor is placed as well as to insert a column at the left or right side from the column where the cursor is placed.</li>
+				<li><b>Delete</b> is used to delete a row, column or table.</li>
+				<li><b>Merge Cells</b> is available if two or more cells are selected and is used to merge them.</li>
+				<li><b>Split Cell...</b> is used to open a window where you can select the needed number of columns and rows the cell will be split in.</li>
+				<li><b>Cell Vertical Alignment</b> is used to align the text top, center or bottom in the selected cell.</li>
+                <li><b>Text Direction</b> - is used to change the text orientation in a cell. You can place the text horizontally, vertically from top to bottom (<b>Rotate at 90°</b>), or vertically from bottom to top (<b>Rotate at 270°</b>).</li>
+				<li><b>Wrapping Style - Inline</b> is used to select the inline style (when the text is broken by the table) as well as the alignment: left, center, right.</li>
+				<li><b>Wrapping Style - Flow</b> is used to select the flow style when the text is wrapped around the table.</li>
+				<li><b>Table Advanced Settings</b> is used to open the 'Table - Advanced Settings' window.</li>
+				<li><b>Hyperlink</b> is used to insert a hyperlink.</li>
+				<li><b>Paragraph Advanced Settings</b> is used to open the 'Paragraph - Advanced Settings' window.</li>
+			</ul>
+			<hr />
+			<p><img class="floatleft"alt="Right Sidebar - Table Settings" src="../images/right_table.png" /></p>
+			<p>You can also change the table properties at the right sidebar:</p>
+			<ul style="margin-left: 280px;">
+				<li><p><b>Rows</b> and <b>Columns</b> are used to select the table parts that you want to be highlighted.</p>
+					<p>For rows:</p>
+					<ul>
+						<li><i>Header</i> - to highlight the first row</li>
+						<li><i>Total</i> - to highlight the last row</li>
+						<li><i>Banded</i> - to highlight every other row</li>
+					</ul>
+					<p>For columns:</p>
+					<ul>
+						<li><i>First</i> - to highlight the first column</li>
+						<li><i>Last</i> - to highlight the last column</li>
+						<li><i>Banded</i> - to highlight every other column</li>
+					</ul>
+				</li>
+				<li><p><b>Select from Template</b> is used to choose a table template from the available ones.</p></li>
+				<li><p><b>Borders Style</b> is used to select the border size, color, style as well as background color.</p></li>
+				<li><p><b>Text Wrapping</b> is used to select between two text wrapping styles - inline and flow.</p></li>
+				<li><p><b>Rows &amp; Columns</b> is used to perform some operations with the table: select, delete, insert rows and columns, merge cells, split a cell.</p></li>
+				<li><p><b>Repeat as header row at the top of each page</b> is used to insert the same header row at the top of each page in long tables.</p></li>
+				<li><p><b>Show advanced settings</b> is used to open the 'Table - Advanced Settings' window.</p></li>
+			</ul>
+			<hr />
+			<p>To change the advanced table properties, click the table with the right mouse button and select the <b>Table Advanced Settings</b> option from the right-click menu or use the <b>Show advanced settings</b> link at the right sidebar. The table properties window will open:</p>
+            <p><img alt="Table - Advanced Settings" src="../images/table_properties_1.png" /></p>
+            <p>The <b>Table</b> tab allows to change properties of the entire table.</p>
+            <ul>
+                <li>The <b>Table Size</b> section contains the following parameters:
+                <ul>
+                    <li>
+                        <b>Width</b> - by default, the table width is automatically adjusted to fit the page width, i.e. the table occupies all the space between the left and right page margin. You can check this box and specify the necessary table width manually.
+                    </li>
+                    <li><b>Measure in</b> - allows to specify if you want to set the table width in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) or in <b>Percent</b> of the overall page width.
+                        <p class="note"><b>Note</b>: you can also adjust the table size manually changing the row height and column width. Move the mouse cursor over a row/column border until it turns into the bidirectional arrow and drag the border. You can also use the <img alt="Table - Column Width Marker" src="../images/columnwidthmarker.png" /> markers on the horizontal ruler to change the column width and the <img alt="Table - Row Height Marker" src="../images/rowheightmarker.png" /> markers on the vertical ruler to change the row height.</p>
+                    </li>
+                    <li><b>Automatically resize to fit contents</b> - enables automatic change of each column width in accordance with the text within its cells.</li>
+                </ul>
+                </li>
+                <li>The <b>Default Cell Margins</b> section allows to change the space between the text within the cells and the cell border used by default.</li>
+                <li>The <b>Options</b> section allows to change the following parameter:
+                <ul>
+                    <li><b>Spacing between cells</b> - the cell spacing which will be filled with the <b>Table Background</b> color.</li>
+                </ul>
+                </li>
+            </ul>
+            <p><img alt="Table - Advanced Settings" src="../images/table_properties_5.png" /></p>
+            <p>The <b>Cell</b> tab allows to change properties of individual cells. First you need to select the cell you want to apply the changes to or select the entire table to change properties of all its cells.</p>
+            <ul>
+                <li>
+                    The <b>Cell Size</b> section contains the following parameters:
+                    <ul>
+                        <li><b>Preferred width</b> - allows to set a preferred cell width. This is the size that a cell strives to fit to, but in some cases it may not be possible to fit to this exact value. For example, if the text within a cell exceeds the specified width, it will be broken into the next line so that the preferred cell width remains unchanged, but if you insert a new column, the preferred width will be reduced.</li>
+                        <li><b>Measure in</b> - allows to specify if you want to set the cell width in absolute units i.e. <b>Centimeters</b>/<b>Points</b>/<b>Inches</b> (depending on the option specified at the <b>File</b> -> <b>Advanced Settings...</b> tab) or in <b>Percent</b> of the overall table width.
+                            <p class="note"><b>Note</b>: you can also adjust the cell width manually. To make a single cell in a column wider or narrower than the overall column width, select the necessary cell and move the mouse cursor over its right border until it turns into the bidirectional arrow, then drag the border. To change the width of all the cells in a column, use the <img alt="Table - Column Width Marker" src="../images/columnwidthmarker.png" /> markers on the horizontal ruler to change the column width.</p>
+                        </li>
+                    </ul>
+                </li>
+                <li>The <b>Cell Margins</b> section allows to adjust the space between the text within the cells and the cell border. By default, standard values are used (the default values can also be altered at the <b>Table</b> tab), but you can uncheck the <b>Use default margins</b> box and enter the necessary values manually.</li>
+                <li>
+                    The <b>Cell Options</b> section allows to change the following parameter:
+                    <ul>
+                        <li>The <b>Wrap text</b> option is enabled by default. It allows to wrap text within a cell that exceeds its width onto the next line expanding the row height and keeping the column width unchanged.</li>
+                    </ul>
+                </li>
+            </ul>
+            <p><img alt="Table - Advanced Settings" src="../images/table_properties_3.png" /></p>
+            <p>The <b>Borders &amp; Background</b> tab contains the following parameters:</p>
+            <ul>
+                <li>
+                    <b>Border</b> parameters (size, color and presence or absence) - set the border size, select its color and choose the way it will be displayed in the cells.
+                    <p class="note">
+                        <b>Note</b>: in case you select not to show table borders clicking the <img alt="No borders" src="../images/noborders.png" /> button or deselecting all the borders manually on the diagram, they will be indicated by a dotted line in the document.
+                        To make them disappear at all, click the <b>Nonprinting Characters</b> <img alt="Nonprinting Characters" src="../images/nonprintingcharacters.png" /> icon at the top toolbar and select the <b>Hidden Table Borders</b> option.
+                    </p>
+                </li>
+                <li><b>Cell Background</b> - the color for the background within the cells (available only if one or more cells are selected or the <b>Allow spacing between cells</b> option is selected at the <b>Table</b> tab).</li>
+                <li><b>Table Background</b> - the color for the table background or the space background between the cells in case the <b>Allow spacing between cells</b> option is selected at the <b>Table</b> tab.</li>
+            </ul>
+            <p><img alt="Table - Advanced Settings" src="../images/table_properties_4.png" /></p>
+			<p>The <b>Table Position</b> tab is available only if the <b>Flow</b> option at the <b>Text Wrapping</b> tab is selected and contains the following parameters:</p>
+			<ul>
+				<li><b>Horizontal</b> parameters include the table <b>alignment</b> (left, center, right) <b>relative to</b> margin, page or text as well as the table <b>position to the right of</b> margin, page or text.</li>
+				<li><b>Vertical</b> parameters include the table <b>alignment</b> (top, center, bottom) <b>relative to</b> margin, page or text as well as the table <b>position below</b> margin, page or text.</li>
+				<li>The <b>Options</b> section allows to change the following parameters: 
+                <ul>
+                    <li><b>Move object with text</b> controls whether the table moves as the text into which it is inserted moves.</li>
+                    <li><b>Allow overlap</b> controls whether two tables are merged into one large table or overlap if you drag them near each other on the page.</li>
+                </ul>
+                </li>                
+			</ul>            
+            <p><img alt="Table - Advanced Settings" src="../images/table_properties_2.png" /></p>
+            <p>The <b>Text Wrapping</b> tab contains the following parameters:</p>
+            <ul>
+                <li>Text <b>wrapping style</b> - <b>Inline</b> or <b>Flow</b>. Use the necessary option to change the way the table is positioned relative to the text: it will either be a part of the text (in case you select the inline style) or bypassed by it from all sides (if you select the flow style).</li>
+                <li>
+                    After you select the wrapping style, the additional wrapping parameters can be set both for inline and flow wrapping style:
+                    <ul>
+                        <li>For the inline style, you can specify the table <b>alignment</b> and <b>indent from left</b>.</li>
+                        <li>For the flow style, you can specify the <b>distance from text</b> and table <b>position</b> at the <b>Table Position</b> tab.</li>
+                    </ul>
+                </li>
+            </ul>
+            
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/InsertTextObjects.htm

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert text objects</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Insert text objects such as text boxes and Text Art to make your text more impressive" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert text objects</h1>
+            <p>To make your text more emphatic and draw attention to a specific part of the document, you can insert a text box (a rectangular frame that allows to enter text within it) or a Text Art object (a text box with a predefined font style and color that allows to apply some text effects).</p>
+			<h3>Add a text object</h3>
+            <p>You can add a text object anywhere on the page. To do that:</p>
+            <ol>
+                <li>click the <b>Insert Text</b> <img alt="Insert Text icon" src="../images/inserttexticon.png" /> icon at the top toolbar,</li>
+                <li>select the necessary text object type:
+                <ul>
+                    <li>select the <b>Insert text box</b> option from the menu, then click where you want to insert the text box, hold the mouse button and drag the text box border to specify its size. When you release the mouse button, the insertion point will appear in the added text box, allowing you to enter your text.
+                        <p class="note"><b>Note</b>: it's also possible to insert a text box by clicking the <b>Insert Autoshape</b> <img alt="Insert Autoshape icon" src="../images/insertautoshape.png" /> icon at the top toolbar and selecting the <img alt="Insert Text autoshape" src="../images/text_autoshape.png" /> shape from the <b>Basic Shapes</b> group.</p>
+                    </li>
+                    <li>select the <b>Insert Text Art</b> option from the menu, then click on the desired style template – the Text Art object will be added at the current cursor position. Select the default text within the text box with the mouse and replace it with your own text.</li>
+                </ul>
+                </li>
+                <li>click outside of the text object to apply the changes and return to the document.</li>
+            </ol>
+            <p>The text within the text object is a part of the latter (when you move or rotate the text object, the text moves or rotates with it).</p>
+            <p>As an inserted text object represents a rectangular frame with text in it (Text Art objects have invisible text box borders by default) and this frame is a common autoshape, you can change both the shape and text properties.</p>
+            <p>To delete the added text object, click on the text box border and press the <b>Delete</b> key on the keyboard. The text within the text box will also be deleted.</p>
+            <h3>Format a text box</h3>
+            <p>Select the text box clicking on its border to be able to change its properties. When the text box is selected, its borders are displayed as solid (not dashed) lines.</p>
+            <p><img alt="Text box selected" src="../images/textbox_boxselected.png" /></p>
+            <ul>
+                <li>to <a href="../UsageInstructions/InsertAutoshapes.htm#shape_resize" onclick="onhyperlinkclick(this)">resize, move, rotate</a> the text box use the special handles on the edges of the shape.</li>
+                <li>to edit the text box <a href="../UsageInstructions/InsertAutoshapes.htm#shape_fill" onclick="onhyperlinkclick(this)">fill</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)">stroke</a>, <a href="../UsageInstructions/InsertAutoshapes.htm#shape_wrapping" onclick="onhyperlinkclick(this)">wrapping style</a> or <b>replace</b> the rectangular box with a different shape, click the <b>Shape Settings</b> <img alt="Shape Settings icon" src="../images/shape_settings_icon.png" /> icon on the right sidebar and use the corresponding options.</li>                
+                <li>to <b>align</b> the text box on the page, <b>arrange</b> text boxes as related to other objects, change a <b>wrapping style</b> or access the shape <b>advanced settings</b>, right-click on the text box border and use the <a href="../UsageInstructions/InsertAutoshapes.htm#shape_rightclickmenu" onclick="onhyperlinkclick(this)">contextual menu options</a>.</li>
+            </ul>
+            <h3>Format the text within the text box</h3>
+            <p>Click the text within the text box to be able to change its properties. When the text is selected, the text box borders are displayed as dashed lines.</p>
+            <p><img alt="Text selected" src="../images/textbox_textselected.png" /></p>
+            <p class="note"><b>Note</b>: it's also possible to change text formatting when the text box (not the text itself) is selected. In such a case, any changes will be applied to all the text within the text box. Some font formatting options (font type, size, color and decoration styles) can be applied to a previously selected portion of the text separately.</p>
+            <p>To <b>rotate</b> the text within the text box, right-click the text, select the <b>Text Direction</b> option and then choose one of the available options: <b>Horizontal</b> (is selected by default), <b>Rotate at 90°</b> (sets a vertical direction, from top to bottom) or <b>Rotate at 270°</b> (sets a vertical direction, from bottom to top).</p>
+            <p>To <b>align the text vertically</b> within the text box, right-click the text, select the <b>Vertical Alignment</b> option and then choose one of the available options: <b>Align Top</b>, <b>Align Center</b> or <b>Align Bottom</b>.</p>
+            <p>Other formatting options that you can apply are the same as the ones for regular text. Please refer to the corresponding help sections to learn more about the necessary operation. You can:</p>
+            <ul>
+                <li><a href="../UsageInstructions/AlignText.htm" onclick="onhyperlinkclick(this)">align the text horizontally</a> within the text box</li>
+                <li>adjust the <a href="../UsageInstructions/FontTypeSizeColor.htm" onclick="onhyperlinkclick(this)">font type, size, color</a>, apply <a href="../UsageInstructions/DecorationStyles.htm" onclick="onhyperlinkclick(this)">decoration styles</a> and <a href="../UsageInstructions/FormattingPresets.htm" onclick="onhyperlinkclick(this)">formatting presets</a></li>
+                <li>set <a href="../UsageInstructions/LineSpacing.htm" onclick="onhyperlinkclick(this)">line spacing</a>, change <a href="../UsageInstructions/ParagraphIndents.htm" onclick="onhyperlinkclick(this)">paragraph indents</a>, adjust <a href="../UsageInstructions/SetTabStops.htm" onclick="onhyperlinkclick(this)">tab stops</a> for the multi-line text within the text box</li>
+                <li>insert a <a href="../UsageInstructions/AddHyperlinks.htm" onclick="onhyperlinkclick(this)">hyperlink</a></li>
+            </ul>
+            <p>You can also click the <b>Text Art Settings</b> <img alt="Text Art Settings icon" src="../images/textart_settings_icon.png" /> icon on the right sidebar and change some style parameters.</p>
+            <h3>Edit a Text Art style</h3>
+            <p>Select a text object and click the <b>Text Art Settings</b> <img alt="Text Art Settings icon" src="../images/textart_settings_icon.png" /> icon on the right sidebar.</p>
+            <p><img alt="Text Art Setting tab" src="../images/right_textart.png" /></p>
+            <p>Change the applied text style selecting a new <b>Template</b> from the gallery. You can also change the basic style additionally by selecting a different font type, size etc.</p>
+            <p>Change the font <b>Fill</b>. You can choose the following options:</p>
+            <ul>
+                <li>
+                    <b>Color Fill</b> - select this option to specify the solid color you want to fill the inner space of letters with.
+                    <p><img alt="Color Fill" src="../images/fill_color.png" /></p>
+                    <p id="color">Click the colored box below and select the necessary color from the available <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">color sets</a> or specify any color you like:</p>
+                </li>
+                <li>
+                    <b>Gradient Fill</b> - select this option to fill the letters with two colors which smoothly change from one to another.
+                    <p><img alt="Gradient Fill" src="../images/fill_gradient.png" /></p>
+                    <ul>
+                        <li><b>Style</b> - choose one of the available options: <b>Linear</b> (colors change in a straight line i.e. along a horizontal/vertical axis or diagonally at a 45 degree angle) or <b>Radial</b> (colors change in a circular path from the center to the edges).</li>
+                        <li><b>Direction</b> - choose a template from the menu. If the <b>Linear</b> gradient is selected, the following directions are available: top-left to bottom-right, top to bottom, top-right to bottom-left, right to left, bottom-right to top-left, bottom to top, bottom-left to top-right, left to right. If the <b>Radial</b> gradient is selected, only one template is available.</li>
+                        <li><b>Gradient</b> - click on the left slider <img alt="Slider" src="../images/gradientslider.png" /> under the gradient bar to activate the color box which corresponds to the first color. Click on the color box on the right to choose the first color in the palette. Drag the slider to set the gradient stop i.e. the point where one color changes into another. Use the right slider under the gradient bar to specify the second color and set the gradient stop.</li>
+                    </ul>
+                    <p class="note"><b>Note</b>: if one of these two options is selected, you can also set an <b>Opacity</b> level dragging the slider or entering the percent value manually. The default value is <b>100%</b>. It corresponds to the full opacity. The <b>0%</b> value corresponds to the full transparency.</p>
+                </li>
+                <li><b>No Fill</b> - select this option if you don't want to use any fill.</li>
+            </ul>
+            <p>Adjust the font <b>Stroke</b> width, color and type.</p>
+            <ul>
+                <li>To change the stroke width, select one of the available options from the <b>Size</b> dropdown list. The available options are: 0.5 pt, 1 pt, 1.5 pt, 2.25 pt, 3 pt, 4.5 pt, 6 pt. Alternatively, select the <b>No Line</b> option if you don't want to use any stroke.</li>
+                <li>To change the stroke <b>color</b>, click on the colored box below and <a href="../UsageInstructions/ChangeColorScheme.htm" onclick="onhyperlinkclick(this)">select the necessary color</a>.</li>
+                <li>To change the stroke <b>type</b>, select the necessary option from the corresponding dropdown list (a solid line is applied by default, you can change it to one of the available dashed lines).</li>
+            </ul>
+            <p>Apply a text effect by selecting the necessary text transformation type from the <b>Transform</b> gallery. You can adjust the degree of the text distortion by dragging the pink diamond-shaped handle.</p>
+            <p><img alt="Text Art Transformation" src="../images/textart_transformation.png" /></p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/LineSpacing.htm

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Set paragraph line spacing</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Set paragraph line spacing in your document" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Set paragraph line spacing</h1>
+			<p>In Document Editor, you can set the line height for the text lines within the paragraph as well as the margins between the current and the preceding or the subsequent paragraph.</p>
+			<p>To do that,</p>
+			<ol>
+				<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
+				<li>use the corresponding fields at the right sidebar to achieve the desired results:
+					<ul>
+						<li><b>Line Spacing</b> - set the line height for the text lines within the paragraph. You can select among three options: <b>at least</b> (sets the minimum line spacing that is needed to fit the largest font or graphic on the line), <b>multiple</b> (sets line spacing that can be expressed in numbers greater than 1), <b>exactly</b> (sets fixed line spacing). You can specify the necessary value in the field on the right.</li>
+						<li><b>Paragraph Spacing</b> - set the amount of space between paragraphs.
+                            <ul>
+                                <li><b>Before</b> - set the amount of space before the paragraph.</li>
+                                <li><b>After</b> - set the amount of space after the paragraph.</li>
+                                <li>
+                                    <b>Don't add interval between paragraphs of the same style</b> - check this box in case you don't need any space between paragraphs of the same style.
+                                    <p><img alt="Right Sidebar - Paragraph Settings" src="../images/right_paragraph.png" /></p>
+                                </li>
+                            </ul>
+                        </li>                        
+					</ul>
+				</li>
+			</ol>
+			<p>To quickly change the current paragraph line spacing, you can also use the <b>Paragraph Line Spacing</b> <img alt="Paragraph Line Spacing" src="../images/linespacing.png" /> icon at the top toolbar selecting the needed value from the list: 1.0, 1.15, 1.5, 2.0, 2.5, or 3.0 lines.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/NonprintingCharacters.htm

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Show/hide nonprinting characters</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Show or hide nonprinting characters while formatting text, creating tables, and editing documents" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Show/hide nonprinting characters</h1>
+			<p>Nonprinting characters help you edit a document. They indicate the presence of various types of formatting, but they do not print with the document, even when they are displayed on the screen.</p>
+			<p>To show or hide nonprinting characters, click the <b>Nonprinting Characters</b> <img alt="Nonprinting Characters" src="../images/nonprintingcharacters.png" /> icon at the top toolbar.</p>
+			<p>Nonprinting characters include:</p>
+			<table>
+				<tr>
+					<td>Spaces</td>
+					<td><img alt="Space" src="../images/space.png" /></td>
+					<td>Inserted when you press the <b>Spacebar</b> on the keyboard. It creates a space between characters.</td>
+				</tr>
+				<tr>
+					<td>Tabs</td>
+					<td><img alt="Tab" src="../images/tab.png" /></td>
+					<td>Inserted when you press the <b>Tab</b> key. It's used to advance the cursor to the next tab stop.</td>
+				</tr>
+				<tr>
+					<td>Paragraph marks (i.e. hard returns)</td>
+					<td><img alt="Hard return" src="../images/hard.png" /></td>
+					<td>Inserted when you press the <b>Enter</b> key. It ends a paragraph and adds a bit of space after it. It contains information about the paragraph formatting.</td>
+				</tr>
+				<tr>
+					<td>Line breaks (i.e. soft returns)</td>
+					<td><img alt="Soft return" src="../images/soft.png" /></td>
+					<td>Inserted when you use the <b>Shift+Enter</b> key combination. It breaks the current line and puts lines of text close together. Soft return is primarily used in titles and headings.</td>
+				</tr>
+				<tr>
+					<td>Nonbreaking spaces</td>
+					<td><img alt="Nonbreaking space" src="../images/nonbreakspace.png" /></td>
+					<td>Inserted when you use the <b>Ctrl+Shift+Spacebar</b> key combination. It creates a space between characters which can't be used to start a new line.</td>
+				</tr>
+				<tr>
+					<td>Page breaks</td>
+					<td><img alt="Page break" src="../images/pagebreak.png" /></td>
+					<td>Inserted when you use the <b>Insert Page or Section Break</b> <img alt="Insert Page or Section Break" src="../images/pagebreak1.png" /> icon at the top toolbar and then select the <b>Insert Page Break</b> option, or select the <b>Page break before</b> option in the right-click menu or advanced settings window.</td>
+				</tr>
+				<tr>
+					<td>Section breaks</td>
+					<td><img alt="Section break" src="../images/sectionbreak.png" /></td>
+					<td>Inserted when you use the <b>Insert Page or Section Break</b> <img alt="Insert Page or Section Break" src="../images/pagebreak1.png" /> icon at the top toolbar and then select one of the <b>Insert Section Break</b> submenu options (the section break indicator differs depending on which option is selected: Next Page, Continuous Page, Even Page or Odd Page).</td>
+				</tr>
+                <tr>
+                    <td>Column breaks</td>
+                    <td><img alt="Column break" src="../images/columnbreak.png" /></td>
+                    <td>Inserted when you use the <b>Insert Page or Section Break</b> <img alt="Insert Page or Section Break" src="../images/pagebreak1.png" /> icon at the top toolbar and then select the <b>Insert Column Break</b> option.</td>
+                </tr>
+				<tr>
+					<td>End-of-cell and end-of row markers in tables</td>
+					<td><img alt="Markers in tables" src="../images/cellrow.png" /></td>
+					<td>These markers contain formatting codes for the individual cell and row, respectively.</td>
+				</tr>
+				<tr>
+					<td>Small black square in the margin to the left of a paragraph</td>
+					<td><img alt="Black square" src="../images/square.png" /></td>
+					<td>It indicates that at least one of the paragraph options was applied, e.g. <b>Keep lines together</b>, <b>Page break before</b>.</td>
+				</tr>
+				<tr>
+					<td>Anchor symbols</td>
+					<td><img alt="Anchor symbol" src="../images/anchor.png" /></td>
+					<td>They indicate the position of floating objects (those with a wrapping style other than <b>Inline</b>), e.g. images, autoshapes, charts. You should select an object to make its anchor visible.</td>
+				</tr>
+			</table>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/OpenCreateNew.htm

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Create a new document or open an existing one</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Open a recently edited document, create a new one, or return to the list of existing documents" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Create a new document or open an existing one</h1>
+			<p>After you finished working at one document, you can immediately proceed to an already existing document that you have recently edited, create a new one, or return to the list of existing documents.</p>
+			<p>To create a new document,</p>
+			<ol>
+				<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
+				<li>select the <b>Create New...</b> option. <!--Here you can choose whether to create a <b>blank</b> text document or use one of the available document <b>templates</b>: contract, letter, list, or plan.--></li>
+			</ol>
+			<p>To open a recently edited document within Document Editor,</p>
+			<ol>
+				<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
+				<li>select the <b>Open Recent...</b> option,</li>
+				<li>choose the document you need from the list of recently edited documents.</li>
+			</ol>
+			<p>To return to the list of existing documents, click the <b>Go to Documents</b> link in the right upper corner or the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Go to Documents</b> option.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/PageBreaks.htm

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert page breaks</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Insert page breaks and keep lines together" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert page breaks</h1>
+			<p>In Document Editor, you can add the page break to start a new page and adjust pagination options.</p>
+			<p>To insert a page break at the current cursor position click the <b>Insert Page or Section break</b> <img alt="Insert Page or Section break" src="../images/pagebreak1.png" /> icon at the top toolbar or click the arrow next to this icon and select the <b>Insert Page Break</b> option from the menu.</p>
+			<p>To insert a page break before the selected paragraph i.e. to start this paragraph at the top of a new page:</p>
+			<ul>
+				<li>click the right mouse button and select the <b>Page break before</b> option in the menu, or</li>
+				<li>click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and check the <b>Page break before</b> box in the opened <b>Paragraph - Advanced Settings</b> window.
+				</li>
+			</ul>
+			<p>To keep lines together so that only whole paragraphs will be moved to the new page (i.e. there will be no page break between the lines within a single paragraph),</p>
+			<ul>
+				<li>click the right mouse button and select the <b>Keep lines together</b> option in the menu, or</li>
+				<li>click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and check the <b>Keep lines together</b> box in the opened <b>Paragraph - Advanced Settings</b> window.</li>
+			</ul>
+			<p>The <b>Paragraph - Advanced Settings</b> window allows you to set two more pagination options:</p>
+			<ul>
+			    <li><b>Keep with next</b> - is used to prevent a page break between the selected paragraph and the next one.</li>
+			    <li><b>Orphan control</b> - is selected by default and used to prevent a single line of the paragraph (the first or last) from appearing at the top or bottom of the page.</li>
+			</ul>
+			<p><img alt="Paragraph Advanced Settings - Indents &amp; Placement" src="../images/paradvsettings_indents.png" /></p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/ParagraphIndents.htm

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Change paragraph indents</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Change paragraph indents: the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Change paragraph indents</h1>
+			<p>In Document Editor, you can change the first line offset from the left part of the page as well as the paragraph offset from the left and right sides of the page.</p>
+			<p>To do that,</p>
+			<ol>
+				<li>put the cursor within the paragraph you need, or select several paragraphs with the mouse or all the text in the document by pressing the <b>Ctrl+A</b> key combination,</li>
+				<li>click the right mouse button and select the <b>Paragraph Advanced Settings</b> option from the menu or use the <b>Show advanced settings</b> link at the right sidebar,</li>
+				<li>in the opened <b>Paragraph - Advanced Settings</b> window, set the needed indent for the <b>first line</b> and paragraph offset from the <b>left</b> and <b>right</b> sides of the page,</li>
+				<li>click the <b>OK</b> button.
+					<p><img alt="Paragraph Advanced Settings - Indents &amp; Placement" src="../images/paradvsettings_indents.png" /></p>
+				</li>
+			</ol>
+			<p>To quickly change the paragraph offset from the left side of the page, you can also use the respective icons at the top toolbar: <b>Decrease Indent</b> <img alt="Decrease Indent" src="../images/decreaseindent.png" /> and <b>Increase Indent</b> <img alt="Increase Indent" src="../images/increaseindent.png" />.</p>
+			<p>You can also use the horizontal <b>ruler</b> to set indents.</p>
+			<img alt="Ruler - Indent markers" src="../images/indents_ruler.png" />
+			<p>Select the necessary paragraph(s) and drag the indent markers along the ruler.</p>
+			<ul>
+			<li><b>First Line Indent</b> marker <img alt="First Line Indent marker" src="../images/firstline_indent.png" /> is used to set the offset from the left side of the page for the first line of the paragraph.</li>
+			<li><b>Hanging Indent</b> marker <img alt="Hanging Indent marker" src="../images/hanging.png" /> is used to set the offset from the left side of the page for the second and all the subsequent lines of the paragraph.</li>
+			<li><b>Right Indent</b> marker <img alt="Right Indent marker" src="../images/right_indent.png" /> is used to set the paragraph offset from the right side of the page.</li>
+			</ul>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/SavePrintDownload.htm

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Save/download/print your document</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Save, download and print your documents in various formats" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Save/<span class="onlineDocumentFeatures">download/</span>print your document</h1>
+			<p>By default, <b>Document Editor</b> automatically saves your file each 2 seconds when you work on it preventing your data loss in case of the unexpected program closing.<span class="onlineDocumentFeatures"> If you co-edit the file in the <b>Fast</b> mode, the timer requests for updates 25 times a second and saves the changes if they have been made. When the file is being co-edited in the <b>Strict</b> mode, changes are automatically saved at 10-minute intervals. If you need, you can easily select the preferred co-editing mode or disable the <b>Autosave</b> feature on the <a href="../HelpfulHints/AdvancedSettings.htm" onclick="onhyperlinkclick(this)">Advanced Settings</a> page.</span></p>
+			<p>To save your current document manually,</p>
+			<ul>
+				<li>press the <b>Save</b> <img alt="Save icon" src="../images/save.png" /> icon at the top toolbar, or</li>
+				<li>use the <b>Ctrl+S</b> key combination, or</li>
+				<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Save</b> option.</li>
+			</ul>
+			<div class="onlineDocumentFeatures">
+			<p>To download the resulting document onto your computer hard disk drive,</p>
+			<ol>
+				<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar,</li>
+				<li>select the <b>Download as...</b> option,</li>
+				<li>choose one of the available formats depending on your needs: PDF, TXT, DOCX, ODT, HTML.</li>
+			</ol>
+			</div>
+			<p>To print out the current document,</p>
+			<ul>
+				<li>click the <b>Print</b> <img alt="Print icon" src="../images/print.png" /> icon at the top toolbar, or</li>
+				<li>use the <b>Ctrl+P</b> key combination, or</li>
+				<li>click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Print</b> option.</li>
+			</ul>
+			<p class="onlineDocumentFeatures">After that a PDF file will be generated on the basis of the document. You can open and print it out, or save onto your computer hard disk drive or removable medium to print it out later.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/SectionBreaks.htm

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Insert section breaks</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Insert section breaks to use different formatting for each section of the document" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Insert section breaks</h1>
+			<p>Section breaks allow you to apply a different layout or formatting for the certain parts of your document. For example, you can use individual <a href="../UsageInstructions/InsertHeadersFooters.htm" onclick="onhyperlinkclick(this)">headers and footers</a>, <a href="../UsageInstructions/InsertPageNumbers.htm" onclick="onhyperlinkclick(this)">page numbering</a>, <a href="../UsageInstructions/SetPageParameters.htm" onclick="onhyperlinkclick(this)">margins, size, orientation, or column number</a> for each separate section.</p>
+			<p class="note"><b>Note</b>: an inserted section break defines formatting of the preceding part of the document.</p>
+			<p>To insert a section break at the current cursor position:</p>
+			<ol>
+				<li>click the <b>Insert Page or Section break</b> <img alt="Insert Page or Section break" src="../images/pagebreak1.png" /> icon at the top toolbar</li>
+				<li>select the <b>Insert Section Break</b> submenu</li>
+				<li>select the necessary section break type:
+				<ul>
+				<li><b>Next Page</b> - to start a new section from the next page</li>
+				<li><b>Continuous Page</b> - to start a new section at the current page</li>
+				<li><b>Even Page</b> - to start a new section from the next even page</li>
+				<li><b>Odd Page</b> - to start a new section from the next odd page</li>
+				</ul>
+				</li>
+			</ol>
+			<p>Added section breaks are indicated in your document by a double dotted line: <img alt="Section break" src="../images/sectionbreak.png" /></p>
+			<p>If you do not see the inserted section breaks, click the <img alt="Nonprinting Characters icon" src="../images/nonprintingcharacters.png" /> icon at the top toolbar to display them.</p>
+			<p>To remove a section break select it with the mouse and press the <b>Delete</b> key. Since a section break defines formatting of the preceding section, when you remove a section break, this section formatting will also be deleted. The document part that preceded the removed section break acquires the formatting of the part that followed it.</p>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/SetPageParameters.htm

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Set page parameters</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Set page parameters: change page orientation and size, adjust margins and insert columns" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Set page parameters</h1>
+			<p>To change page layout, i.e. set page orientation and size, adjust margins and insert columns, use the corresponding icons at the top toolbar.</p>
+            <p class="note"><b>Note</b>: all these parameters are applied to the entire document. If you need to set different page margins, orientation, size, or column number for the separate parts of your document, please refer to <a href="../UsageInstructions/SectionBreaks.htm" onclick="onhyperlinkclick(this)">this page</a>.</p>
+			<h3>Page Orientation</h3>
+            <p>Change the current orientation type clicking the <b>Page Orientation</b> <img alt="Page Orientation icon" src="../images/orientation.png" /> icon. The default orientation type is <b>Portrait</b> that can be switched to <b>Album</b>.</p>
+            <h3>Page Size</h3>
+            <p>Change the default A4 format clicking the <b>Page Size</b> <img alt="Page Size icon" src="../images/pagesize.png" /> icon and selecting the needed one from the list. The available preset sizes are:</p>
+            <ul>
+                <li>US Letter (21,59cm x 27,94cm)</li>
+                <li>US Legal (21,59cm x 35,56cm)</li>
+                <li>A4 (21cm x 29,7cm)</li>
+                <li>A5 (14,81cm x 20,99cm)</li>
+                <li>B5 (17,6cm x 25,01cm)</li>
+                <li>Envelope #10 (10,48cm x 24,13cm)</li>
+                <li>Envelope DL (11,01cm x 22,01cm)</li>
+                <li>Tabloid (27,94cm x 43,17cm)</li>
+                <li>AЗ (29,7cm x 42,01cm)</li>
+                <li>Tabloid Oversize (30,48cm x 45,71cm)</li>
+                <li>ROC 16K (19,68cm x 27,3cm)</li>
+                <li>Envelope Choukei 3 (11,99cm x 23,49cm)</li>
+                <li>Super B/A3 (33,02cm x 48,25cm)</li>
+            </ul>
+            <p>You can also set a special page size by selecting the <b>Custom Page Size</b> option from the list. The <b>Page Size</b> window will open where you'll be able to set necessary <b>Width</b> and <b>Height</b> values. Enter your new values into the entry fields or adjust the existing values using arrow buttons. When ready, click <b>OK</b> to apply the changes.</p>
+            <p><img alt="Custom Page Size" src="../images/custompagesize.png" /></p>
+            <h3>Page Margins</h3>
+            <p>Change default margins, i.e. the blank space between the left, right, top and bottom page edges and the paragraph text, clicking the <b>Page Margins</b> <img alt="Page Margins icon" src="../images/pagemargins.png" /> icon and selecting one of the available presets: <b>Normal</b>, <b>US Normal</b>, <b>Narrow</b>, <b>Moderate</b>, <b>Wide</b>. You can also use the <b>Custom Margins</b> option to set your own values in the <b>Margins</b> window that opens. Enter the necessary <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> page margin values into the entry fields or adjust the existing values using arrow buttons. When ready, click <b>OK</b>. The custom margins will be applied to the current document and the <b>Last Custom</b> option with the specified parameters will appear in the <b>Page Margins</b> <img alt="Page Margins icon" src="../images/pagemargins.png" /> list so that you can apply them to some other documents.</p>
+            <p><img alt="Custom Margins" src="../images/custommargins.png" /></p>
+            <p>You can also change the margins manually by dragging the border between the grey and white areas on the rulers (the grey areas of the rulers indicate page margins):</p>
+            <p><img alt="Margins Adjustment" src="../images/margins.png" /></p>
+            <h3>Columns</h3>
+            <p>Apply a multi-column layout clicking the <b>Insert columns</b> <img alt="Insert columns icon" src="../images/insertcolumns.png" /> icon and selecting the necessary column type from the drop-down list. The following options are available:</p>
+            <ul>
+                <li><b>Two</b> <img alt="Two columns icon" src="../images/twocolumns.png" /> - to add two columns of the same width,</li>
+                <li><b>Three</b> <img alt="Three columns icon" src="../images/threecolumns.png" /> - to add three columns of the same width,</li>
+                <li><b>Left</b> <img alt="Left column icon" src="../images/leftcolumn.png" /> - to add two columns: a narrow column on the left and a wide column on the right,</li>
+                <li><b>Right</b> <img alt="Right column icon" src="../images/rightcolumn.png" /> - to add two columns: a narrow column on the right and a wide column on the left.</li>
+            </ul>
+            <p>To exactly specify where a new column should start, place the cursor before the text that you want to move into the new column, click the <b>Insert Page or Section Break</b> <img alt="Insert Page or Section Break" src="../images/pagebreak1.png" /> icon at the top toolbar and then select the <b>Insert Column Break</b> option. The text will be moved to the next column.</p>
+            <p>Added column breaks are indicated in your document by a dotted line: <img alt="Column break" src="../images/columnbreak.png" />. If you do not see the inserted column breaks, click the <img alt="Nonprinting Characters icon" src="../images/nonprintingcharacters.png" /> icon at the top toolbar to display them. To remove a column break select it with the mouse and press the <b>Delete</b> key.</p>
+            <p>To manually change the column width and spacing, you can use the horizontal ruler.</p>
+            <p><img alt="Column spacing" src="../images/columnspacing.png" /></p>
+            <p>To cancel columns and return to a regular single-column layout, click the <b>Insert columns</b> <img alt="Insert columns icon" src="../images/insertcolumns.png" /> icon at the top toolbar and select the <b>One</b> <img alt="One column icon" src="../images/onecolumn.png" /> option from the list.</p>		
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/SetTabStops.htm

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Set tab stops</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Set tab stops" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Set tab stops</h1>
+			<p>In Document Editor, you can change tab stops i.e. the position the cursor advances to when you press the <b>Tab</b> key on the keyboard.</p>
+			<p>To set tab stops you can use the horizontal ruler:</p>
+			<ol>
+			    <li>Select the necessary tab stop type clicking the <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> button in the upper left corner of the working area. The following three tab types are available:
+			        <ul>
+			            <li><b>Left</b> <img alt="Left Tab Stop button" src="../images/tabstopleft.png" /> - lines up your text by the left side at the tab stop position; the text moves to the right from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Left Tab Stop marker" src="../images/tabstopleft_marker.png" /> marker.</li>
+			            <li><b>Center</b> <img alt="Center Tab Stop button" src="../images/tabstopcenter.png" /> - centers the text at the tab stop position. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Center Tab Stop marker" src="../images/tabstopcenter_marker.png" /> marker.</li>
+			            <li><b>Right</b> <img alt="Right Tab Stop button" src="../images/tabstopright.png" /> - lines up your text by the right side at the tab stop position; the text moves to the left from the tab stop as you type. Such a tab stop will be indicated on the horizontal ruler by the <img alt="Right Tab Stop marker" src="../images/tabstopright_marker.png" /> marker.</li>
+			        </ul>
+			    </li>
+			    <li>Click on the bottom edge of the ruler where you want to place the tab stop. Drag it along the ruler to change its position. To remove the added tab stop drag it out of the ruler. 
+			    <p><img alt="Horizontal Ruler with the Tab stops added" src="../images/tabstops_ruler.png" /></p>
+			    </li>			
+			</ol>
+			<hr />
+			<p>You can also use the paragraph properties window to adjust tab stops. Click the right mouse button, select the <b>Paragraph Advanced Settings</b> option in the menu or use the <b>Show advanced settings</b> link at the right sidebar, and switch to the <b>Tab</b> tab in the opened <b>Paragraph - Advanced Settings</b> window.</p>
+			<img alt="Paragraph Properties - Tab tab" src="../images/paradvsettings_tab.png" />
+			<p>You can set the following parameters:</p>
+			<ul>
+			    <li><b>Tab Position</b> - is used to set custom tab stops. Enter the necessary value in this box, adjust it more precisely using the arrow buttons and press the <b>Specify</b> button. Your custom tab position will be added to the list in the field below. If you've previously added some tab stops using the ruler, all these tab positions will also be displayed in the list.</li>
+			    <li><b>Default Tab</b> is set at 1.25 cm. You can decrease or increase this value using the arrow buttons or enter the necessary one in the box.</li>
+			    <li><b>Alignment</b> - is used to set the necessary alignment type for each of the tab positions in the list above. Select the necessary tab position in the list, choose the <b>Left</b>, <b>Center</b> or <b>Right</b> radio button and press the <b>Specify</b> button.
+			        <p>To delete tab stops from the list select a tab stop and press the <b>Remove</b> or <b>Remove All</b> button.</p>
+			    </li>
+			</ul>			
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/UseMailMerge.htm

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Use Mail Merge</title>
+		<meta charset="utf-8" />
+        <meta name="description" content="Use Mail Merge to create a lot of personalized letters and send them to recipients" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>Use Mail Merge</h1>
+            <p class="note"><b>Note</b>: this option is available for paid versions only.</p>
+			<p>The <b>Mail Merge</b> feature is used to create a set of documents combining a common content which is taken from a text document and some individual components (variables, such as names, greetings etc.) taken from a spreadsheet (for example, a customer list). It can be useful if you need to create a lot of personalized letters and send them to recipients.</p>
+			<p>To start working with the <b>Mail Merge</b> feature,</p>
+            <ol>
+                <li><b>Prepare a data source and load it to the main document</b>
+                <ol>
+                    <li>A data source used for the mail merge must be an <b>.xlsx</b> spreadsheet stored on your portal. Open an existing spreadsheet or create a new one and make sure that it meets the following requirements.
+                    <p>The spreadsheet should have a header row with the column titles, as values in the first cell of each column will designate merge fields (i.e. variables that you can insert into the text). Each column should contain a set of actual values for a variable. Each row in the spreadsheet should correspond to a separate record (i.e. a set of values that belongs to a certain recipient). During the merge process, a copy of the main document will be created for each record and each merge field inserted into the main text will be replaced with an actual value from the corresponding column. If you are goung to send results by email, the spreadsheet must also include a column with the recipients' email addresses.</p>
+                    </li>
+                    <li>Open an existing text document or create a new one. It must contain the main text which will be the same for each version of the merged document. Click the <b>Mail Merge</b> <img alt="Mail Merge icon" src="../images/mailmergeicon.png" /> icon on the top toolbar.</li>
+                    <li>The <b>Select Data Source</b> window will open. It displays the list of all your <b>.xlsx</b> spreadsheets stored in the <b>My Documents</b> section. To navigate between other <b>Documents</b> module sections use the menu in the left part of the window. Select the file you need and click <b>OK</b>.</li>
+                </ol>
+                <p>Once the data source is loaded, the <b>Mail Merge Setting</b> tab will be available on the right sidebar.</p>
+                <p><img alt="Mail Merge Setting tab" src="../images/right_mailmerge.png" /></p>
+                </li>
+                <li><b>Verify or change the recipients list</b>
+                <ol>
+                    <li>Click the <b>Edit recipients list</b> button on the top of the right sidebar to open the <b>Mail Merge Recipients</b> window, where the content of the selected data source is displayed.
+                    <p><img alt="Mail Merge Recipients window" src="../images/mailmergerecipients.png" /></p>
+                    </li>
+                    <li>Here you can add new information, edit or delete the existing data, if necessary. To simplify working with data, you can use the icons on the top of the window:
+                    <ul>
+                        <li><img alt="Copy" src="../images/copy.png" /> and <img alt="Paste" src="../images/paste.png" /> - to copy and paste the copied data</li>
+                        <li><img alt="Undo" src="../images/undo.png" /> and <img alt="Redo" src="../images/redo.png" /> - to undo and redo undone actions</li>
+                        <li><img alt="Sort Lowest to Highest icon" src="../images/sortatoz.png" /> and <img alt="Sort Highest to Lowest icon" src="../images/sortztoa.png" /> - to sort your data within a selected range of cells in ascending or descending order</li>
+                        <li><img alt="Filter icon" src="../images/sortandfilter.png" /> - to enable the filter for the previously selected range of cells or to remove the applied filter</li>
+                        <li><img alt="Clear Filter icon" src="../images/clearfilter.png" /> - to clear all the applied filter parameters
+                        <p class="note"><b>Note</b>: to learn more on how to use the filter you can refer to the <b>Sort and filter data</b> section of the <b>Spreadsheet Editor</b> help.</p>
+                        </li>
+                        <li><img alt="Search icon" src="../images/searchicon.png" /> - to search for a certain value and replace it with another one, if necessary
+                        <p class="note"><b>Note</b>: to learn more on how to use the <b>Find and Replace</b> tool you can refer to the <b>Search and Replace Functions</b> section of the <b>Spreadsheet Editor</b> help.</p>
+                        </li>
+                    </ul>
+                    </li>
+                    <li>After all the necessary changes are made, click the <b>Save & Exit</b> button. To discard the changes, click the <b>Close</b> button.</li>
+                </ol>
+                </li>
+                <li><b>Insert merge fields and check the results</b>
+                <ol>
+                    <li>Place the mouse cursor in the text of the main document where you want a merge field to be inserted, click the <b>Insert Merge Field</b> button at the right sidebar and select the necessary field from the list. The available fields correspond to the data in the first cell of each column of the selected data source. Add all the fields you need anywhere in the document.
+                    <p><img alt="Merge Fields section" src="../images/mergefields.png" /></p>
+                    </li>
+                    <li>Turn on the <b>Highlight merge fields</b> switcher at the right sidebar to make the inserted fields more noticeable in the document text.
+                    <p><img alt="Main document with inserted fields" src="../images/insertedfields.png" /></p>
+                    </li>
+                    <li>Turn on the <b>Preview results</b> switcher at the right sidebar to view the document text with the merge fields replaced with actual values from the data source. Use the arrow buttons to preview versions of the merged document for each record.
+                    <p><img alt="Preview results" src="../images/previewinsertedfields.png" /></p>
+                    </li>
+                </ol>
+                <ul>
+                    <li>To delete an inserted field, disable the <b>Preview results</b> mode, select the field with the mouse and press the <b>Delete</b> key on the keyboard. </li>
+                    <li>To replace an inserted field, disable the <b>Preview results</b> mode, select the field with the mouse, click the <b>Insert Merge Field</b> button at the right sidebar and choose a new field from the list.</li>
+                </ul>
+                </li>
+                <li><b>Specify the merge parameters</b>
+                <ol>
+                    <li>Select the merge type. You can start mass mailing or save the result as a file in the PDF or Docx format to be able to print or edit it later. Select the necessary option from the <b>Merge to</b> list:
+                    <p><img alt="Merge type selection" src="../images/mergeto.png" /></p>
+                    <ul>
+                        <li><b>PDF</b> - to create a single document in the PDF format that includes all the merged copies so that you can print them later</li>
+                        <li><b>Docx</b> - to create a single document in the Docx format that includes all the merged copies so that you can edit individual copies later</li>
+                        <li><b>Email</b> - to send the results to recipients by email
+                        <p class="note"><b>Note</b>: the recipients' email addresses must be specified in the loaded data source and you need to have at least one email account connected in the <b>Mail</b> module on your portal.</p>
+                        </li>
+                    </ul>
+                    </li>
+                    <li>Choose the records you want to apply the merge to:
+                    <ul>
+                        <li><b>All records</b> (this option is selected by default) - to create merged documents for all records from the loaded data source</li>
+                        <li><b>Current record</b> - to create a merged document for the record that is currently displayed</li>
+                        <li><b>From</b> ... <b>To</b> - to create merged documents for a range of records (in this case you need to specify two values: the number of the first record and the last record in the desired range)
+                        <p class="note"><b>Note</b>: the maximum allowed quantity of recipients is 100. If you have more than 100 recipients in your data source, please, perform the mail merge by stages: specify the values from 1 to 100, wait until the mail merge process is over, then repeat the operation specifying the values from 101 to N etc.</p>
+                        </li>
+                    </ul>
+                    </li>
+                    <li>Complete the merge
+                        <ul>
+                            <li>If you've decided to save the merge results as a file,
+                            <ul>
+                                <li>click the <b>Download</b> button to store the file anywhere on your PC. You'll find the downloaded file in your default <em>Downloads</em> folder.</li>
+                                <li>click the <b>Save</b> button to save the file on your portal. In the <b>Folder for save</b> window that opens, you can change the file name and specify the folder where you want to save the file. You can also check the <b>Open merged document in new tab</b> box to check the result once the merge process is finished. Finally, click <b>Save</b> in the <b>Folder for save</b> window.</li>
+                            </ul>
+                            </li>
+                            <li>If you've selected the <b>Email</b> option, the <b>Merge</b> button will be available on the right sidebar. After you click it, the <b>Send to Email</b> window will open:
+                                <p><img alt="Send to Email window" src="../images/sendtoemail.png" /></p>
+                            <ul>
+                                <li>In the <b>From</b> list, select the mail account you want to use for sending mail, if you have several accounts connected in the <b>Mail</b> module.</li>
+                                <li>In the <b>To</b> list, select the merge field corresponding to email addresses of the recipients, if it was not selected automatically.</li>
+                                <li>Enter your message subject in the <b>Subject Line</b> field.</li>
+                                <li>Select the mail format from the list: <b>HTML</b>, <b>Attach as DOCX</b> or <b>Attach as PDF</b>. When one of the two latter options is selected, you also need to specify the <b>File name</b> for attachments and enter the <b>Message</b> (the text of your letter that will be sent to recipients).</li>
+                                <li>Click the <b>Send</b> button.</li>
+                            </ul>
+                            <p>Once the mailing is over you'll receive a notification to your email specified in the <b>From</b> field.</p>
+                            </li>
+                        </ul>
+                    </li>
+                </ol>
+                </li>
+            </ol>
+		</div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/ViewDocInfo.htm

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>View document information</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="View document title, author, location, creation date, persons with the rights to view or edit the document, and statistics" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+	</head>
+	<body>
+		<div class="mainpart">
+			<h1>View document information</h1>
+			<p>To access the detailed information about the currently edited document, click the <b>File</b> <img alt="File icon" src="../images/file.png" /> icon at the left sidebar and select the <b>Document Info...</b> option.</p>
+			<h3>General Information</h3>
+            <p>The document information includes document title, author, location, creation date, and statistics: the number of pages, paragraphs, words, symbols, symbols with spaces.</p>
+            <div class="onlineDocumentFeatures">
+                <h3>Permission Information</h3>
+                <p class="note"><b>Note</b>: this option is not available for users with the <b>Read Only</b> permissions.</p>
+                <p>To find out, who have rights to view or edit the document, select the <b>Access Rights...</b> option at the left sidebar.</p>
+                <p>You can also change currently selected access rights by pressing the <b>Change access rights</b> button in the <b>Persons who have rights</b> section.</p>
+                <h3>Version History</h3>
+                <p class="note"><b>Note</b>: this option is not available for free accounts as well as for users with the <b>Read Only</b> permissions.</p>
+                <p>To view all the changes made to this document, select the <b>Version History</b> option at the left sidebar. You'll see the list of this document versions (major changes) and revisions (minor changes) with the indication of each version/revision author and creation date and time. For document versions, the version number is also specified (e.g. <em>ver. 2</em>). To know exactly which changes have been made in each separate version/revision, you can view the one you need by clicking it at the left sidebar. The changes made by the version/revision author are marked with the color which is displayed next to the author name on the left sidebar. To return to the document current version, click the <b>Back to Document</b> link on the top of the version list.</p>
+            </div>
+            <p>To close the <b>File</b> panel and return to document editing, select the <b>Back to Document</b> option.</p>
+        </div>
+	</body>
+</html>

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/callback.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+function onhyperlinkclick(element) {
+    function _postMessage(msg) {
+       if (window.parent && window.JSON) {
+            window.parent.postMessage(window.JSON.stringify(msg), "*");
+      	}
+    }
+
+    _postMessage({
+        command: 'internalCommand',
+        data: {
+            type: 'help:hyperlink',
+            data: element.href
+        }
+    });
+}

www/common/onlyoffice/web-apps/apps/documenteditor/main/resources/help/en/editor.css

@@ -0,0 +1,132 @@
+body
+{
+font-family: Tahoma, Arial, Verdana;
+font-size: 12px;
+color: #666;
+background: #fff;
+}
+
+img
+{
+border: none;
+vertical-align: middle;
+}
+
+img.floatleft 
+{ 
+float: left;
+margin-right: 30px;
+margin-bottom: 10px;
+}
+
+img.floatright 
+{ 
+float: right;
+margin-left: 30px;
+margin-bottom: 10px;
+}
+
+li
+{
+line-height: 2em;
+}
+
+.mainpart
+{
+margin: 0;
+padding: 10px 20px;
+}
+
+.mainpart h1
+{
+font-size: 16px;
+font-weight: bold;
+}
+
+table,
+tr,
+td,
+th
+{
+border-left: 0;
+border-right: 0;
+border-bottom: solid 1px #E4E4E4;
+border-collapse: collapse;
+padding: 8px;
+text-align: left;
+}
+
+table
+{
+margin: 20px 0;
+width: 100%;
+}
+
+th
+{
+font-size: 14px;
+font-weight: bold;
+padding-top: 20px;
+}
+
+td.function
+{
+width: 35%;
+}
+
+td.shortfunction
+{
+width: 20%;
+}
+
+td.combination
+{
+width: 15%;
+}
+
+td.description
+{
+width: 50%;
+}
+
+td.longdescription
+{
+width: 80%;
+}
+
+.note
+{
+background: #F4F4F4 url(images/help.png) no-repeat 7px 5px;
+font-size: 11px;
+padding: 10px 20px 10px 37px;
+width: 90%;
+margin: 10px 0;
+line-height: 1em;
+min-height: 14px;
+}
+
+hr
+{
+height: 1px;
+width: 90%;
+text-align: left;
+margin: 10px 0 15px;
+color: #E4E4E4;
+background-color: #E4E4E4;
+border: 0;
+clear: both;
+}
+
+a
+{
+color: #7496DD;
+text-decoration: underline;
+}
+
+a:hover
+{
+text-decoration: none;
+}
+a.sup_link {
+text-decoration: none;	
+}