Merge pull request #651 from ONLYOFFICE/fix/update-help

Fix/update help

apps/documenteditor/main/resources/help/de/ProgramInterface/PluginsTab.htm

@@ -33,7 +33,9 @@
                 <li><b>PhotoEditor</b> - Bearbeitung von Bildern: zuschneiden, umlegen, rotieren, Linien und Formen zeichnen, Icons und Text einzufügen, eine Bildmaske zu laden und verschiedene Filter anzuwenden, wie zum Beispiel Grauskala, Invertiert, Verschwimmen, Verklaren, Emboss, usw.</li>
                 <li class="onlineDocumentFeatures"><b>Speech</b> ermöglicht es, ausgewählten Text in Sprache zu konvertieren.</li>
                 <li><b>Thesaurus</b> -  erlaubt es nach Synonymen und Antonymen eines Wortes zu suchen und es durch das ausgewählte Wort zu ersetzen.</li>
-                <li><b>Translator</b> - erlaubt es den ausgewählten Textabschnitten in andere Sprachen zu übersetzen.</li>
+                <li><b>Translator</b> - erlaubt es den ausgewählten Textabschnitten in andere Sprachen zu übersetzen.
+                    <p class="note"><b>Hinweis</b>: dieses plugin funktioniert nicht im Internet Explorer.</p>
+                </li>
                 <li><b>YouTube</b> erlaubt es YouTube-Videos in Ihr Dokument einzubinden.</li>
             </ul>
             <p class="onlineDocumentFeatures">Die Plug-ins <b>Wordpress</b> und <b>EasyBib</b> können verwendet werden, wenn Sie die entsprechenden Dienste in Ihren Portaleinstellungen einrichten. Sie können die folgenden Anleitungen für die <a target="_blank" href="https://helpcenter.onlyoffice.com/server/windows/community/authorization-keys.aspx" onclick="onhyperlinkclick(this)">Serverversion</a> oder <a target="_blank" href="https://helpcenter.onlyoffice.com/tipstricks/authorization-keys-saas.aspx" onclick="onhyperlinkclick(this)">für die SaaS-Version</a> verwenden.</p>

apps/documenteditor/main/resources/help/de/UsageInstructions/FontTypeSizeColor.htm

@@ -18,8 +18,8 @@
 			<p class="note"><b>Hinweis</b>: Wenn Sie die Formatierung auf Text anwenden möchten, der bereits im Dokument vorhanden ist, wählen Sie diesen mit der Maus oder <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">mithilfe der Tastatur</a> aus und legen Sie die gewünschte Formatierung fest.</p>
 			<table>
 				<tr>
-					<td>Schriftart</td>
-					<td><img alt="Schriftart" src="../images/fontfamily.png" /></td>
+                    <td width="10%">Schriftart</td>
+                    <td width="15%"><img alt="Schriftart" src="../images/fontfamily.png" /></td>
 					<td>Wird verwendet, um eine Schriftart aus der Liste mit den verfügbaren Schriftarten zu wählen. <span class="desktopDocumentFeatures">Wenn eine gewünschte Schriftart nicht in der Liste verfügbar ist, können Sie diese runterladen und in Ihrem Betriebssystem speichern. Anschließend steht Ihnen diese Schrift in der <em>Desktop-Version</em> zur Nutzung zur Verfügung.</span></td>
 				</tr>
 				<tr>

apps/documenteditor/main/resources/help/de/editor.css

@@ -6,11 +6,21 @@ color: #444;
 background: #fff;
 }
 
+.cross-reference th{
+text-align: center;
+vertical-align: middle;
+}
+
+.cross-reference td{
+text-align: center;
+vertical-align: middle;
+}
+
 img
 {
 border: none;
 vertical-align: middle;
-max-width: 95%;
+max-width: 100%;
 }
 
 img.floatleft 
@@ -187,3 +197,40 @@ kbd {
     margin: 0.2em 0.1em;
     color: #000;
 }
+.shortcut_variants {
+    margin: 20px 0 -20px;
+    padding: 0;
+}
+.shortcut_toggle {
+    display: inline-block;
+    margin: 0;
+    padding: 1px 10px;
+    list-style-type: none;
+    cursor: pointer;
+    font-size: 11px;
+    line-height: 18px;
+    white-space: nowrap
+}
+.shortcut_toggle.enabled {
+    color: #fff;
+    background-color: #7D858C;
+    border: 1px solid #7D858C;
+}
+.shortcut_toggle.disabled {
+    color: #444;
+    background-color: #fff;
+    border: 1px solid #CFCFCF;
+}
+.shortcut_toggle.disabled:hover {
+    background-color: #D8DADC;
+}
+.left_option {
+    border-radius: 2px 0 0 2px;
+    float: left;
+}
+.right_option {
+    border-radius: 0 2px 2px 0;
+}
+.forms {
+    display: inline-block;
+}

apps/documenteditor/main/resources/help/en/Contents.json

@@ -49,7 +49,9 @@
     {"src": "UsageInstructions/AlignArrangeObjects.htm", "name": "Align and arrange objects on a page" },
     {"src": "UsageInstructions/ChangeWrappingStyle.htm", "name": "Change wrapping style" },
     {"src": "UsageInstructions/InsertContentControls.htm", "name": "Insert content controls" },
-    {"src": "UsageInstructions/CreateTableOfContents.htm", "name": "Create table of contents" },
+    { "src": "UsageInstructions/CreateTableOfContents.htm", "name": "Create table of contents" },
+    {"src": "UsageInstructions/AddTableofFigures.htm", "name": "Add and Format a Table of Figures" },
+	{ "src": "UsageInstructions/CreateFillableForms.htm", "name": "Create fillable forms", "headername": "Fillable forms" },
     {"src": "UsageInstructions/UseMailMerge.htm", "name": "Use mail merge", "headername": "Mail Merge"},
     { "src": "UsageInstructions/InsertEquation.htm", "name": "Insert equations", "headername": "Math equations" },
     {"src": "HelpfulHints/CollaborativeEditing.htm", "name": "Collaborative document editing", "headername": "Document co-editing"},

apps/documenteditor/main/resources/help/en/HelpfulHints/KeyboardShortcuts.htm

@@ -241,6 +241,12 @@
                     <td><kbd>↓</kbd></td>
                     <td>Move the cursor one line down.</td>
                 </tr>
+				<tr>
+					<td>Navigate between controls in modal dialogues</td>
+					<td><kbd>Tab</kbd>/<kbd>Shift</kbd>+<kbd>Tab</kbd></td>
+					<td><kbd>↹ Tab</kbd>/<kbd>⇧ Shift</kbd>+<kbd>↹ Tab</kbd></td>
+					<td>Navigate between controls to give focus to the next or previous control in modal dialogues.</td>
+				</tr>
 				<tr>
 					<th colspan="4" class="keyboard_section">Writing</th>
 				</tr>
@@ -678,7 +684,7 @@
                     <td>Insert a non-breaking hyphen ‘-’ within the current document and to the right of the cursor.</td>
                 </tr>
                 <tr>
-                    <td>Insert a no-break space</td>
+					<td>Insert a no-break space</td>
                     <td><kbd>Ctrl</kbd>+<kbd>⇧ Shift</kbd>+<kbd>␣ Spacebar</kbd></td>
                     <td><kbd>^ Ctrl</kbd>+<kbd>⇧ Shift</kbd>+<kbd>␣ Spacebar</kbd></td>
                     <td>Insert a no-break space ‘o’ within the current document and to the right of the cursor.</td>

apps/documenteditor/main/resources/help/en/ProgramInterface/FormsTab.htm

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Forms tab</title>
+    <meta charset="utf-8" />
+    <meta name="description" content="Introducing the Document Editor user interface - Forms tab" />
+    <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <script type="text/javascript" src="../callback.js"></script>
+    <script type="text/javascript" src="../search/js/page-search.js"></script>
+</head>
+<body>
+    <div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
+        </div>
+        <h1>Forms tab</h1>
+        <p>The <b>Forms</b> tab allows you to create fillable forms in your documents, e.g. agreement drafts or surveys. Depending on the selected form type, you can create input fields that can be filled in by other users, or protect some parts of the document from being edited or deleted, etc.</p>
+        <div class="onlineDocumentFeatures">
+            <p>The corresponding window of the Online Document Editor:</p>
+            <p><img alt="Forms tab" src="../images/interface/formstab.png" /></p>
+        </div>
+        <p>Using this tab, you can:</p>
+        <ul>
+            <li><a href="../UsageInstructions/CreateFillableForms.htm">insert and edit</a>
+            <ul>
+                <li>text fields,</li>
+                <li>combo boxes,</li>
+                <li>drop-down lists,</li>
+                <li>checkboxes,</li>
+                <li>radio buttons,</li>
+                <li>images,</li>
+            </ul>
+            <li>lock the forms to prevent their further editing,</li>           
+            <li>view the resulting forms in your document.</li>
+        </ul>
+    </div>
+</body>
+</html>

apps/documenteditor/main/resources/help/en/ProgramInterface/PluginsTab.htm

@@ -33,7 +33,9 @@
                 <li><a href="../UsageInstructions/PhotoEditor.htm" onclick="onhyperlinkclick(this)">Photo Editor</a> allows to edit images: crop, flip, rotate them, draw lines and shapes, add icons and text, load a mask and apply filters such as Grayscale, Invert, Sepia, Blur, Sharpen, Emboss, etc.,</li>
                 <li class="onlineDocumentFeatures"><a href="../UsageInstructions/Speech.htm" onclick="onhyperlinkclick(this)">Speech</a> allows to convert the selected text into speech (available in the <em>online version</em> only),</li>
                 <li><a href="../UsageInstructions/Thesaurus.htm" onclick="onhyperlinkclick(this)">Thesaurus</a> allows to search for synonyms and antonyms of a word and replace it with the selected one,</li>
-                <li><a href="../UsageInstructions/Translator.htm" onclick="onhyperlinkclick(this)">Translator</a> allows to translate the selected text into other languages,</li>
+                <li><a href="../UsageInstructions/Translator.htm" onclick="onhyperlinkclick(this)">Translator</a> allows to translate the selected text into other languages,
+                    <p class="note"><b>Note</b>: this plugin doesn't work in Internet Explorer.</p>
+                </li>
                 <li><a href="../UsageInstructions/YouTube.htm" onclick="onhyperlinkclick(this)">YouTube</a> allows to embed YouTube videos into your document,</li>
                 <li class="onlineDocumentFeatures"><a href="../UsageInstructions/InsertReferences.htm#Mendeley_block" onclick="onhyperlinkclick(this)">Mendeley</a> allows to manage research papers and generate bibliographies for scholarly articles (available in the <em>online version</em> only),</li>
                 <li class="onlineDocumentFeatures"><a href="../UsageInstructions/InsertReferences.htm#Zotero_block" onclick="onhyperlinkclick(this)">Zotero</a> allows to manage bibliographic data and related research materials (available in the <em>online version</em> only),</li>

apps/documenteditor/main/resources/help/en/ProgramInterface/ReferencesTab.htm

@@ -30,7 +30,8 @@
                 <li>insert <a href="../UsageInstructions/AddHyperlinks.htm" onclick="onhyperlinkclick(this)">hyperlinks</a>,</li>
                 <li>add <a href="../UsageInstructions/InsertBookmarks.htm" onclick="onhyperlinkclick(this)">bookmarks</a>.</li>
                 <li>add <a href="../UsageInstructions/Addcaption.htm" onclick="onhyperlinkclick(this)">captions</a>,</li>
-                <li>insert <a href="../UsageInstructions/InsertCrossReference.htm" onclick="onhyperlinkclick(this)">cross-references</a>.</li>
+                <li>insert <a href="../UsageInstructions/InsertCrossReference.htm" onclick="onhyperlinkclick(this)">cross-references</a>,</li>
+                <li>create a <a href="../UsageInstructions/AddTableofFigures.htm" onclick="onhyperlinkclick(this)">table of figures</a>.</li>
             </ul>
 		</div>
 	</body>

apps/documenteditor/main/resources/help/en/UsageInstructions/AddCaption.htm

@@ -16,6 +16,7 @@
            <h1>Add captions</h1>
            <p>A <b>caption</b> is a numbered label that can be applied to objects, such as equations, tables, figures, and images in the document.</p>
            <p>A caption allows making a reference in the text - an easily recognizable label on an object.</p>
+           <p>You can also use captions to create a <a href="../UsageInstructions/AddTableofFigures.htm" onclick="onhyperlinkclick(this)">table of figures</a>.</p>
            <p>To add a caption to an object:</p>
            <ul>
                <li>select the required object to apply a caption;</li>

apps/documenteditor/main/resources/help/en/UsageInstructions/AddTableofFigures.htm

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Add and Format a Table of Figures</title>
+		<meta charset="utf-8" />
+		<meta name="description" content="Add, format and update Table of Figures using captioned objects and styles" />
+		<link type="text/css" rel="stylesheet" href="../editor.css" />
+        <script type="text/javascript" src="../callback.js"></script>
+        <script type="text/javascript" src="../search/js/page-search.js"></script>
+	</head>
+	<body>
+		<div class="mainpart">
+			<div class="search-field">
+				<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
+        </div>
+		<h1>Add and Format a Table of Figures</h1>
+			<p><b>Table of Figures</b> provides an overview of equations, figures and tables added to a document.  Similar to a table of contents, a <b>Table of Figures</b> lists, sorts out and arranges captioned objects or text headings that have a certain style applied. This makes it easy to reference them in your document and to navigate between figures. Click the link in the <b>Table of Figures</b> formatted as links and you will be taken directly to the figure or the heading. Any table, equation, diagram, drawing, graph, chart, map, photograph or another type of illustration is presented as a figure. 
+            <p><img alt="References Tab" src="../images/referencestab.png" /></p>
+			<p>To add a <b>Table of Figures</b> go to the <b>References</b> tab and use the <b>Table of Figures</b> <img alt="Table of Figures Button" src="../images/table_figures_button.png" /> toolbar button  to set up and format a table of figures. Use the Refresh button to update a table of figures each time you add a new figure to your document.</p>
+			<h2>Creating a Table of Figures</h2>
+			<p class="note"><b>Note:</b> You can create a Table of Figures using either captioned figures or styles. Before proceeding, a <a href="../UsageInstructions/AddCaption.htm" onclick="onhyperlinkclick(this)">caption</a> must be added to each equation, table or figure, or a <a href="../UsageInstructions/FormattingPresets.htm" onclick="onhyperlinkclick(this)">style</a> must be applied to the text so that it is correctly included in a Table of Figures.</p>
+			<ol>
+			<li>Once you have added captions or styles, place your cursor where you want to inset a <b>Table of Figures</b> and go to the <b>References</b> tab then click the <b>Table of Figures</b> button to open the <b>Table of Figures</b> dialog box, and generate the list of figures.
+            <p><img alt="Table of Figures Settings" src="../images/table_figures_settings.png" /></p>
+			</li>
+			<li>Choose an option to build a <b>Table of Figures</b> from the <b>Caption</b> or <b>Style group</b>.
+			<ul style = "list-style-type:disc">
+			<li>You can create a Table of Figures based on captioned objects. Check the Caption box and select a captioned object from the drop-down list:
+			<ul style = "list-style-type:circle">
+					<li>None</li>
+                    <li>Equation</li>
+                    <li>Figure</li>
+                    <li>Table
+			<p><img alt="Table of Figures Captioned" src="../images/table_figures_captioned.png" /></p>
+					</li>
+				 </ul>
+			 </li>
+            <li>You can create a <b>Table of Figures</b> based on the styles used to format text. Check the <b>Style</b> box and select a style from the drop-down list. The list of options may vary depending on the style applied:
+			<ul style = "list-style-type:circle">
+                       <li>Heading 1</li>
+                       <li>Heading 2</li>
+                       <li>Caption</li>
+                       <li>Table of Figures</li>
+					   <li>Normal
+			<p><img alt="Table of Figures Style" src="../images/table_figures_style.png" /></p>
+						</li>
+					</ul>
+				</li>
+			</ul>
+			</li>
+			</ol>
+			<h2>Formatting a Table of Figures</h2>
+            <p>The check box options allow you to format a <b>Table of Figures</b>. All formatting check boxes are activated by default as in most cases it is more reasonable to have them. Uncheck the boxes you don’t need.</p>
+			<ul style = "list-style-type:none">
+						<li><b>Show page numbers</b> - to display the page number the figure appears on;</li>
+						<li><b>Right align page numbers</b> - to display page numbers on the right when <b>Show page numbers</b> is active; uncheck it to display page numbers right after the title;</li>
+						<li><b>Format table and contents as links</b> - to add hyperlinks to the <b>Table of Figures</b>;</li>
+						<li><b>Include label and number</b> - to add a label and number to the Table of Figures.</li>
+			</ul>
+			<ul style = "list-style-type:disc">
+			<li>Choose the Leader style from the drop-down list to connect titles to page numbers for a better visualization.</li>
+			<li>Choose the Leader style from the drop-down list to connect titles to page numbers for a better visualization.</li>
+			<li>Customize the table of figures text styles by choosing one of the available styles from the drop-down list:
+				<ul style = "list-style-type:circle">
+						<li><b>Current</b> - displays the style chosen previously.</li>
+						<li><b>Simple</b> - highlights text in bold.</li>
+						<li><b>Simple</b> - highlights text in bold.</li>
+						<li><b>Online</b> - highlights and arranges text as a hyperlink</li>
+						<li><b>Classic</b> - makes the text all caps</li>
+						<li><b>Distinctive</b> - highlights text in italic</li>
+						<li><b>Distinctive</b> - highlights text in italic</li>
+						<li><b>Centered</b> - centers the text and displays no leader</li>
+						<li><b>Formal</b> - displays text in 11 pt Arial to give a more formal look</li>
+				</ul>
+				</li>
+		<li>Preview window displays how the Table of Figures appears in the document or when printed.</li>
+			</ul>
+		<h2>Updating a Table of Figures</h2>
+		<p>Update a <b>Table of Figures</b> each time you add a new equation, figure or table to your document.The <b>Refresh</b> button becomes active when you click or select the Table of Figures. Click the Refresh <img alt="Refresh Button" src="../images/refresh_button.png"> button on the <b>References</b> tab of the top toolbar and select the necessary option from the menu:</p>
+		<img alt="Refresh Popup" src="../images/refresh_table-figures_popup.png" />
+		<ul style = "list-style-type:disc">
+				<li><b>Refresh page numbers only</b> - to update page numbers without applying changes to the headings.</li>
+				<li><b>Refresh entire table</b> - to update all the headings that have been modified and page numbers.</li>
+			</ul>
+		<p>Click <b>OK</b> to confirm your choice, </p>
+		<p>or</p>
+		<p>Right-click the <b>Table of Figures</b> in your document to open the contextual menu, then choose the <b>Refresh field</b> to update the <b>Table of Figures</b>.</p>
+		</div>
+	</body>
+</html>

apps/documenteditor/main/resources/help/en/UsageInstructions/CreateFillableForms.htm

@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Create fillable forms</title>
+    <meta charset="utf-8" />
+    <meta name="description" content="Create fillable forms for advanced form interaction experience" />
+    <link type="text/css" rel="stylesheet" href="../editor.css" />
+    <script type="text/javascript" src="../callback.js"></script>
+    <script type="text/javascript" src="../search/js/page-search.js"></script>
+</head>
+<body>
+    <div class="mainpart">
+        <div class="search-field">
+            <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
+        </div>
+        
+            <h1>Create fillable forms</h1>
+            <p>ONLYOFFICE Document Editor allows you to effortlessly create <b>fillable forms</b> in your documents, e.g. agreement drafts or surveys. Creating fillable forms is enabled through user-editable objects that ensure overall consistency of the resulting documents and allow for advanced form interaction experience.</p>
+            <p>Currently, you can insert editable <em>plain text</em> fields, <em>combo boxes</em>, <em>dropdown lists</em>, <em>checkboxes</em>, <em>radio buttons</em>, and assign designated areas for <em>images</em>. Access these features on the <b>Forms</b> tab.</p>
+            <h2>Creating a new Plain Text Field</h2>
+            <p><em>Text fields</em> are user-editable plain text form fields; the text within cannot be formatted and no other objects can be added.</p>
+        <div class="forms">
+            <details class="details-example">
+                <summary>To insert a text field,</summary>
+                <ol>
+                    <li>position the insertion point within a line of the text where you want the field to be added,</li>
+                    <li>switch to the <b>Forms</b> tab of the top toolbar,</li>
+                    <li>
+                        click the <img alt="text field icon" src="../images/text_field_icon.png" /> <b>Text Field</b> icon.
+                    </li>
+                </ol>
+                <p><img alt="text field inserted" src="../images/text_field_inserted.png" /></p>
+                <p>The form field will appear at the insertion point within the existing text line. The <b>Form Settings</b> menu will open to the right.</p>
+                <p id="text_field_settings">
+                    <img class="floatleft" alt="text field settings" src="../images/text_field_settings.png" />
+                    <ul>
+                        <li><b>Key</b>: a key to group fields to fill out simultaneously. To create a new key, enter its name in the field and press <b>Enter</b>, then assign the required key to each text field using the dropdown list. A message <em>Fields connected: 2/3/...</em> will be displayed. To disconnect the fields, click the <b>Disconnect</b> button.</li>
+                        <li><b>Placeholder</b>: type in the text to be displayed in the inserted text field; <em>“Your text here”</em> is set by default.</li>
+                        <li>
+                            <b>Tip</b>: type in the text to be displayed as a tip when a user hovers their mouse pointer over the text field.
+                            <br /> <img alt="tip inserted" src="../images/text_field_tip.png" />
+                        </li>
+                        <li><b>Characters limit</b>: no limits by default; check this box to set the maximum characters number in the field to the right.</li>
+                        <li>
+                            <b>Comb of characters</b>: spread the text evenly within the inserted text field and configure its general appearance. Leave the box unchecked to preserve the default settings or check it to set the following parameters:
+                            <ul>
+                                <li><b>Cell width</b>: type in the required value or use the arrows to the right to set the width of the inserted text field. The text within will be justified accordingly.</li>
+                                <li><b>Border color</b>: click the icon <img alt="no fill" src="../images/nofill.png" />  to set the color for the borders of the inserted text field. Choose the preferred color out of <b>Standard Colors</b>. You can <b>add a new custom color</b> if necessary.</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </p>
+                <p><img alt="comb of characters" src="../images/comb_of_characters.png" /></p>
+                <p>Click within the inserted text field and <a href="../UsageInstructions/FontTypeSizeColor.htm">adjust the font type, size, color</a>, apply <a href="../UsageInstructions/DecorationStyles.htm">decoration styles</a> and <a href="../UsageInstructions/FormattingPresets.htm">formatting presets</a>.</p>
+            </details>
+        </div>
+
+        
+            <h2>Creating a new Combo box</h2>
+            <p><em>Combo boxes</em> contain a dropdown list with a set of choices that can be edited by users.</p>
+        <div class="forms">
+            <details class="details-example">
+                <summary>To insert a combo box,</summary>
+                <ol>
+                    <li>position the insertion point within a line of the text where you want the field to be added,</li>
+                    <li>switch to the <b>Forms</b> tab of the top toolbar,</li>
+                    <li>
+                        click the <img alt="combo box icon" src="../images/combo_box_icon.png" /> <b>Combo box</b> icon.
+                    </li>
+                </ol>
+                <p><img alt="combo box inserted" src="../images/combo_box_inserted.png" /></p>
+                <p>The form field will appear at the insertion point within the existing text line. The <b>Form Settings</b> menu will open to the right.</p>
+                <p id="combo_box_settings">
+                    <img class="floatleft" alt="combo box settings" src="../images/combo_box_settings.png" />
+                    <ul>
+                        <li><b>Key</b>: a key to group combo boxes to fill out simultaneously. To create a new key, enter its name in the field and press <b>Enter</b>, then assign the required key to each combo box using the dropdown list. A message <em>Fields connected: 2/3/...</em> will be displayed. To disconnect the fields, click the <b>Disconnect</b> button.</li>
+                        <li><b>Placeholder</b>: type in the text to be displayed in the inserted combo box; <em>“Choose an item”</em> is set by default.</li>
+                        <li>
+                            <b>Tip</b>: type in the text to be displayed as a tip when a user hovers their mouse pointer over the form field.
+                            <br /> <img alt="tip inserted" src="../images/combo_box_tip.png" />
+                        </li>
+                        <li><b>Value Options</b>: add<img alt="add values" src="../images/combo_add_values.png" /> new values, delete<img alt="delete values" src="../images/combo_delete_values.png" /> them, or move them up<img alt="values up" src="../images/combo_values_up.png" /> and <img alt="values down" src="../images/combo_values_down.png" />down in the list.</li>
+                    </ul>
+                </p>
+                <p>You can click the arrow button in the right part of the added <b>Combo box</b> to open the item list and choose the necessary one. Once the necessary item is selected, you can edit the displayed text entirely or partially by replacing it with yours.</p>
+                <p><img alt="combo box opened" src="../images/combo_box_opened.png" /></p>
+            </details>
+            <p>You can change font decoration, color, and size. Click within the inserted combo box and proceed according to the <a href="../UsageInstructions/FontTypeSizeColor.htm">instructions</a>.</p>
+        </div>
+
+        
+            <h2>Creating a new Dropdown list form field</h2>
+            <p><em>Dropdown lists</em> contain a list with a set of choices that cannot be edited by the users.</p>
+        <div class="forms">
+            <details class="details-example">
+                <summary>To insert a dropdown list,</summary>
+                <ol>
+                    <li>position the insertion point within a line of the text where you want the field to be added,</li>
+                    <li>switch to the <b>Forms</b> tab of the top toolbar,</li>
+                    <li>
+                        click the <img alt="dropdown list icon" src="../images/dropdown_list_icon.png" /> <b>Dropdown</b> icon.
+                    </li>
+                </ol>
+                <p><img alt="dropdown list inserted" src="../images/combo_box_inserted.png" /></p>
+                <p>The form field will appear at the insertion point within the existing text line. The <b>Form Settings</b> menu will open to the right.</p>
+                <p id="dropdown_list_settings">
+                    <img class="floatleft" alt="dropdown list settings" src="../images/dropdown_list_settings.png" />
+                    <ul>
+                        <li><b>Key</b>: a key to group dropdown lists to fill out simultaneously. To create a new key, enter its name in the field and press <b>Enter</b>, then assign the required key to each form field using the dropdown list. A message <em>Fields connected: 2/3/...</em> will be displayed. To disconnect the fields, click the <b>Disconnect</b> button.</li>
+                        <li><b>Placeholder</b>: type in the text to be displayed in the inserted dropdown list; <em>“Choose an item”</em> is set by default.</li>
+                        <li>
+                            <b>Tip</b>: type in the text to be displayed as a tip when a user hovers their mouse pointer over the form field.
+                            <br /> <img alt="tip inserted" src="../images/combo_box_tip.png" />
+                        </li>
+                        <li><b>Value Options</b>: add<img alt="add values" src="../images/combo_add_values.png" /> new values, delete<img alt="delete values" src="../images/combo_delete_values.png" /> them, or move them up<img alt="values up" src="../images/combo_values_up.png" /> and <img alt="values down" src="../images/combo_values_down.png" />down in the list.</li>
+                    </ul>
+                </p>
+                <p>You can click the arrow button in the right part of the added <b>Dropdown list</b> form field to open the item list and choose the necessary one.</p>
+                <p><img alt="dropdown list opened" src="../images/dropdown_list_opened.png" /></p>
+            </details>
+        </div>
+
+        
+            <h2>Creating a new Checkbox</h2>
+            <p><em>Checkboxes</em> are used to provide users with a variety of options, any number of which can be selected. Checkboxes operate individually, so they can be checked or unchecked independently.</p>
+        <div class="forms">
+            <details class="details-example">
+                <summary>To insert a checkbox,</summary>
+                <ol>
+                    <li>position the insertion point within a line of the text where you want the field to be added,</li>
+                    <li>switch to the <b>Forms</b> tab of the top toolbar,</li>
+                    <li>
+                        click the <img alt="checkbox icon" src="../images/checkbox_icon.png" /> <b>Checkbox</b> icon.
+                    </li>
+                </ol>
+                <p><img alt="checkbox inserted" src="../images/checkbox_inserted.png" /></p>
+                <p>The form field will appear at the insertion point within the existing text line. The <b>Form Settings</b> menu will open to the right.</p>
+                <p id="checkbox_settings">
+                    <img class="floatleft" alt="checkbox settings" src="../images/checkbox_settings.png" />
+                    <ul>
+                        <li><b>Key</b>: a key to group checkboxes to fill out simultaneously. To create a new key, enter its name in the field and press <b>Enter</b>, then assign the required key to each form field using the dropdown list. A message <em>Fields connected: 2/3/...</em> will be displayed. To disconnect the fields, click the <b>Disconnect</b> button.</li>
+                        <li>
+                            <b>Tip</b>: type in the text to be displayed as a tip when a user hovers their mouse pointer over the checkbox.
+                            <br /> <img alt="tip inserted" src="../images/checkbox_tip.png" />
+                        </li>
+                    </ul>
+                </p>
+                <p>To check the box, click it once.</p>
+                <p><img alt="checkbox checked" src="../images/checkbox_checked.png" /></p>
+            </details>
+        </div>
+
+        
+            <h2>Creating a new Radio Button</h2>
+            <p><em>Radio buttons</em> are used to provide users with a variety of options, only one of which can be selected. Radio buttons can be grouped so that there is no selecting several buttons within one group.</p>
+        <div class="forms">
+            <details class="details-example">
+                <summary>To insert a radio button,</summary>
+                <ol>
+                    <li>position the insertion point within a line of the text where you want the field to be added,</li>
+                    <li>switch to the <b>Forms</b> tab of the top toolbar,</li>
+                    <li>
+                        click the <img alt="radio button icon" src="../images/radio_button_icon.png" /> <b>Radio Button</b> icon.
+                    </li>
+                </ol>
+                <p><img alt="radio button inserted" src="../images/radio_button_inserted.png" /></p>
+                <p>The form field will appear at the insertion point within the existing text line. The <b>Form Settings</b> menu will open to the right.</p>
+                <p id="radio_button_settings">
+                    <img class="floatleft" alt="radio button settings" src="../images/radio_button_settings.png" />
+                    <ul>
+                        <li><b>Group key</b>: to create a new group of radio buttons, enter the name of the group in the field and press <b>Enter</b>, then assign the required group to each radio button.</li>
+                        <li>
+                            <b>Tip</b>: type in the text to be displayed as a tip when a user hovers their mouse pointer over the radio button.
+                            <br /> <img alt="tip inserted" src="../images/radio_button_tip.png" />
+                        </li>
+                    </ul>
+                </p>
+                <p>To check the radio button, click it once.</p>
+                <p><img alt="radio button checked" src="../images/radio_button_checked.png" /></p>
+            </details>
+        </div>
+
+        
+            <h2>Creating a new Image</h2>
+            <p><em>Images</em> are form fields which are used to enable inserting an image with the limitations you set, i.e. the location of the image or its size.</p>
+        <div class="forms">
+            <details class="details-example">
+                <summary>To insert an image form field,</summary>
+                <ol>
+                    <li>position the insertion point within a line of the text where you want the field to be added,</li>
+                    <li>switch to the <b>Forms</b> tab of the top toolbar,</li>
+                    <li>
+                        click the <img alt="image form icon" src="../images/image_form_icon.png" /> <b>Image</b> icon.
+                    </li>
+                </ol>
+                <p><img alt="image form inserted" src="../images/image_form_inserted.png" /></p>
+                <p>The form field will appear at the insertion point within the existing text line. The <b>Form Settings</b> menu will open to the right.</p>
+                <p id="image_form_settings">
+                    <img class="floatleft" alt="image form settings" src="../images/image_form_settings.png" />
+                    <ul>
+                        <li><b>Key</b>: a key to group dropdown lists to fill out simultaneously. To create a new key, enter its name in the field and press <b>Enter</b>, then assign the required key to each form field using the dropdown list. A message <em>Fields connected: 2/3/...</em> will be displayed. To disconnect the fields, click the <b>Disconnect</b> button.</li>
+                        <li><b>Placeholder</b>: type in the text to be displayed in the inserted image form field; <em>“Click to load image”</em> is set by default.</li>
+                        <li>
+                            <b>Tip</b>: type in the text to be displayed as a tip when a user hovers their mouse pointer over the bottom border of the image.
+                        </li>
+                        <li><b>Select Image</b>: click this button to upload an image either <b>From File</b>, <b>From URL</b>, or <b>From Storage</b>.</li>
+                    </ul>
+                </p>
+                <p>To replace the image, click the <img alt="image icon" src="../images/image.png" /> image icon above the form field border and select another one.</p>
+                <p>To <b>adjust</b> the image settings, open the <b>Image Settings</b> tab on the right toolbar. To learn more, please read the guide on <a href="../UsageInstructions/InsertImages.htm">image settings</a>.</p>
+            </details>
+        </div>
+
+        
+            <h2>Highlight forms</h2>
+            <p>You can highlight inserted form fields with a certain color.</p>
+        <div class="forms">
+            <details class="details-example">
+                <summary>To highlight fields,</summary>
+                <p id="highlight_settings">
+                    <img alt="highlight settings" src="../images/highlight_settings.png" />
+                    <ul>
+                        <li>open the <b>Highlight Settings</b> on the <b>Forms</b> tab of the top toolbar,</li>
+                        <li>choose a color from the <b>Standard Colors</b>. You can also <b>add a new custom color</b>,</li>
+                        <li>to remove previously applied color highlighting, use the <b>No highlighting</b> option.</li>
+                    </ul>
+                </p>
+                <p>The selected highlight options will be applied to all form fields in the document.</p>
+                <p class="note">
+                    <b>Note</b>: The form field border is only visible when the field is selected. The borders do not appear on a printed version.
+                </p>
+            </details>
+        </div>
+
+            <h2>Enabling the View form</h2>
+            <p class="note">
+                <b>Note</b>: Once you have entered the <b>View form</b> mode, all editing options will become unavailable.
+            </p>
+            <p>Click the <img alt="view form button" src="../images/view_form_icon.png" /> <b>View form</b> button on the <b>Forms</b> tab of the top toolbar to see how all the inserted forms will be displayed in your document.</p>
+            <p><img alt="view form active" src="../images/view_form_active.png" /></p>
+            <p>To <b>exit</b> the viewing mode, click the same icon again.</p>
+
+            <h2>Moving form fields</h2>
+            <p>Form fields can be moved to another place in the document: click the button on the left of the control border to select the field and drag it without releasing the mouse button to another position in the text.</p>
+            <p><img alt="moving form fields" src="../images/moving_form_fields.png" /></p>
+            <p>You can also <b>copy and paste</b> form fields: select the necessary field and use the <b>Ctrl+C/Ctrl+V</b> key combinations.</p>
+
+            <h2>Locking form fields</h2>
+            <p>To <b>prevent further editing</b> of the inserted form field, click the <img alt="lock form icon" src="../images/lock_form_icon.png" /> <b>Lock</b> icon. Filling the fields remains available.</p>
+
+            <h2>Clearing form fields</h2>
+            <p>To clear all inserted fields and delete all values, click the <img alt="clear fields icon" src="../images/clear_fields_icon.png" /> <b>Clear All Fields</b> button on the <b>Forms</b> tab on the top toolbar.</p>
+
+            <h2>Removing form fields</h2>
+            <p>To remove a form field and leave all its contents, select it and click the <img alt="delete form icon" src="../images/combo_delete_values.png" /> <b>Delete</b> icon (make sure the field is not locked) or press the <b>Delete</b> key on the keyboard.</p>
+        </div>
+</body>
+</html>

apps/documenteditor/main/resources/help/en/UsageInstructions/FontTypeSizeColor.htm

@@ -25,7 +25,7 @@
 				<tr>
 					<td>Font size</td>
 					<td><img alt="Font size" src="../images/fontsize.png" /></td>
-					<td>Used to choose from the preset font size values in the dropdown list (the default values are: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 and 96). It's also possible to manually enter a custom value in the font size field and then press <em>Enter</em>.</td>
+					<td>Used to choose from the preset font size values in the dropdown list (the default values are: 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 and 96).  It's also possible to manually enter a custom value up to 300 pt in the font size field. Press <em>Enter</em> to confirm.</td>
 				</tr>
                 <tr>
                     <td>Increment font size</td>

apps/documenteditor/main/resources/help/en/UsageInstructions/FormattingPresets.htm

@@ -15,6 +15,7 @@
         </div>
 			<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 the consistent appearance of the whole document.</p>
+            <p>You can also use styles to create a <a href="../UsageInstructions/CreateTableOfContents.htm" onclick="onhyperlinkclick(this)">table of contents</a> or a <a href="../UsageInstructions/AddTableofFigures.htm" onclick="onhyperlinkclick(this)">table of figures</a>.</p>
             <p class="note">Applying a style depends on whether this style is a paragraph style (normal, no spacing, headings, list paragraph etc.), or a text style (based on the font type, size, color). It also depends on whether a text passage is selected, or the mouse cursor is placed on a word. In some cases you might need to select the required style from the style library twice, so that it can be applied correctly: when you click the style in the style panel for the first time, the paragraph style properties are applied. When you click it for the second time, the text properties are applied.</p>
             <h3>Use default styles</h3>
             <p>To apply one of the available text formatting styles,</p>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertCharts.htm

@@ -76,7 +76,7 @@
                 </li>
 				<li>change the chart settings by 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</b> tab allows you to change the chart type as well as the data you wish to use to create a chart.</p>
+                    <p>The <b>Type</b> tab allows you to change the chart type.</p>
                     <ul>
                         <li>Select a chart <b>Type</b> you wish to apply: Column, Line, Pie, Bar, Area, XY (Scatter), or Stock.</li>
                     </ul>

apps/documenteditor/main/resources/help/en/UsageInstructions/InsertContentControls.htm

@@ -14,9 +14,10 @@
             <input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
         </div>
 			<h1>Insert content controls</h1>
-            <p>Content controls are objects containing different types of contents, such as text, objects etc. Depending on the selected content control type, you can create a form with input fields that can be filled in by other users, or protect some parts of the document from being edited or deleted, etc.</p>
+            <p>Content controls are objects containing different types of content, such as text, objects, etc. Depending on the selected content control type, you can collaborate on documents by using the available content controls array, or lock the ones that do not need further editing and unlock those that require your colleagues’ input, etc. Content controls are typically used to facilitate data gathering and processing or to set necessary boundaries for documents edited by other users.</p>
+            <p>ONLYOFFICE Document Editor allows you to insert <b>classic</b> content controls, i.e. they are fully <b>backward compatible</b> with the third-party word processors such as Microsoft Word.</p>
             <p class="note"><b>Note</b>: the feature to add new content controls is available in the <b>paid</b> version only. In the free Community version, you can edit existing content controls, as well as copy and paste them.</p>
-            <p>Currently, you can add the following types of content controls: <em>Plain Text</em>, <em>Rich Text</em>, <em>Picture</em>, <em>Combo box</em>, <em>Drop-down list</em>, <em>Date</em>, <em>Check box</em>.</p>
+            <p>ONLYOFFICE Document Editor supports the following classic content controls: <em>Plain Text</em>, <em>Rich Text</em>, <em>Picture</em>, <em>Combo box</em>, <em>Drop-down list</em>, <em>Date</em>, <em>Check box</em>.</p>
             <ul>
                 <li><em>Plain Text</em> is an object containing text that cannot be formatted. Plain text content controls cannot contain more than one paragraph.</li>
                 <li><em>Rich Text</em> is an object containing text that can be formatted. Rich text content controls can contain several paragraphs, lists, and objects (images, shapes, tables etc.).</li>

apps/documenteditor/main/resources/help/en/editor.css

@@ -20,7 +20,7 @@ img
 {
 border: none;
 vertical-align: middle;
-max-width: 95%;
+max-width: 100%;
 }
 
 img.floatleft 
@@ -231,3 +231,7 @@ kbd {
 .right_option {
     border-radius: 0 2px 2px 0;
 }
+
+.forms {
+    display: inline-block;
+}

apps/documenteditor/main/resources/help/es/ProgramInterface/PluginsTab.htm

@@ -34,7 +34,9 @@
                 <li class="onlineDocumentFeatures"><b>Discurso</b> permite convertir el texto seleccionado en un discurso,</li>
                 <li><b>Tabla de símbolos</b> permite introducir símbolos especiales en su texto,</li>
                 <li>El <b>Diccionario de sinónimos</b> permite buscar tanto sinónimos como antónimos de una palabra y reemplazar esta palabra por la seleccionada,</li>
-                <li><b>Traductor</b> permite traducir el texto seleccionado a otros idiomas,</li>
+                <li><b>Traductor</b> permite traducir el texto seleccionado a otros idiomas,
+                    <p class="note"><b>Nota</b>: este complemento no funciona en Internet Explorer.</p>
+                </li>
                 <li><b>YouTube</b> permite incorporar vídeos en su documento.</li>
             </ul>
             <p class="onlineDocumentFeatures">Los plugins <b>Wordpress</b> y <b>EasyBib</b> pueden usarse si conecta los servicios correspondientes en la configuración de su portal. Puede utilizar las siguientes instrucciones <a target="_blank" href="https://helpcenter.onlyoffice.com/server/windows/community/authorization-keys.aspx" onclick="onhyperlinkclick(this)">para la versión de servidor</a> o <a target="_blank" href="https://helpcenter.onlyoffice.com/tipstricks/authorization-keys-saas.aspx" onclick="onhyperlinkclick(this)">para la versión SaaS</a>.</p>

apps/documenteditor/main/resources/help/es/UsageInstructions/FontTypeSizeColor.htm

@@ -18,8 +18,8 @@
 			<p class="note"><b>Nota</b>: si quiere aplicar el formato al texto existente en el documento, selecciónelo con el ratón o <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">use el teclado</a> y aplique el formato.</p>
 			<table>
 				<tr>
-					<td>Fuente</td>
-					<td><img alt="Fuente" src="../images/fontfamily.png" /></td>
+                    <td width="10%">Fuente</td>
+                    <td width="15%"><img alt="Fuente" src="../images/fontfamily.png" /></td>
 					<td>Se usa para elegir una letra en la lista de letras disponibles. <span class="desktopDocumentFeatures">Si una fuente determinada no está disponible en la lista, puede descargarla e instalarla en su sistema operativo, y después la fuente estará disponible para su uso en la <em>versión  de escritorio</em>.</span></td>
 				</tr>
 				<tr>

apps/documenteditor/main/resources/help/es/editor.css

@@ -6,11 +6,21 @@ color: #444;
 background: #fff;
 }
 
+.cross-reference th{
+text-align: center;
+vertical-align: middle;
+}
+
+.cross-reference td{
+text-align: center;
+vertical-align: middle;
+}
+
 img
 {
 border: none;
 vertical-align: middle;
-max-width: 95%;
+max-width: 100%;
 }
 
 img.floatleft 
@@ -187,3 +197,40 @@ kbd {
     margin: 0.2em 0.1em;
     color: #000;
 }
+.shortcut_variants {
+    margin: 20px 0 -20px;
+    padding: 0;
+}
+.shortcut_toggle {
+    display: inline-block;
+    margin: 0;
+    padding: 1px 10px;
+    list-style-type: none;
+    cursor: pointer;
+    font-size: 11px;
+    line-height: 18px;
+    white-space: nowrap
+}
+.shortcut_toggle.enabled {
+    color: #fff;
+    background-color: #7D858C;
+    border: 1px solid #7D858C;
+}
+.shortcut_toggle.disabled {
+    color: #444;
+    background-color: #fff;
+    border: 1px solid #CFCFCF;
+}
+.shortcut_toggle.disabled:hover {
+    background-color: #D8DADC;
+}
+.left_option {
+    border-radius: 2px 0 0 2px;
+    float: left;
+}
+.right_option {
+    border-radius: 0 2px 2px 0;
+}
+.forms {
+    display: inline-block;
+}