Merge pull request 'feature/hotfix-8-3-1' (#293) from feature/hotfix-8-3-1 into hotfix/v8.3.1

This commit is contained in:
Maxim Kadushkin
2025-02-10 07:53:14 +00:00
93 changed files with 883 additions and 553 deletions

View File

@ -332,7 +332,8 @@
url: 'document url',
fileType: 'document file type',
key: 'key',
vkey: 'vkey'
vkey: 'vkey',
isForm: 'pdf form' / false/true
},
editorConfig: {
licenseUrl: <url for license>,

View File

@ -924,6 +924,14 @@ define([
t == utils.defines.FileFormat.FILE_CROSSPLATFORM_PDF ||
t == utils.defines.FileFormat.FILE_CROSSPLATFORM_DJVU ||
t == utils.defines.FileFormat.FILE_CROSSPLATFORM_XPS;
} else
if ( window.VE ) {
return t == utils.defines.FileFormat.FILE_DRAW_VSDX ||
t == utils.defines.FileFormat.FILE_DRAW_VSDM ||
t == utils.defines.FileFormat.FILE_DRAW_VSTX ||
t == utils.defines.FileFormat.FILE_DRAW_VSTM ||
t == utils.defines.FileFormat.FILE_DRAW_VSSX ||
t == utils.defines.FileFormat.FILE_DRAW_VSSM;
}
return false;

View File

@ -112,6 +112,7 @@ define([
],
lock = (this.appPrefix === 'de-') ? [_set.headerLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.docLockViewIns, _set.docLockForms, _set.docLockCommentsIns, _set.viewMode] :
(this.appPrefix === 'pe-') ? [_set.slideDeleted, _set.lostConnect, _set.noSlides] :
(this.appPrefix === 'pdfe-') ? [_set.pageDeleted, _set.lostConnect] :
[_set.editCell, _set.lostConnect, _set.coAuth, _set['Objects']],
me = this;
penOptions.forEach(function (props) {

View File

@ -2948,7 +2948,7 @@ define([
// Numbering
var loadPreset = function(url, lang, callback) {
lang = lang.replace('_', '-').toLowerCase();
lang = (lang || 'en').replace('_', '-').toLowerCase();
Common.Utils.loadConfig(url, function (langJson) {
var presets;
if (langJson !== 'error') {

View File

@ -91,11 +91,6 @@
<li>The <b>Alignment guides</b> option is used to turn on/off alignment guides that appear when you move objects. It allows for a more precise object positioning on the page.</li>
<li>The <b>Use Alt key to navigate the user interface using the keyboard</b> option is used to enable using the <em>Alt</em> / <em>Option</em> key in keyboard shortcuts.</li>
<li><span class="desktopDocumentFeatures"><b>Show the Quick Print button in the editor header</b> is used in the <em>desktop version</em> to enable quick printing via the corresponding button at the top toolbar. The file will be printed on the last selected or default printer.</span></li>
<li>
<span class="onlineDocumentFeatures">The <b>RTL Interface (Beta)</b> option is used to change the direction in which elements of the interface are displayed.</span>
<span class="desktopDocumentFeatures">In the <em>desktop</em> editors, the <b>RTL Interface (Beta)</b> option can be accessed on the main settings page. To learn more, please refer to the <a href="https://helpcenter.onlyoffice.com/installation/desktop-getting-started.aspx#ChangingSettings_block" target="_blank" onclick="onhyperlinkclick(this)">desktop getting started</a> guide.</span>
<p class="note">This option is available only for interface languages that require RTL.</p>
</li>
<li>The <b>Customize quick access</b> button is used to choose which buttons shall be available in the top toolbar, i.e., <em>Save</em>, <em>Print</em>, <em>Undo</em>, and <em>Redo</em>.</li>
<li>The <b>Unit of measurement</b> option is used to specify what units are used on the rulers and in properties of objects when setting such parameters as width, height, spacing, margins etc. The available units are <em>Centimeter</em>, <em>Point</em>, and <em>Inch</em>.</li>

View File

@ -34,6 +34,7 @@
<p class="note"><b>Note</b>: The direct link allows downloading the file directly without opening it in a web browser. For example, to get a direct link in Nextcloud, find the necessary document in the file list, select the <b>Details</b> option from the file menu. Click the <b>Copy direct link (only works for users who have access to this file/folder)</b> icon on the right of the file name on the details panel. To find out how to get a direct link for downloading the file in a different third-party web storage, please refer to the corresponding third-party service documentation.</p>
</li>
<li class="onlineDocumentFeatures"> the <b>Document from Storage</b> option <!--(available in the <em>online version</em> only)--> will open the <b>Select Data Source</b> window. It displays the list of all the <em>.docx</em> documents stored on your portal you have corresponding access rights to. To navigate through the sections of the <b>Documents</b> module, use the menu on the left part of the window. Select the necessary <em>.docx</em> document and click the <b>OK</b> button.</li>
<li>the <b>Comparison settings</b> option will open the settings window for document comparison. Choose whether you want to show changes at <em>character level</em>, where all characters are included, or at <em>word level</em>, where the process relies on words rather than characters.</li>
</ul>
</li>
</ol>
@ -51,6 +52,8 @@
the <b>Document from URL</b> option will open the window where you can enter a link to the file stored in a third-party web storage (for example, Nextcloud) if you have corresponding access rights to it. The link must be a <b>direct link for downloading the file</b>. When the link is specified, click the <b>OK</b> button.
<p class="note"><b>Note</b>: The direct link allows downloading the file directly without opening it in a web browser. For example, to get a direct link in Nextcloud, find the necessary document in the file list, select the <b>Details</b> option from the file menu. Click the <b>Copy direct link (only works for users who have access to this file/folder)</b> icon on the right of the file name on the details panel. To find out how to get a direct link for downloading the file in a different third-party web storage, please refer to the corresponding third-party service documentation.</p>
</li>
<li class="onlineDocumentFeatures">the <b>Document from Storage</b> option will open the <b>Select Data Source</b> window. It displays the list of all the <em>.docx</em> documents stored on your portal you have corresponding access rights to. To navigate through the sections of the <b>Documents</b> module, use the menu on the left part of the window. Select the necessary <em>.docx</em> document and click the <b>OK</b> button.</li>
<li>the <b>Comparison settings</b> option will open the settings window for document comparison. Choose whether you want to show changes at <em>character level</em>, where all characters are included, or at <em>word level</em>, where the process relies on words rather than characters.</li>
</ul>
</li>
</ol>

View File

@ -104,6 +104,22 @@
<td></td>
<td>+</td>
</tr>
<tr>
<td>HWP</td>
<td>Hangul Word Processor<br />Hanword document file</td>
<td></td>
<td>+</td>
<td></td>
<td>+</td>
</tr>
<tr>
<td>HWPX</td>
<td>Hangul Word Processor 2010 Document<br>Hanword document file</td>
<td></td>
<td>+</td>
<td></td>
<td>+</td>
</tr>
<tr>
<td>MHTML</td>
<td>MIME (Multipurpose Internet Mail Extensions) HTML<br />A web archive format that combines all the contents of a webpage.</td>

View File

@ -33,6 +33,7 @@
<li>change paragraph <a href="../UsageInstructions/ParagraphIndents.htm" onclick="onhyperlinkclick(this)">indents</a>,</li>
<li>set paragraph <a href="../UsageInstructions/LineSpacing.htm" onclick="onhyperlinkclick(this)">line spacing</a>,</li>
<li><a href="../UsageInstructions/AlignText.htm" onclick="onhyperlinkclick(this)">align your text</a> in a paragraph,</li>
<li>change the <a href="../UsageInstructions/AlignText.htm" onclick="onhyperlinkclick(this)">text direction</a>,</li>
<li>show/hide <a href="../UsageInstructions/NonprintingCharacters.htm" onclick="onhyperlinkclick(this)">non-printing characters</a>,</li>
<li><a href="../UsageInstructions/CopyClearFormatting.htm" onclick="onhyperlinkclick(this)">copy/clear</a> text formatting,</li>
<li>manage <a href="../UsageInstructions/FormattingPresets.htm" onclick="onhyperlinkclick(this)">styles</a>.</li>

View File

@ -10,40 +10,42 @@
<script type="text/javascript" src="../../../../../../common/main/resources/help/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>Align and arrange objects on the page</h1>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Align and arrange objects on the page</h1>
<p>In the <a href="https://www.onlyoffice.com/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a>, the added <b>autoshapes, images, charts</b> or <b>text boxes</b> can be aligned, grouped and ordered on the page. To perform any of these actions, first select a separate object or several objects on the page. To select several objects, hold down the <b>Ctrl</b> key and left-click the required objects. To select a text box, click on its border, not the text within it. After that, you can use either the icons on the <b>Layout</b> tab of the top toolbar, described below, or the corresponding options from the right-click menu.</p>
<h3>Align objects</h3>
<h3>Align objects</h3>
<p>To <b>align</b> <em>two or more</em> selected objects, </p>
<ol>
<li>Click the <div class = "icon icon-align_toptoolbar"></div> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Page</b> to align objects relative to the edges of the page,</li>
<li><b>Align to Margin</b> to align objects relative to the page margins,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to align objects relative to each other,</li>
</ul>
</li>
<li>Click the <div class = "icon icon-align_toptoolbar"></div> <b>Align</b> icon once again and select the necessary alignment type from the list:
<ul>
<li><b>Align Left</b> <div class = "icon icon-alignobjectleft"></div> - to line up the objects horizontally by the left edge of the leftmost object/left edge of the page/left page margin,</li>
<li><b>Align Center</b> <div class = "icon icon-alignobjectcenter"></div> - to line up the objects horizontally by their centers/center of the page/center of the space between the left and right page margins,</li>
<li><b>Align Right</b> <div class = "icon icon-alignobjectright"></div> - to line up the objects horizontally by the right edge of the rightmost object/right edge of the page/right page margin,</li>
<li><b>Align Top</b> <div class = "icon icon-alignobjecttop"></div> - to line up the objects vertically by the top edge of the topmost object/top edge of the page/top page margin,</li>
<li><b>Align Middle</b> <div class = "icon icon-alignobjectmiddle"></div> - to line up the objects vertically by their middles/middle of the page/middle of the space between the top and bottom page margins,</li>
<li><b>Align Bottom</b> <div class = "icon icon-alignobjectbottom"></div> - to line up the objects vertically by the bottom edge of the bottommost object/bottom edge of the page/bottom page margin.</li>
</ul>
</li>
</ol>
<ol>
<li>
Click the <div class="icon icon-align_toptoolbar"></div> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Page</b> to align objects relative to the edges of the page,</li>
<li><b>Align to Margin</b> to align objects relative to the page margins,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to align objects relative to each other,</li>
</ul>
</li>
<li>
Click the <div class="icon icon-align_toptoolbar"></div> <b>Align</b> icon once again and select the necessary alignment type from the list:
<ul>
<li><b>Align Left</b> <div class="icon icon-alignobjectleft"></div> - to line up the objects horizontally by the left edge of the leftmost object/left edge of the page/left page margin,</li>
<li><b>Align Center</b> <div class="icon icon-alignobjectcenter"></div> - to line up the objects horizontally by their centers/center of the page/center of the space between the left and right page margins,</li>
<li><b>Align Right</b> <div class="icon icon-alignobjectright"></div> - to line up the objects horizontally by the right edge of the rightmost object/right edge of the page/right page margin,</li>
<li><b>Align Top</b> <div class="icon icon-alignobjecttop"></div> - to line up the objects vertically by the top edge of the topmost object/top edge of the page/top page margin,</li>
<li><b>Align Middle</b> <div class="icon icon-alignobjectmiddle"></div> - to line up the objects vertically by their middles/middle of the page/middle of the space between the top and bottom page margins,</li>
<li><b>Align Bottom</b> <div class="icon icon-alignobjectbottom"></div> - to line up the objects vertically by the bottom edge of the bottommost object/bottom edge of the page/bottom page margin.</li>
</ul>
</li>
</ol>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available alignment options.</p>
<p>If you want to align a single object, it can be aligned relative to the edges of the page or to the page margins. The <b>Align to Margin</b> option is selected by default in this case.</p>
<h3>Distribute objects</h3>
<p>To <b>distribute</b> <em>three or more</em> selected objects horizontally or vertically so that there is equal space between them, </p>
<ol>
<li>
Click the <div class = "icon icon-align_toptoolbar"></div> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select one of the following options:
Click the <div class="icon icon-align_toptoolbar"></div> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Page</b> to distribute objects between the edges of the page,</li>
<li><b>Align to Margin</b> to distribute objects between the page margins,</li>
@ -51,36 +53,45 @@
</ul>
</li>
<li>
Click the <div class = "icon icon-align_toptoolbar"></div> <b>Align</b> icon once again and select the necessary distribution type from the list:
Click the <div class="icon icon-align_toptoolbar"></div> <b>Align</b> icon once again and select the necessary distribution type from the list:
<ul>
<li><b>Distribute Horizontally</b> <div class = "icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the page/left and right page margins<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
<li><b>Distribute Vertically</b> <div class = "icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the page/top and bottom page margins<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
<li><b>Distribute Horizontally</b> <div class="icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the page/left and right page margins<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
<li><b>Distribute Vertically</b> <div class="icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the page/top and bottom page margins<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
</ul>
</li>
</ol>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available distribution options.</p>
<p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
<h3>Group objects</h3>
<p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the arrow next to the <span class = "icon icon-group_toptoolbar"></span> <b>Group</b> icon at the <b>Layout</b> tab on the top toolbar and select the necessary option from the list:</p>
<p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the arrow next to the <span class="icon icon-group_toptoolbar"></span> <b>Group</b> icon at the <b>Layout</b> tab on the top toolbar and select the necessary option from the list:</p>
<ul>
<li><b>Group</b> <div class = "icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <div class = "icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
<li><b>Group</b> <div class="icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <div class="icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
</ul>
<p>Alternatively, you can right-click the selected objects, choose the <b>Arrange</b> option from the contextual menu and then use the <b>Group</b> or <b>Ungroup</b> option.</p>
<p class="note"><b>Note</b>: the <b>Group</b> option is disabled if you select less than two objects. The <b>Ungroup</b> option is available only when a group of the previously combined objects is selected.</p>
<h3>Arrange objects</h3>
<p>To <b>arrange</b> objects (i.e., to change their order when several objects overlap each other), you can use the <span class = "icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> and <span class = "icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icons on the <b>Layout</b> tab of the top toolbar and select the required arrangement type from the list.</p>
<p>To move the selected object(s) forward, click the arrow next to the <span class = "icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> icon on the <b>Layout</b> tab of the top toolbar and select the required arrangement type from the list:</p>
<p>To <b>arrange</b> objects (i.e., to change their order when several objects overlap each other), you can use the <span class="icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> and <span class="icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icons on the <b>Layout</b> tab of the top toolbar and select the required arrangement type from the list.</p>
<p>To move the selected object(s) forward, click the arrow next to the <span class="icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> icon on the <b>Layout</b> tab of the top toolbar and select the required arrangement type from the list:</p>
<ul>
<li><b>Bring To Foreground</b> <div class = "icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
<li><b>Bring Forward</b> <div class = "icon icon-bringforward"></div> - to move the selected object(s) by one level forward as related to other objects.</li>
<li><b>Bring To Foreground</b> <div class="icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
<li><b>Bring Forward</b> <div class="icon icon-bringforward"></div> - to move the selected object(s) by one level forward as related to other objects.</li>
</ul>
<p>To move the selected object(s) backward, click the arrow next to the <span class = "icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icon on the <b>Layout</b> tab of the top toolbar and select the required arrangement type from the list:</p>
<p>To move the selected object(s) backward, click the arrow next to the <span class="icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icon on the <b>Layout</b> tab of the top toolbar and select the required arrangement type from the list:</p>
<ul>
<li><b>Send To Background</b> <div class = "icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
<li><b>Send Backward</b> <div class = "icon icon-sendbackward"></div> - to move the selected object(s) by one level backward as related to other objects.</li>
<li><b>Send To Background</b> <div class="icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
<li><b>Send Backward</b> <div class="icon icon-sendbackward"></div> - to move the selected object(s) by one level backward as related to other objects.</li>
</ul>
<p>Alternatively, you can right-click the selected object(s), choose the <b>Arrange</b> option from the contextual menu and then use one of the available arrangement options.</p>
</div>
<h3 id="boolean">Boolean operations on shapes</h3>
<p>To access the logical operations on shapes, select the <b>Merge shapes</b> menu item in the context menu. The Boolean operations include the following:</p>
<ul>
<li><b>Union</b> - the shapes will be united into one group and share one area.</li>
<li><b>Combine</b> - the shapes will be united into one group, but the shared area will be highlighted.</li>
<li><b>Fragment</b> - the shapes will be united into one group, but the shared area will be outlined.</li>
<li><b>Intersect</b> - creates a new shape from the areas where the selected shapes overlap.</li>
<li><b>Subtract</b> - removes the area of a shape from the one underneath it.</li>
</ul>
</div>
</body>
</html>

View File

@ -36,6 +36,11 @@
<li>click the <b>OK</b> button to apply the changes.</li>
</ol>
<p><img alt="Paragraph Advanced Settings - Indents &amp; Spacing" src="../images/paradvsettings_indents.png" /></p>
<p>Here, you can change the text direction as well in the <b>Direction</b> section:</p>
<ul>
<li><b>Left-to-right</b> - the text will be written and formatted left-to-right.</li>
<li><b>Right-to-left</b> - the text will be written and formatted right-to-left.</li>
</ul>
</div>
</body>
</html>

View File

@ -589,6 +589,18 @@
</details>
</div>
<h2 id="editing_fields">Editing fields</h2>
<ol>
<li>Select the required field and click with the right mouse button to open the context menu.</li>
<li>
<ul>
<li><em>Update field</em> - update the information in the field.</li>
<li><em>Edit field</em> - open the window for editing the field.</li>
<li><em>Toggle field codes</em> - display the field code.</li>
</ul>
</li>
</ol>
<h2 id="managing_roles">Managing Roles</h2>
<p>You can create new roles that will determine who can fill in certain form fields.</p>
<div class="forms">

View File

@ -217,6 +217,17 @@
</tbody>
</table>
</div>
<p>The field codes can be edited and updated on the go:</p>
<ol>
<li>Select the required field and click with the right mouse button to open the context menu.</li>
<li>
<ul>
<li><em>Update field</em> - update the information in the field.</li>
<li><em>Edit field</em> - open the window for editing the field.</li>
<li><em>Toggle field codes</em> - display the field code.</li>
</ul>
</li>
</ol>
</div>
</body>
</html>

View File

@ -47,9 +47,10 @@
<h3>Adjust image settings</h3>
<p><img alt="Image Settings tab" src="../images/right_image.png" /></p>
<p>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> <span class = "icon icon-image_settings_icon"></span> icon on the right. Here you can change the following properties:</p>
<ul>
<li><b>Size</b> is used to view the <b>Width</b> and <b>Height</b> of the current image. If necessary, you can restore the actual image size clicking the <b>Actual Size</b> button. The <b>Fit to Margin</b> button allows you to resize the image, so that it occupies all the space between the left and right page margin.
<p>The <b>Crop</b> button is used to crop the image. Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of each its side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the <span class = "icon icon-arrow"></span> icon and drag the area. </p>
<ul>
<li>
<b>Size</b> is used to view the <b>Width</b> and <b>Height</b> of the current image. If necessary, you can restore the actual image size clicking the <b>Actual Size</b> button. The <b>Fit to Margin</b> button allows you to resize the image, so that it occupies all the space between the left and right page margin.
<p>The <b>Crop</b> button is used to crop the image. Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of each its side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the <span class="icon icon-arrow"></span> icon and drag the area. </p>
<ul>
<li>To crop a single side, drag the handle located in the center of this side.</li>
<li>To simultaneously crop two adjacent sides, drag one of the corner handles.</li>
@ -63,18 +64,21 @@
<li>If you select the <b>Fill</b> option, the central part of the original image will be preserved and used to fill the selected cropping area, while the other parts of the image will be removed.</li>
<li>If you select the <b>Fit</b> option, the image will be resized so that it fits the height and the width of the cropping area. No parts of the original image will be removed, but empty spaces may appear within the selected cropping area.</li>
</ul>
</li>
<li><b>Rotation</b> is used to rotate the image by 90 degrees clockwise or counterclockwise as well as to flip the image horizontally or vertically. Click one of the buttons:
<p>To return the image to its default pixel dimensions, click the <b>Reset crop</b> button.</p>
</li>
<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>
<b>Rotation</b> is used to rotate the image by 90 degrees clockwise or counterclockwise as well as to flip the image horizontally or vertically. Click one of the buttons:
<ul>
<li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the image by 90 degrees counterclockwise</li>
<li><div class = "icon icon-rotateclockwise"></div> to rotate the image by 90 degrees clockwise</li>
<li><div class = "icon icon-fliplefttoright"></div> to flip the image horizontally (left to right)</li>
<li><div class = "icon icon-flipupsidedown"></div> to flip the image vertically (upside down)</li>
<li><div class="icon icon-rotatecounterclockwise"></div> to rotate the image by 90 degrees counterclockwise</li>
<li><div class="icon icon-rotateclockwise"></div> to rotate the image by 90 degrees clockwise</li>
<li><div class="icon icon-fliplefttoright"></div> to flip the image horizontally (left to right)</li>
<li><div class="icon icon-flipupsidedown"></div> to flip the image vertically (upside down)</li>
</ul>
</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 by loading another one <b>From File</b>, <b>From Storage</b>, or <b>From URL</b>.</li>
</ul>
</ul>
<p>You can also find some of these options in 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 the selected text/object and paste the previously cut/copied text passage or object to the current cursor position.</li>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

File diff suppressed because one or more lines are too long

View File

@ -246,9 +246,15 @@ define([], function () {
var menu_props = {};
selectedElements && _.each(selectedElements, function(element, index) {
if (Asc.c_oAscTypeSelectElement.Annot == element.get_ObjectType()) {
var elType = element.get_ObjectType(),
elValue = element.get_ObjectValue();
if (Asc.c_oAscTypeSelectElement.Annot == elType) {
menu_props.annotProps = {};
menu_props.annotProps.value = element.get_ObjectValue();
menu_props.annotProps.value = elValue;
} else if (Asc.c_oAscTypeSelectElement.PdfPage == elType) {
menu_props.pageProps = {};
menu_props.pageProps.value = elValue;
menu_props.pageProps.locked = (elValue) ? elValue.asc_getDeleteLock() : false;
}
});
@ -314,6 +320,10 @@ define([], function () {
menu_to_show = documentHolder.editPDFModeMenu;
menu_props.annotProps = {};
menu_props.annotProps.value = elValue;
} else if (Asc.c_oAscTypeSelectElement.PdfPage == elType) {
menu_props.pageProps = {};
menu_props.pageProps.value = elValue;
menu_props.pageProps.locked = (elValue) ? elValue.asc_getDeleteLock() : false;
}
});
if (menu_to_show === null) {

View File

@ -927,7 +927,8 @@ define([
var pr, i = -1, type,
paragraph_locked = false,
no_paragraph = true,
in_chart = false;
in_chart = false,
page_deleted = false;
while (++i < selectedObjects.length) {
type = selectedObjects[i].get_ObjectType();
@ -944,6 +945,8 @@ define([
if (type == Asc.c_oAscTypeSelectElement.Chart) {
in_chart = true;
}
} else if (type == Asc.c_oAscTypeSelectElement.PdfPage) {
page_deleted = pr.asc_getDeleteLock();
}
}
@ -961,6 +964,11 @@ define([
if (this._state.activated) this._state.no_paragraph = no_paragraph;
Common.Utils.lockControls(Common.enumLock.noParagraphSelected, no_paragraph, {array: this.view.lockedControls});
}
if (page_deleted !== undefined && this._state.pagecontrolsdisable !== page_deleted) {
if (this._state.activated) this._state.pagecontrolsdisable = page_deleted;
Common.Utils.lockControls(Common.enumLock.pageDeleted, page_deleted, {array: this.view.lockedControls});
}
},
onApiCanAddHyperlink: function(value) {

View File

@ -389,6 +389,7 @@ define([
this.toolbar.setApi(this.api);
this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onApiFocusObjectAnnotate, this));
this.api.asc_registerCallback('asc_onCanUndo', _.bind(this.onApiCanRevert, this, 'undo'));
this.api.asc_registerCallback('asc_onCanRedo', _.bind(this.onApiCanRevert, this, 'redo'));
this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onApiZoomChange, this));
@ -532,6 +533,22 @@ define([
}
},
onApiFocusObjectAnnotate: function(selectedObjects) {
if (!this.editMode || !this.mode.isPDFAnnotate) return;
var i = -1,
page_deleted = false;
while (++i < selectedObjects.length) {
if (selectedObjects[i].get_ObjectType() == Asc.c_oAscTypeSelectElement.PdfPage) {
page_deleted = selectedObjects[i].get_ObjectValue().asc_getDeleteLock();
}
}
if (page_deleted !== undefined && this._state.pagecontrolsdisable !== page_deleted) {
if (this._state.activated) this._state.pagecontrolsdisable = page_deleted;
this.toolbar.lockToolbar(Common.enumLock.pageDeleted, page_deleted);
}
},
onApiFocusObject: function(selectedObjects) {
if (!this.editMode || !this.mode.isPDFEdit) return;
@ -547,7 +564,10 @@ define([
in_smartart = false,
in_smartart_internal = false,
in_annot = false,
annot_lock = false;
annot_lock = false,
page_deleted = false,
page_rotate = false,
page_edit_text = false;
while (++i < selectedObjects.length) {
type = selectedObjects[i].get_ObjectType();
@ -591,68 +611,72 @@ define([
in_annot = true;
if (pr.asc_getCanEditText())
no_text = false;
} else if (type == Asc.c_oAscTypeSelectElement.PdfPage) {
page_deleted = pr.asc_getDeleteLock();
page_rotate = pr.asc_getRotateLock();
page_edit_text = pr.asc_getEditLock();
}
}
if (this._state.prcontrolsdisable !== paragraph_locked) {
if (this._state.activated) this._state.prcontrolsdisable = paragraph_locked;
if (paragraph_locked!==undefined)
this.toolbar.lockToolbar(Common.enumLock.paragraphLock, paragraph_locked, {array: toolbar.paragraphControls});
toolbar.lockToolbar(Common.enumLock.paragraphLock, paragraph_locked, {array: toolbar.paragraphControls});
}
if (this._state.no_paragraph !== no_paragraph) {
if (this._state.activated) this._state.no_paragraph = no_paragraph;
this.toolbar.lockToolbar(Common.enumLock.noParagraphSelected, no_paragraph, {array: toolbar.paragraphControls});
// this.toolbar.lockToolbar(Common.enumLock.noParagraphSelected, no_paragraph, {array: [toolbar.btnCopyStyle]});
toolbar.lockToolbar(Common.enumLock.noParagraphSelected, no_paragraph, {array: toolbar.paragraphControls});
// toolbar.lockToolbar(Common.enumLock.noParagraphSelected, no_paragraph, {array: [toolbar.btnCopyStyle]});
}
if (this._state.no_text !== no_text) {
if (this._state.activated) this._state.no_text = no_text;
this.toolbar.lockToolbar(Common.enumLock.noTextSelected, no_text, {array: toolbar.paragraphControls});
toolbar.lockToolbar(Common.enumLock.noTextSelected, no_text, {array: toolbar.paragraphControls});
}
if (this._state.in_annot !== in_annot) {
if (this._state.activated) this._state.in_annot = in_annot;
this.toolbar.lockToolbar(Common.enumLock.inAnnotation, in_annot, {array: toolbar.paragraphControls});
toolbar.lockToolbar(Common.enumLock.inAnnotation, in_annot, {array: toolbar.paragraphControls});
}
if (this._state.no_object !== no_object ) {
if (this._state.activated) this._state.no_object = no_object;
this.toolbar.lockToolbar(Common.enumLock.noObjectSelected, no_object, {array: [toolbar.btnVerticalAlign ]});
toolbar.lockToolbar(Common.enumLock.noObjectSelected, no_object, {array: [toolbar.btnVerticalAlign ]});
}
var no_drawing_objects = this.api.asc_getSelectedDrawingObjectsCount()<1;
if (this._state.no_drawing_objects !== no_drawing_objects ) {
if (this._state.activated) this._state.no_drawing_objects = no_drawing_objects;
this.toolbar.lockToolbar(Common.enumLock.noDrawingObjects, no_drawing_objects, {array: [toolbar.btnShapeAlign, toolbar.btnShapeArrange, toolbar.btnShapesMerge]});
toolbar.lockToolbar(Common.enumLock.noDrawingObjects, no_drawing_objects, {array: [toolbar.btnShapeAlign, toolbar.btnShapeArrange, toolbar.btnShapesMerge]});
}
if (shape_locked!==undefined && this._state.shapecontrolsdisable !== shape_locked) {
if (this._state.activated) this._state.shapecontrolsdisable = shape_locked;
this.toolbar.lockToolbar(Common.enumLock.shapeLock, shape_locked, {array: toolbar.shapeControls.concat(toolbar.paragraphControls)});
toolbar.lockToolbar(Common.enumLock.shapeLock, shape_locked, {array: toolbar.shapeControls.concat(toolbar.paragraphControls)});
}
if (shape_locked===undefined && !this._state.no_drawing_objects) { // several tables selected
this.toolbar.lockToolbar(Common.enumLock.shapeLock, false, {array: toolbar.shapeControls});
toolbar.lockToolbar(Common.enumLock.shapeLock, false, {array: toolbar.shapeControls});
}
if (this._state.in_equation !== in_equation) {
if (this._state.activated) this._state.in_equation = in_equation;
this.toolbar.lockToolbar(Common.enumLock.inEquation, in_equation, {array: [toolbar.btnSuperscript, toolbar.btnSubscript]});
toolbar.lockToolbar(Common.enumLock.inEquation, in_equation, {array: [toolbar.btnSuperscript, toolbar.btnSubscript]});
}
if (this._state.no_columns !== no_columns) {
if (this._state.activated) this._state.no_columns = no_columns;
this.toolbar.lockToolbar(Common.enumLock.noColumns, no_columns, {array: [toolbar.btnColumns]});
toolbar.lockToolbar(Common.enumLock.noColumns, no_columns, {array: [toolbar.btnColumns]});
}
if (this._state.in_smartart !== in_smartart) {
this.toolbar.lockToolbar(Common.enumLock.inSmartart, in_smartart, {array: toolbar.paragraphControls});
toolbar.lockToolbar(Common.enumLock.inSmartart, in_smartart, {array: toolbar.paragraphControls});
this._state.in_smartart = in_smartart;
}
if (this._state.in_smartart_internal !== in_smartart_internal) {
this.toolbar.lockToolbar(Common.enumLock.inSmartartInternal, in_smartart_internal, {array: toolbar.paragraphControls});
toolbar.lockToolbar(Common.enumLock.inSmartartInternal, in_smartart_internal, {array: toolbar.paragraphControls});
this._state.in_smartart_internal = in_smartart_internal;
toolbar.mnuArrangeFront.setDisabled(in_smartart_internal);
@ -660,7 +684,14 @@ define([
toolbar.mnuArrangeForward.setDisabled(in_smartart_internal);
toolbar.mnuArrangeBackward.setDisabled(in_smartart_internal);
}
this.toolbar.lockToolbar(Common.enumLock.cantMergeShape, !this.api.asc_canMergeSelectedShapes(), { array: [this.toolbar.btnShapesMerge] });
toolbar.lockToolbar(Common.enumLock.cantMergeShape, !this.api.asc_canMergeSelectedShapes(), { array: [toolbar.btnShapesMerge] });
if (page_deleted !== undefined && this._state.pagecontrolsdisable !== page_deleted) {
if (this._state.activated) this._state.pagecontrolsdisable = page_deleted;
toolbar.lockToolbar(Common.enumLock.pageDeleted, page_deleted);
}
toolbar.lockToolbar(Common.enumLock.pageRotate, page_rotate, {array: [toolbar.btnRotatePage]});
toolbar.lockToolbar(Common.enumLock.pageEditText, page_edit_text, {array: [toolbar.btnEditText]});
},
onApiZoomChange: function(percent, type) {},

View File

@ -60,9 +60,12 @@ define([], function () {
this.viewPDFModeMenu = new Common.UI.Menu({
cls: 'shifted-right',
initMenu: function (value) {
var disabled = (value.pageProps!==undefined && value.pageProps.locked);
me.menuPDFViewCopy.setDisabled(!(me.api && me.api.can_CopyCut()));
me.menuAddComment.setVisible(me.mode && me.mode.canComments);
me.menuAddComment.setDisabled(disabled);
me.menuRemoveComment.setVisible(value && value.annotProps && value.annotProps.value);
me.menuRemoveComment.setDisabled(disabled);
},
items: [
me.menuPDFViewCopy,
@ -107,9 +110,12 @@ define([], function () {
this.editPDFModeMenu = new Common.UI.Menu({
cls: 'shifted-right',
initMenu: function (value) {
var disabled = (value.pageProps!==undefined && value.pageProps.locked);
me.menuPDFEditCopy.setDisabled(!(me.api && me.api.can_CopyCut()));
me.menuEditAddComment.setVisible(me.mode && me.mode.canComments);
me.menuEditAddComment.setDisabled(disabled);
me.menuEditRemoveComment.setVisible(value && value.annotProps && value.annotProps.value);
me.menuEditRemoveComment.setDisabled(disabled);
},
items: [
me.menuPDFEditCopy,
@ -1037,7 +1043,6 @@ define([], function () {
initMenu: function(value){
var isInShape = (value.shapeProps && !_.isNull(value.shapeProps.value));
var isInChart = (value.chartProps && !_.isNull(value.chartProps.value));
var disabled = (value.paraProps!==undefined && value.paraProps.locked) ||
(isInShape && value.shapeProps.locked);
var isEquation= (value.mathProps && value.mathProps.value);
@ -1201,6 +1206,19 @@ define([], function () {
restoreHeightAndTop: true,
scrollToCheckedItem: false,
initMenu: function(value) {
if (me.api) {
var i = -1,
page_deleted = false,
page_rotate = false,
selectedElements = me.api.getSelectedElements();
while (++i < selectedElements.length) {
if (selectedElements[i].get_ObjectType() === Asc.c_oAscTypeSelectElement.PdfPage) {
page_deleted = selectedElements[i].get_ObjectValue().asc_getDeleteLock();
page_rotate = selectedElements[i].get_ObjectValue().asc_getRotateLock();
}
}
}
me.mnuRotatePageRight.options.value = me.mnuRotatePageLeft.options.value = value.pageNum;
me.mnuRotatePageRight.setVisible(value.isPageSelect===true);
me.mnuRotatePageLeft.setVisible(value.isPageSelect===true);
@ -1208,7 +1226,9 @@ define([], function () {
menuPageNewSeparator.setVisible(value.isPageSelect===true);
menuPageDelSeparator.setVisible(value.isPageSelect===true);
me.mnuDeletePage.setDisabled(me._pagesCount<2);
me.mnuRotatePageRight.setDisabled(page_rotate || page_deleted);
me.mnuRotatePageLeft.setDisabled(page_rotate || page_deleted);
me.mnuDeletePage.setDisabled(me._pagesCount<2 || page_deleted);
},
items: [
me.mnuNewPageBefore,

View File

@ -132,7 +132,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-inserttable',
caption: me.capInsertTable,
lock: [_set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
menu: new Common.UI.Menu({
cls: 'shifted-left',
items: [
@ -153,7 +153,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-insertchart',
caption: me.capInsertChart,
lock: [_set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
menu: true,
dataHint: '1',
dataHintDirection: 'bottom',
@ -165,7 +165,7 @@ define([
id: 'tlbtn-insertsmartart',
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-smart-art',
lock: [_set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
caption: me.capBtnInsSmartArt,
menu: true,
action: 'insert-smartart',
@ -180,7 +180,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-insertequation',
caption: me.capInsertEquation,
lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.paragraphLock, _set.lostConnect, _set.disableOnStart],
split: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}),
action: 'insert-equation',
@ -230,7 +230,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-textart',
caption: me.capInsertTextArt,
lock: [_set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
menu: new Common.UI.Menu({
cls: 'menu-shapes',
items: [
@ -261,7 +261,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-datetime',
caption: me.capBtnDateTime,
lock: [_set.lostConnect, _set.paragraphLock, _set.disableOnStart],
lock: [_set.pageDeleted, _set.lostConnect, _set.paragraphLock, _set.disableOnStart],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
@ -273,7 +273,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-pagenum',
caption: me.capBtnSlideNum,
lock: [_set.lostConnect, _set.paragraphLock, _set.disableOnStart],
lock: [_set.pageDeleted, _set.lostConnect, _set.paragraphLock, _set.disableOnStart],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
@ -288,7 +288,7 @@ define([
menuWidth: 330,
style: 'width: 140px;',
enableKeyEvents: true,
lock: [_set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, 0'
@ -324,11 +324,11 @@ define([
if (this.toolbar && this.toolbar.$el) {
this.btnsInsertImage = Common.Utils.injectButtons($host.find('.slot-insertimg').add(this.toolbar.$el.find('.slot-insertimg')), 'tlbtn-insertimage-', 'toolbar__icon btn-insertimage', this.capInsertImage,
[Common.enumLock.lostConnect, Common.enumLock.disableOnStart], false, true, undefined, '1', 'bottom', 'small', undefined, 'insert-image');
[Common.enumLock.pageDeleted, Common.enumLock.lostConnect, Common.enumLock.disableOnStart], false, true, undefined, '1', 'bottom', 'small', undefined, 'insert-image');
this.btnsInsertText = Common.Utils.injectButtons($host.find('.slot-instext').add(this.toolbar.$el.find('.slot-instext')), 'tlbtn-inserttext-', 'toolbar__icon btn-big-text', this.capInsertText,
[Common.enumLock.lostConnect, Common.enumLock.disableOnStart], true, true, true, '1', 'bottom', 'small', undefined, 'insert-text');
[Common.enumLock.pageDeleted, Common.enumLock.lostConnect, Common.enumLock.disableOnStart], true, true, true, '1', 'bottom', 'small', undefined, 'insert-text');
this.btnsInsertShape = Common.Utils.injectButtons($host.find('.slot-insertshape').add(this.toolbar.$el.find('.slot-insertshape')), 'tlbtn-insertshape-', 'toolbar__icon btn-insertshape', this.capInsertShape,
[Common.enumLock.lostConnect, Common.enumLock.disableOnStart], false, true, true, '1', 'bottom', 'small', undefined, 'insert-shape');
[Common.enumLock.pageDeleted, Common.enumLock.lostConnect, Common.enumLock.disableOnStart], false, true, true, '1', 'bottom', 'small', undefined, 'insert-shape');
this.btnsAddPage = Common.Utils.injectButtons($host.find('.slot-inspage').add(this.toolbar.$el.find('.slot-inspage')), 'tlbtn-insertpage-', 'toolbar__icon btn-blankpage', this.capInsPage,
[Common.enumLock.lostConnect, Common.enumLock.disableOnStart], true, true, false, '1', 'bottom', 'small', undefined, 'insert-page');
}

View File

@ -95,7 +95,10 @@ define([
inEquation: 'in-equation',
inAnnotation: 'in-annotation',
singlePage: 'single-page',
cantMergeShape: 'merge-shape-lock'
cantMergeShape: 'merge-shape-lock',
pageRotate: 'page-rotate',
pageDeleted: 'page-deleted',
pageEditText: 'page-edit-text'
};
for (var key in enumLock) {
if (enumLock.hasOwnProperty(key)) {
@ -144,7 +147,7 @@ define([
cls: 'btn-toolbar x-huge icon-top',
style: 'min-width: 45px;',
iconCls: 'toolbar__icon btn-big-magic-wand',
lock: [_set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.pageEditText, _set.lostConnect, _set.disableOnStart],
caption: this.capBtnRecognize,
dataHint: '1',
dataHintDirection: 'bottom',
@ -699,7 +702,7 @@ define([
id: 'id-toolbar-btn-shape-arrange',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-arrange-front',
lock: [_set.lostConnect, _set.noDrawingObjects, _set.disableOnStart],
lock: [_set.shapeLock, _set.lostConnect, _set.noDrawingObjects, _set.disableOnStart],
menu: new Common.UI.Menu({
items: [
this.mnuArrangeFront = new Common.UI.MenuItem({
@ -790,7 +793,7 @@ define([
id: 'id-toolbar-btn-delpage',
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-rem-comment',
lock: [_set.lostConnect, _set.disableOnStart, _set.singlePage],
lock: [_set.pageDeleted, _set.lostConnect, _set.disableOnStart, _set.singlePage],
caption: this.capBtnDelPage,
dataHint: '1',
dataHintDirection: 'bottom',
@ -804,7 +807,7 @@ define([
caption: this.capBtnRotatePage,
split: true,
iconCls: 'toolbar__icon btn-update',
lock: [_set.lostConnect, _set.disableOnStart],
lock: [_set.pageDeleted, _set.pageRotate, _set.lostConnect, _set.disableOnStart],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small',
@ -856,7 +859,7 @@ define([
id: 'tlbtn-addcomment',
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-big-add-comment',
lock: [_set.disableOnStart],
lock: [_set.pageDeleted, _set.disableOnStart],
caption: this.capBtnComment,
dataHint: '1',
dataHintDirection: 'bottom',
@ -868,7 +871,7 @@ define([
id: 'tlbtn-textcomment',
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-big-text-comment',
lock: [_set.disableOnStart],
lock: [_set.pageDeleted, _set.disableOnStart],
caption: this.capBtnTextComment,
menu: true,
split: true,
@ -895,7 +898,7 @@ define([
caption: this.capBtnStamp,
split: true,
iconCls: 'toolbar__icon btn-stamp',
lock: [_set.disableOnStart],
lock: [_set.pageDeleted, _set.disableOnStart],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small',
@ -938,6 +941,7 @@ define([
type: AscPDF.ANNOTATIONS_TYPES.Strikeout
});
this.btnsStrikeout = [this.btnStrikeout];
this.toolbarControls.push(this.btnStrikeout);
this.btnUnderline = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-underline',
@ -972,6 +976,7 @@ define([
type: AscPDF.ANNOTATIONS_TYPES.Underline
});
this.btnsUnderline = [this.btnUnderline];
this.toolbarControls.push(this.btnUnderline);
this.btnHighlight = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-highlight',
@ -1008,6 +1013,7 @@ define([
dataHintOffset: '0, -16'
});
this.btnsHighlight = [this.btnHighlight];
this.toolbarControls.push(this.btnHighlight);
if (config.isPDFAnnotate && config.canPDFEdit || config.isPDFEdit) {
this.btnEditMode = new Common.UI.Button({

View File

@ -15,7 +15,7 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Advanced Settings of the PDF Editor</h1>
<p>The <!--<a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)">--><b>PDF Editor</b><!--</a>--> allows you to change its advanced settings. To access them, open the <b>File</b> tab on the top toolbar and select the <b>Advanced Settings</b> option.</p>
<p>The <a href="https://www.onlyoffice.com/en/pdf-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>PDF Editor</b></a> allows you to change its advanced settings. To access them, open the <b>File</b> tab on the top toolbar and select the <b>Advanced Settings</b> option.</p>
<p>The advanced settings are grouped as follows:</p>
<h3>Collaboration</h3>
@ -31,10 +31,6 @@
<li><span class="desktopDocumentFeatures"><b>Show the Quick Print button in the editor header</b> is used in the <em>desktop version</em> to enable quick printing via the corresponding button at the top toolbar. The file will be printed on the last selected or default printer.</span></li>
<li>The <b>Use the mini toolbar when selecting text</b> option is used to enable displaying the mini toolbar with quick access to most common formatting tools when selecting text.</li>
<li>The <b>Customize quick access</b> button is used to choose which buttons shall be available in the top toolbar, i.e., <em>Save</em>, <em>Print</em>, <em>Undo</em>, and <em>Redo</em>.</li>
<li>
The <b>RTL Interface (Beta)</b> option is used to change the direction in which elements of the interface are displayed.
<p class="note">This option is available only for interface languages that require RTL.</p>
</li>
<li>
The <b>Interface theme</b> option is used to change the color scheme of the editors interface.
<ul>

View File

@ -15,102 +15,141 @@
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Editing PDF</h1>
<p>You can edit previously uploaded PDFs or the ones created using <b>ONLYOFFICE PDF Editor</b>.</p>
<ol>
<li>Open a PDF file.</li>
<li>If the PDF file has been opened in a viewer or filling form mode, you can switch to editing by clicking the <b>Edit PDF</b> button on the top toolbar provided you have the corresponding rights.</li>
<li>Click the <b>Edit Text</b> button on the <b>Home</b> tab to run an automated process of marking up text boxes, graphical objects, etc.</li>
<li>
Click the recognized area you want to edit.
<ul>
<li>
To edit the recognized text, please read the following guides:
<p><img alt="Home tab" src="../images/interface/hometab_editing.png" /></p>
<ul>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/FontTypeSizeColor.aspx" target="_blank" onclick="onhyperlinkclick(this)">font, its size, text color, case, and highlight</a>;</li>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/DecorationStyles.aspx" target="_blank" onclick="onhyperlinkclick(this)">text formatting</a>;</li>
<li>on adjusting <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/CreateLists.aspx" target="_blank" onclick="onhyperlinkclick(this)">list settings</a>;</li>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/ParagraphIndents.aspx" target="_blank" onclick="onhyperlinkclick(this)">indents</a>;</li>
<li>on adjusting <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/LineSpacing.aspx" target="_blank" onclick="onhyperlinkclick(this)">line spacing</a>;</li>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Presentation-Editor/UsageInstructions/InsertText.aspx#formattext" target="_blank" onclick="onhyperlinkclick(this)">vertical and horizontal text alignment</a>;</li>
<li>on splitting the text into <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/SetPageParameters.aspx#columns" target="_blank" onclick="onhyperlinkclick(this)">columns</a>;</li>
</ul>
<p>These features can be found on the <b>Home tab</b>.</p>
</li>
<li>
To manage PDF pages, go to the <b>Home</b> tab:
<p><img alt="Home tab" src="../images/interface/hometab_editing.png" /></p>
<ul>
<li>
To insert a blank page, click the <b>Insert Page</b> button and choose whether you want to <em>insert a blank page before</em> the currently selected one or <em>after</em> it.
<p>The same feature is available through the <b>Page Thumbnails</b> button on the left interface panel of the editor. Click within the page navigation area with the right mouse button, and choose where you want to insert a blank page.</p>
</li>
<li>
To rotate a page, click the <b>Rotate Page</b> button and choose whether you want to a page to be <em>rotated right</em> or <em>left</em>.
<p>The same feature is available through the <b>Page Thumbnails</b> button on the left interface panel of the editor. Click within the page navigation area with the right mouse button, and choose the direction of the page rotation.</p>
</li>
<li>
To delete a page, click the <b>Delete Page</b> button.
<p>The same feature is available through the <b>Page Thumbnails</b> button on the left interface panel of the editor. Click within the page navigation area with the right mouse button, and choose the <b>Delete page</b> menu item.</p>
</li>
</ul>
</li>
<li>
To insert new objects or edit the existing ones, please read the following guides:
<ul>
<li>on inserting <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertTables.aspx" target="_blank" onclick="onhyperlinkclick(this)">tables</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertTextObjects.aspx" target="_blank" onclick="onhyperlinkclick(this)">text boxes</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertTextObjects.aspx" target="_blank" onclick="onhyperlinkclick(this)">text art</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertImages.aspx" target="_blank" onclick="onhyperlinkclick(this)">images</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertAutoshapes.aspx" target="_blank" onclick="onhyperlinkclick(this)">autoshapes</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/AddHyperlinks.aspx" target="_blank" onclick="onhyperlinkclick(this)">hyperlinks</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertEquation.aspx" target="_blank" onclick="onhyperlinkclick(this)">equations</a>, and <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertSymbols.aspx" target="_blank" onclick="onhyperlinkclick(this)">symbols</a>.</li>
</ul>
<p>These features can be found on the <b>Insert</b> tab.</p>
</li>
<li>
To facilitate collaborating on a PDF, please read the following guides:
<ul>
<li>on <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-PDF-Editor/HelpfulHints/Commenting.aspx" target="_blank" onclick="onhyperlinkclick(this)">adding comments</a>, highlighting and <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-PDF-Editor/UsageInstructions/DrawingOperations.aspx" target="_blank" onclick="onhyperlinkclick(this)">drawing</a>.</li>
</ul>
<p>These features can be found on the <b>Collaboration</b> tab (for editing mode) or on the <b>Comment</b> tab (for viewing mode). To hide comments, uncheck the <b>Show Comments</b> checkbox.</p>
<p>You can also add <b>text comments</b> using the <b>Comment</b> tab.</p>
<ul>
<li>Go to the <b>Comment</b> tab.</li>
<li>Click the <b>Text Comment</b> button.</li>
<li>
Choose the type of the comment you want to insert:
<ul>
<li><em>Insert text comment</em> - a comment is displayed as a text box that can be moved around the page.</li>
<li><em>Insert text callout</em> - a comment is displayed as a text box with a guideline leading to the exact place on the page.</li>
</ul>
<p><img alt="Comment tab" src="../images/interface/commenttab_textcomment.png" /></p>
</li>
</ul>
</li>
<li>
<p><b>Collaboration</b>:</p>
<p><img alt="Advanced settings - Collaboration" src="../images/interface/advancedsettings.png" /></p>
<ul>
<li class="onlineDocumentFeatures">
The <b>Co-editing mode</b> subsection allows you to set the preferable mode for seeing changes made to the document when working in collaboration.
<ul>
<li><b>Fast</b>. The users who take part in the document co-editing will see the changes in real time once they are made by other users.</li>
<li><b>Strict</b> (by default). All the changes made by co-editors will be shown only after you click the <b>Save</b> <div class="icon icon-saveupdate"></div> icon that will notify you about new changes.</li>
</ul>
</li>
<li class="onlineDocumentFeatures">
The <b>Real-time collaboration changes</b> subsection allows you to choose how new changes and comments will be displayed in real time.
<ul>
<li><b>View none</b>. All the changes made during the current session will not be highlighted.</li>
<li><b>View all</b>. All the changes made during the current session will be highlighted.</li>
<li><b>View last</b>. Only the changes made since you last time clicked the <b>Save</b> <div class="icon icon-saveupdate"></div> icon will be highlighted. This option is only available when the <b>Strict</b> co-editing mode is selected.</li>
<li><b>Show comments in text</b>. If you disable this feature, the commented passages will be highlighted only if you click the <b>Comments</b> <div class="icon icon-commentsicon"></div> icon on the left sidebar.</li>
<li><b>Show resolved comments</b>. This feature is disabled by default so that the resolved comments are hidden in the document text. You can view such comments only if you click the <b>Comments</b> <div class="icon icon-commentsicon"></div> icon on the left sidebar. Enable this option if you want to display resolved comments in the document text.</li>
</ul>
</li>
</ul>
</li>
<li>To navigate PDFs, please read the following guide on the features available on the <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-PDF-Editor/HelpfulHints/Navigation.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>View tab</b>.</a></li>
<li>The <b>Plugins</b> tab allows <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/Editors-User-Guides/AllEditors/Plugin-manager.aspx" target="_blank" onclick="onhyperlinkclick(this)">managing</a> your plugins. To learn more about each plugin, please refer to the <a href="https://helpcenter.onlyoffice.com/userguides/docs-de.aspx" target="_blank" onclick="onhyperlinkclick(this)"><em>Plugins</em></a> section of the <b>Document Editor</b>.</li>
</ul>
</li>
<li>To delete a recognized area, select it, and press <b>Delete</b> or <b>Backspace</b> on your keyboard.</li>
</ol>
</div>
<p>You can edit previously uploaded PDFs or the ones created using <b>ONLYOFFICE PDF Editor</b>.</p>
<h3>Editing text</h3>
<ol>
<li>Open a PDF file.</li>
<li>If the PDF file has been opened in a viewer or filling form mode, you can switch to editing by clicking the <b>Edit PDF</b> button on the top toolbar provided you have the corresponding rights.</li>
<li>Click the <b>Edit Text</b> button on the <b>Home</b> tab to run an automated process of marking up text boxes, graphical objects, etc.</li>
<li>
Click the recognized area you want to edit.
<ul>
<li>
To edit the recognized text, please read the following guides:
<p><img alt="Home tab" src="../images/interface/hometab_editing.png" /></p>
<ul>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/FontTypeSizeColor.aspx" target="_blank" onclick="onhyperlinkclick(this)">font, its size, text color, case, and highlight</a>;</li>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/DecorationStyles.aspx" target="_blank" onclick="onhyperlinkclick(this)">text formatting</a>;</li>
<li>on adjusting <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/CreateLists.aspx" target="_blank" onclick="onhyperlinkclick(this)">list settings</a>;</li>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/ParagraphIndents.aspx" target="_blank" onclick="onhyperlinkclick(this)">indents</a>;</li>
<li>on adjusting <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/LineSpacing.aspx" target="_blank" onclick="onhyperlinkclick(this)">line spacing</a>;</li>
<li>on changing <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Presentation-Editor/UsageInstructions/InsertText.aspx#formattext" target="_blank" onclick="onhyperlinkclick(this)">vertical and horizontal text alignment</a>;</li>
<li>on splitting the text into <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/SetPageParameters.aspx#columns" target="_blank" onclick="onhyperlinkclick(this)">columns</a>;</li>
</ul>
<p>These features can be found on the <b>Home tab</b>.</p>
</li>
</ul>
</li>
<li>To <b>delete</b> a recognized area, select it, and press <b>Delete</b> or <b>Backspace</b> on your keyboard.</li>
</ol>
<h3>Managing pages</h3>
<p class="note">Please note that you can select several pages by holding down the <code>Ctrl</code> key, or select a range of pages by holding down the <code>Shift</code> key.</p>
<ol>
<li>
To manage PDF pages, go to the <b>Home</b> tab:
<p><img alt="Home tab" src="../images/interface/hometab_editing.png" /></p>
<ul>
<li>
To insert a blank page, click the <b>Insert Page</b> button and choose whether you want to <em>insert a blank page before</em> the currently selected one or <em>after</em> it.
<p>The same feature is available through the <b>Page Thumbnails</b> button on the left interface panel of the editor. Click within the page navigation area with the right mouse button, and choose where you want to insert a blank page.</p>
</li>
<li>
To rotate a page, click the <b>Rotate Page</b> button and choose whether you want to a page to be <em>rotated right</em> or <em>left</em>.
<p>The same feature is available through the <b>Page Thumbnails</b> button on the left interface panel of the editor. Click within the page navigation area with the right mouse button, and choose the direction of the page rotation.</p>
</li>
<li>
To delete a page, click the <b>Delete Page</b> button.
<p>The same feature is available through the <b>Page Thumbnails</b> button on the left interface panel of the editor. Click within the page navigation area with the right mouse button, and choose the <b>Delete page</b> menu item.</p>
</li>
</ul>
</li>
</ol>
<h3>Working on objects</h3>
<ol>
<li>
To insert new objects or edit the existing ones:
<ul>
<li>
please read the following guides on inserting <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertTables.aspx" target="_blank" onclick="onhyperlinkclick(this)">tables</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertTextObjects.aspx" target="_blank" onclick="onhyperlinkclick(this)">text boxes</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertTextObjects.aspx" target="_blank" onclick="onhyperlinkclick(this)">text art</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertImages.aspx" target="_blank" onclick="onhyperlinkclick(this)">images</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertAutoshapes.aspx" target="_blank" onclick="onhyperlinkclick(this)">autoshapes</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/AddHyperlinks.aspx" target="_blank" onclick="onhyperlinkclick(this)">hyperlinks</a>, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertEquation.aspx" target="_blank" onclick="onhyperlinkclick(this)">equations</a>, and <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/InsertSymbols.aspx" target="_blank" onclick="onhyperlinkclick(this)">symbols</a>.
<p>These features can be found on the <b>Insert</b> tab.</p>
</li>
<li>use <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/AlignArrangeObjects.aspx#boolean" target="_blank">Boolean operations</a> on shapes,</li>
<li>
to insert <b>Stamps</b>:
<ul>
<li>go to the <b>Comments</b> tab,</li>
<li>click the <b>Stamps</b> button,</li>
<li>
choose one of the available presets.
<p class="note">The stamps act as regular graphic objects.</p>
</li>
</ul>
</li>
</ul>
</li>
</ol>
<h3>Collaboration</h3>
<ol>
<li>
To facilitate collaborating on a PDF, please read the following guides:
<ul>
<li>
on <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-PDF-Editor/HelpfulHints/Commenting.aspx" target="_blank" onclick="onhyperlinkclick(this)">adding comments</a>, highlighting and <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-PDF-Editor/UsageInstructions/DrawingOperations.aspx" target="_blank" onclick="onhyperlinkclick(this)">drawing</a>.
<p>These features can be found on the <b>Collaboration</b> tab (for editing mode) or on the <b>Comment</b> tab (for viewing mode). To hide comments, uncheck the <b>Show Comments</b> checkbox.</p>
<p class="note">Please note that you can <b>add comments</b> by selecting the required fragment and clicking the comments icon in the opened menu. Here, you can <b>delete</b> comments as well.</p>
</li>
</ul>
<p>To highlight the selected text fragment:</p>
<ul>
<li>Select the text fragment.</li>
<li>Click the highlight pen icon in the opened menu. Here, you can change its colour or opacity.</li>
</ul>
<p>You can also add <b>text comments</b> using the <b>Comment</b> tab.</p>
<ul>
<li>Go to the <b>Comment</b> tab.</li>
<li>Click the <b>Text Comment</b> button.</li>
<li>
Choose the type of the comment you want to insert:
<ul>
<li><em>Insert text comment</em> - a comment is displayed as a text box that can be moved around the page.</li>
<li><em>Insert text callout</em> - a comment is displayed as a text box with a guideline leading to the exact place on the page.</li>
</ul>
<p><img alt="Comment tab" src="../images/interface/commenttab_textcomment.png" /></p>
</li>
</ul>
</li>
<li>
<p><b>Collaboration</b>:</p>
<p><img alt="Advanced settings - Collaboration" src="../images/interface/advancedsettings.png" /></p>
<ul>
<li class="onlineDocumentFeatures">
The <b>Co-editing mode</b> subsection allows you to set the preferable mode for seeing changes made to the document when working in collaboration.
<ul>
<li><b>Fast</b>. The users who take part in the document co-editing will see the changes in real time once they are made by other users.</li>
<li><b>Strict</b> (by default). All the changes made by co-editors will be shown only after you click the <b>Save</b> <div class="icon icon-saveupdate"></div> icon that will notify you about new changes.</li>
</ul>
</li>
<li class="onlineDocumentFeatures">
The <b>Real-time collaboration changes</b> subsection allows you to choose how new changes and comments will be displayed in real time.
<ul>
<li><b>View none</b>. All the changes made during the current session will not be highlighted.</li>
<li><b>View all</b>. All the changes made during the current session will be highlighted.</li>
<li><b>View last</b>. Only the changes made since you last time clicked the <b>Save</b> <div class="icon icon-saveupdate"></div> icon will be highlighted. This option is only available when the <b>Strict</b> co-editing mode is selected.</li>
<li><b>Show comments in text</b>. If you disable this feature, the commented passages will be highlighted only if you click the <b>Comments</b> <div class="icon icon-commentsicon"></div> icon on the left sidebar.</li>
<li><b>Show resolved comments</b>. This feature is disabled by default so that the resolved comments are hidden in the document text. You can view such comments only if you click the <b>Comments</b> <div class="icon icon-commentsicon"></div> icon on the left sidebar. Enable this option if you want to display resolved comments in the document text.</li>
</ul>
</li>
</ul>
</li>
</ol>
<h3>Navigation, plugins</h3>
<p>To navigate PDFs, please read the following guide on the features available on the <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-PDF-Editor/HelpfulHints/Navigation.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>View tab</b>.</a></p>
<p>The <b>Plugins</b> tab allows <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/Editors-User-Guides/AllEditors/Plugin-manager.aspx" target="_blank" onclick="onhyperlinkclick(this)">managing</a> your plugins. To learn more about each plugin, please refer to the <a href="https://helpcenter.onlyoffice.com/userguides/docs-de.aspx" target="_blank" onclick="onhyperlinkclick(this)"><em>Plugins</em></a> section of the <b>Document Editor</b>.</p>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

View File

@ -103,11 +103,26 @@ define([
this.pages.on('change', _.bind(_updatePagesCaption,this));
this.currentDrawColor = 'E81416';
this.drawTool = {
pen: () => Common.NotificationCenter.trigger('draw-tool:pen', { index: 0, color: this.currentDrawColor, size: 1, opacity: 100 }),
highlighter: () => Common.NotificationCenter.trigger('draw-tool:pen', { index: 1, color: this.currentDrawColor, size: 6, opacity: 50 }),
eraser: () => Common.NotificationCenter.trigger('draw-tool:eraser'),
eraseAll: () => Common.NotificationCenter.trigger('draw-tool:erase-all'),
select: () => Common.NotificationCenter.trigger('draw-tool:select'),
pen: () => {
Common.NotificationCenter.trigger('draw-tool:pen', { index: 0, color: this.currentDrawColor, size: 1, opacity: 100 });
this.editComplete();
},
highlighter: () => {
Common.NotificationCenter.trigger('draw-tool:pen', { index: 1, color: this.currentDrawColor, size: 6, opacity: 50 });
this.editComplete();
},
eraser: () => {
Common.NotificationCenter.trigger('draw-tool:eraser');
this.editComplete();
},
eraseAll: () => {
Common.NotificationCenter.trigger('draw-tool:erase-all');
this.editComplete();
},
select: () => {
Common.NotificationCenter.trigger('draw-tool:select');
this.editComplete();
}
};
},
@ -231,6 +246,7 @@ define([
});
this.btnPrev.on('click', _.bind(function() {
if (this.api) this.api.DemonstrationPrevSlide();
this.editComplete();
}, this));
this.btnNext = new Common.UI.Button({
@ -241,6 +257,7 @@ define([
});
this.btnNext.on('click', _.bind(function() {
if (this.api) this.api.DemonstrationNextSlide();
this.editComplete();
}, this));
this.btnPlay = new Common.UI.Button({
@ -262,6 +279,7 @@ define([
if (this.api)
this.api.DemonstrationPlay ();
}
this.editComplete();
}, this));
this.btnClose = new Common.UI.Button({
@ -287,6 +305,7 @@ define([
});
this.btnFullScreen.on('click', _.bind(function(btn) {
this.toggleFullScreen();
this.editComplete();
}, this));
this.txtGoToPage = new Common.UI.InputField({
@ -384,6 +403,7 @@ define([
me.btnClose.updateHint( fselem ? '' : me.txtClose);
} else
me.btnFullScreen.updateHint( fselem ? me.txtExitFullScreen: me.txtFullScreen);
me.editComplete();
});
if (Common.Utils.isIE) {
@ -532,6 +552,14 @@ define([
}
},
editComplete: function() {
var me = this;
setTimeout(function() {
$(me.el).focus();
me.api && me.api.asc_enableKeyEvents(true);
}, 10);
},
txtDraw: 'Draw',
txtPen: 'Pen',
txtHighlighter: 'Highlighter',

View File

@ -3,7 +3,8 @@
{"src": "ProgramInterface/FileTab.htm", "name": "File tab"},
{"src": "ProgramInterface/HomeTab.htm", "name": "Home Tab"},
{ "src": "ProgramInterface/InsertTab.htm", "name": "Insert tab" },
{"src": "ProgramInterface/DrawTab.htm", "name": "Drawing tab"},
{ "src": "ProgramInterface/DrawTab.htm", "name": "Drawing tab" },
{"src": "ProgramInterface/DesignTab.htm", "name": "Design tab"},
{"src": "ProgramInterface/TransitionsTab.htm", "name": "Transitions tab" },
{"src": "ProgramInterface/AnimationTab.htm", "name": "Animation tab" },
{"src": "ProgramInterface/CollaborationTab.htm", "name": "Collaboration tab" },
@ -55,6 +56,7 @@
{"src": "HelpfulHints/SpellChecking.htm", "name": "Spell-checking"},
{"src": "UsageInstructions/MathAutoCorrect.htm", "name": "AutoCorrect features" },
{"src": "HelpfulHints/Password.htm", "name": "Password protection"},
{"src": "UsageInstructions/PresentationViewer.htm", "name": "Presentation Viewer" },
{"src": "HelpfulHints/About.htm", "name": "About Presentation Editor", "headername": "Helpful hints"},
{"src": "HelpfulHints/SupportedFormats.htm", "name": "Supported formats of electronic presentations"},
{"src": "HelpfulHints/KeyboardShortcuts.htm", "name": "Keyboard shortcuts"}

View File

@ -72,11 +72,7 @@
<li>The <b>Alignment guides</b> option is used to turn on/off alignment guides that appear when you move objects. It allows for a more precise object positioning on the slide.</li>
<li>The <b>Use Alt key to navigate the user interface using the keyboard</b> option is used to enable using the <em>Alt</em> / <em>Option</em> key in keyboard shortcuts.</li>
<li><span class="desktopDocumentFeatures"><b>Show the Quick Print button in the editor header</b> is used in the <em>desktop version</em> to enable quick printing via the corresponding button at the top toolbar. The file will be printed on the last selected or default printer.</span></li>
<li>
The <b>RTL Interface (Beta)</b> option is used to change the direction in which elements of the interface are displayed.
<p class="note">This option is available only for interface languages that require RTL.</p>
</li>
<li>The <b>Customize quick access</b> button is used to choose which buttons shall be available in the top toolbar, i.e., <em>Save</em>, <em>Print</em>, <em>Undo</em>, and <em>Redo</em>.</li>
<li>The <b>Customize quick access</b> button is used to choose which buttons shall be available in the top toolbar, i.e., <em>Save</em>, <em>Print</em>, <em>Undo</em>, <em>Redo</em>, <em>Show from Beginning</em>.</li>
<li>The <b>Unit of measurement</b> option is used to specify what units are used on the rulers and in properties of objects when setting such parameters as width, height, spacing, margins etc. The available units are <em>Centimeter</em>, <em>Point</em>, and <em>Inch</em>.</li>
<li>
The <b>Default zoom value</b> option is used to set the default zoom value, selecting it in the list of available options from 50% to 500%. You can also choose the <em>Fit to Page</em>, <em>Fit to Width</em>, or <b>Last Used</b> option.

View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Design tab</title>
<meta charset="utf-8" />
<meta name="description" content="Introducing the Presentation Editor user interface - Design tab" />
<link type="text/css" rel="stylesheet" href="../../../../../../common/main/resources/help/editor.css" />
<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../../../../../../common/main/resources/help/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>Design tab</h1>
<p>The <b>Design</b> tab in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a> allows you to customize your presentation, i.e., its colours, slide design, etc.</p>
<div class="onlineDocumentFeatures">
<p>The corresponding window of the Online Presentation Editor:</p>
<p><img alt="Design tab" src="../images/interface/designtab.png" /></p>
</div>
<div class="desktopDocumentFeatures">
<p>The corresponding window of the Desktop Presentation Editor:</p>
<p><img alt="Design tab" src="../images/interface/desktop_designtab.png" /></p>
</div>
<p>Using this tab, you can:</p>
<ul>
<li>change a <a href="../UsageInstructions/SetSlideParameters.htm" onclick="onhyperlinkclick(this)">theme, color scheme or slide size</a>.</li>
</ul>
</div>
</body>
</html>

View File

@ -30,8 +30,8 @@
<li>format <a href="../UsageInstructions/InsertText.htm#formattext" onclick="onhyperlinkclick(this)">text</a> within a text box,</li>
<li>insert <a href="../UsageInstructions/InsertText.htm" onclick="onhyperlinkclick(this)">text boxes</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">pictures</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>,</li>
<li><a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">align and arrange objects</a> on a slide,</li>
<li><a href="../UsageInstructions/CopyClearFormatting.htm" onclick="onhyperlinkclick(this)">copy/clear</a> text formatting,</li>
<li>change a <a href="../UsageInstructions/SetSlideParameters.htm" onclick="onhyperlinkclick(this)">theme, color scheme or slide size</a>.</li>
<li>use <a href="../UsageInstructions/AlignArrangeObjects.htm#boolean" onclick="onhyperlinkclick(this)">Boolean</a> operations,</li>
<li><a href="../UsageInstructions/CopyClearFormatting.htm" onclick="onhyperlinkclick(this)">copy/clear</a> text formatting.</li>
</ul>
</div>
</body>

View File

@ -27,7 +27,7 @@
<p>Using this tab, you can:</p>
<ul>
<li>insert <a href="../UsageInstructions/InsertTables.htm" onclick="onhyperlinkclick(this)">tables</a>,</li>
<li>insert <a href="../UsageInstructions/InsertText.htm" onclick="onhyperlinkclick(this)">text boxes and Text Art objects</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">pictures</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">charts</a>,</li>
<li>insert <a href="../UsageInstructions/InsertText.htm" onclick="onhyperlinkclick(this)">text boxes and Text Art objects</a>, <a href="../UsageInstructions/InsertImages.htm" onclick="onhyperlinkclick(this)">pictures</a>, <a href="../UsageInstructions/InsertAutoshapes.htm" onclick="onhyperlinkclick(this)">shapes</a>, <a href="../UsageInstructions/InsertSmartArt.htm" onclick="onhyperlinkclick(this)">SmartArt</a>, <a href="../UsageInstructions/InsertCharts.htm" onclick="onhyperlinkclick(this)">charts</a>,</li>
<li>insert <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">comments</a> and <a href="../UsageInstructions/AddHyperlinks.htm" onclick="onhyperlinkclick(this)">hyperlinks</a>,</li>
<li>insert <a href="../UsageInstructions/InsertHeadersFooters.htm" onclick="onhyperlinkclick(this)">footers, date and time, slide numbers</a>.</li>
<li>insert <a href="../UsageInstructions/InsertEquation.htm" onclick="onhyperlinkclick(this)">equations</a>, <a href="../UsageInstructions/InsertSymbols.htm" onclick="onhyperlinkclick(this)">symbols</a>,</li>

View File

@ -28,7 +28,7 @@
<ol>
<li>
The <b>Editor header</b> displays the logo, <span class="desktopDocumentFeatures">tabs for all opened presentations with their names</span> and menu tabs.
<p>On the left side of the <b>Editor header</b>, the <b>Save</b>, <b>Print file</b>, <b>Undo</b> and <b>Redo</b> buttons are located. Click the dots icon to the right to customize which buttons shall be hidden if any.</p>
<p>On the left side of the <b>Editor header</b>, the <b>Save</b>, <b>Print file</b>, <b>Undo</b>, <b>Redo</b> and <b>Start slideshow from begginning</b> buttons are located. Click the dots icon to the right to customize which buttons shall be hidden if any.</p>
<p><span class="big big-leftpart"></span></p>
<p>On the right side of the <b>Editor header</b>, along with the user name the following icons are displayed:</p>
<ul>
@ -39,7 +39,7 @@
</ul>
</li>
<li>
The <b>Top toolbar</b> displays a set of editing commands depending on the selected menu tab. Currently, the following tabs are available: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Home</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Insert</a>, <a href="../ProgramInterface/DrawTab.htm" onclick="onhyperlinkclick(this)">Draw</a>, <a href="../ProgramInterface/TransitionsTab.htm" onclick="onhyperlinkclick(this)">Transitions</a>, <a href="../ProgramInterface/AnimationTab.htm" onclick="onhyperlinkclick(this)">Animation</a>, <a href="../ProgramInterface/CollaborationTab.htm" onclick="onhyperlinkclick(this)">Collaboration</a>, <span class="desktopDocumentFeatures">Protection,</span> <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
The <b>Top toolbar</b> displays a set of editing commands depending on the selected menu tab. Currently, the following tabs are available: <a href="../ProgramInterface/FileTab.htm" onclick="onhyperlinkclick(this)">File</a>, <a href="../ProgramInterface/HomeTab.htm" onclick="onhyperlinkclick(this)">Home</a>, <a href="../ProgramInterface/InsertTab.htm" onclick="onhyperlinkclick(this)">Insert</a>, <a href="../ProgramInterface/DrawTab.htm" onclick="onhyperlinkclick(this)">Draw</a>, <a href="../ProgramInterface/DesignTab.htm" onclick="onhyperlinkclick(this)">Design</a>, <a href="../ProgramInterface/TransitionsTab.htm" onclick="onhyperlinkclick(this)">Transitions</a>, <a href="../ProgramInterface/AnimationTab.htm" onclick="onhyperlinkclick(this)">Animation</a>, <a href="../ProgramInterface/CollaborationTab.htm" onclick="onhyperlinkclick(this)">Collaboration</a>, <span class="desktopDocumentFeatures">Protection,</span> <a href="../ProgramInterface/PluginsTab.htm" onclick="onhyperlinkclick(this)">Plugins</a>.
<p>The <span class="icon icon-copy"></span> <b>Copy</b>, <span class="icon icon-paste"></span> <b>Paste</b>, <span class="icon icon-cut"></span> <b>Cut</b> and <span class="icon icon-selectall"></span> <b>Select All</b> options are always available on the left side of the <b>Top toolbar</b> regardless of the selected tab.</p>
</li>
<li>The <b>Status bar</b> at the bottom of the editor window contains the <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">Start slideshow</a> icon, some <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">navigation tools</a>: slide number indicator and zoom buttons. The <b>Status bar</b> also displays some notifications (such as "All changes saved", Connection is lost when there is no connection and the editor is trying to reconnect etc.) and allows <a href="../HelpfulHints/SpellChecking.htm" onclick="onhyperlinkclick(this)">setting the text language and enable spell checking</a>.</li>

View File

@ -26,12 +26,13 @@
</div>
<p>View options available on this tab:</p>
<ul>
<li><b>Normal</b> - switch to the normal view of the presentation and close the <em>Slide Master</em>.</li>
<li><b>Slide Master</b> - switch to the <a href="../UsageInstructions/SlideMaster.htm" target="_blank">slide master</a> view.</li>
<li><b>Zoom</b> allows to zoom in and zoom out your presentation.</li>
<li><b>Fit to Slide</b> allows to resize the slide so that the screen displays the whole slide.</li>
<li><b>Fit to Width</b> allows to resize the slide so that the slide scales to fit the width of the screen.</li>
<li><b>Interface Theme</b> allows to change interface theme by choosing a <b>Same as system</b>, <b>Light</b>, <b>Classic Light</b>, <b>Dark</b>, <b>Contrast Dark</b>, or <b>Gray</b> theme.</li>
</ul>
<p>The <a href="../UsageInstructions/SlideMaster.htm"><b>Slide Master</b></a> feature can be accessed on the tab.</p>
<p>The following options allow you to configure the elements to display or to hide. Check the elements to make them visible:</p>
<ul>
<li><b>Notes</b> to make the notes panel always visible.</li>

View File

@ -10,75 +10,84 @@
<script type="text/javascript" src="../../../../../../common/main/resources/help/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>Align and arrange objects on a slide</h1>
<p>In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, the added <b>autoshapes, images, charts</b> or <b>text boxes</b> can be aligned, grouped, ordered, distributed horizontally and vertically on the slide. To perform any of these actions, first select a separate object or several objects in the slide editing area. To select several objects, hold down the <b>Ctrl</b> key and left-click the necessary objects. To select a text box, click on its border, not the text within it. After that you can use either the icons on the <b>Home</b> tab of the top toolbar described below or the analogous options from the right-click menu.</p>
<h3>Align objects</h3>
<p>To <b>align</b> <em>two or more</em> selected objects, </p>
<ol>
<li>
Click the <b>Align shape</b> <div class = "icon icon-alignshape"></div> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Slide</b> to align objects relative to the edges of the slide,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to align objects relative to each other,</li>
</ul>
</li>
<li>
Click the <b>Align shape</b> <div class = "icon icon-alignshape"></div> icon once again and select the necessary alignment type from the list:
<ul>
<li><b>Align Left</b> <div class = "icon icon-alignobjectleft"></div> - to line up the objects horizontally on the left side of the leftmost object/left edge of the slide,</li>
<li><b>Align Center</b> <div class = "icon icon-alignobjectcenter"></div> - to line up the objects horizontally in their centers/center of the slide,</li>
<li><b>Align Right</b> <div class = "icon icon-alignobjectright"></div> - to line up the objects horizontally on the right side of the rightmost object/right edge of the slide,</li>
<li><b>Align Top</b> <div class = "icon icon-alignobjecttop"></div> - to line up the objects vertically to the top edge of the topmost object/top edge of the slide,</li>
<li><b>Align Middle</b> <div class = "icon icon-alignobjectmiddle"></div> - to line up the objects vertically in their middles/middle of the slide,</li>
<li><b>Align Bottom</b> <div class = "icon icon-alignobjectbottom"></div> - to line up the objects vertically to the bottom edge of the bottommost object/bottom edge of the slide.</li>
</ul>
</li>
</ol>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available alignment options.</p>
<p>If you want to align a single object, it can be aligned relative to the edges of the slide. The <b>Align to Slide</b> option is selected by default in this case.</p>
<h3>Distribute objects</h3>
<p>To <b>distribute</b> <em>three or more</em> selected objects horizontally or vertically so that the equal distance appears between them, </p>
<ol>
<li>
Click the <b>Align</b> <div class = "icon icon-alignshape"></div> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Slide</b> to distribute objects between the edges of the slide,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to distribute objects between two outermost selected objects,</li>
</ul>
</li>
<li>
Click the <b>Align shape</b> <div class = "icon icon-alignshape"></div> icon once again and select the necessary distribution type from the list:
<ul>
<li><b>Distribute Horizontally</b> <div class = "icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the slide<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
<li><b>Distribute Vertically</b> <div class = "icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the slide<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
</ul>
</li>
</ol>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available distribution options.</p>
<p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
<h3>Group objects</h3>
<p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the <b>Arrange shape</b> <span class="icon icon-arrangeshape"></span> icon on the <b>Home</b> tab of the top toolbar and select the necessary option from the list:</p>
<ul>
<li><b>Group</b> <div class = "icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <div class = "icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
</ul>
<p>Alternatively, you can right-click the selected objects, choose the <b>Arrange</b> option from the contextual menu and then use the <b>Group</b> or <b>Ungroup</b> option.</p>
<p class="note"><b>Note</b>: the <b>Group</b> option is disabled if you select less than two objects. The <b>Ungroup</b> option is available only when a group of the previously joined objects is selected.</p>
<h3>Arrange objects</h3>
<p>To <b>arrange</b> the selected object(s) (i.e. to change their order when several objects overlap each other), click the <b>Arrange shape</b> <span class="icon icon-arrangeshape"></span> icon on the <b>Home</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
<ul>
<li><b>Bring To Foreground</b> <div class = "icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
<li><b>Send To Background</b> <div class = "icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
<li><b>Bring Forward</b> <div class = "icon icon-bringforward"></div> - to move the selected object(s) one level forward as related to other objects.</li>
<li><b>Send Backward</b> <div class = "icon icon-sendbackward"></div> - to move the selected object(s) one level backward as related to other objects.</li>
</ul>
<p>Alternatively, you can right-click the selected object(s), choose the <b>Arrange</b> option from the contextual menu and then use one of the available arrangement options.</p>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Align and arrange objects on a slide</h1>
<p>In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, the added <b>autoshapes, images, charts</b> or <b>text boxes</b> can be aligned, grouped, ordered, distributed horizontally and vertically on the slide. To perform any of these actions, first select a separate object or several objects in the slide editing area. To select several objects, hold down the <b>Ctrl</b> key and left-click the necessary objects. To select a text box, click on its border, not the text within it. After that you can use either the icons on the <b>Home</b> tab of the top toolbar described below or the analogous options from the right-click menu.</p>
<h3>Align objects</h3>
<p>To <b>align</b> <em>two or more</em> selected objects, </p>
<ol>
<li>
Click the <b>Align shape</b> <div class="icon icon-alignshape"></div> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Slide</b> to align objects relative to the edges of the slide,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to align objects relative to each other,</li>
</ul>
</li>
<li>
Click the <b>Align shape</b> <div class="icon icon-alignshape"></div> icon once again and select the necessary alignment type from the list:
<ul>
<li><b>Align Left</b> <div class="icon icon-alignobjectleft"></div> - to line up the objects horizontally on the left side of the leftmost object/left edge of the slide,</li>
<li><b>Align Center</b> <div class="icon icon-alignobjectcenter"></div> - to line up the objects horizontally in their centers/center of the slide,</li>
<li><b>Align Right</b> <div class="icon icon-alignobjectright"></div> - to line up the objects horizontally on the right side of the rightmost object/right edge of the slide,</li>
<li><b>Align Top</b> <div class="icon icon-alignobjecttop"></div> - to line up the objects vertically to the top edge of the topmost object/top edge of the slide,</li>
<li><b>Align Middle</b> <div class="icon icon-alignobjectmiddle"></div> - to line up the objects vertically in their middles/middle of the slide,</li>
<li><b>Align Bottom</b> <div class="icon icon-alignobjectbottom"></div> - to line up the objects vertically to the bottom edge of the bottommost object/bottom edge of the slide.</li>
</ul>
</li>
</ol>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available alignment options.</p>
<p>If you want to align a single object, it can be aligned relative to the edges of the slide. The <b>Align to Slide</b> option is selected by default in this case.</p>
<h3>Distribute objects</h3>
<p>To <b>distribute</b> <em>three or more</em> selected objects horizontally or vertically so that the equal distance appears between them, </p>
<ol>
<li>
Click the <b>Align</b> <div class="icon icon-alignshape"></div> icon on the <b>Home</b> tab of the top toolbar and select one of the following options:
<ul>
<li><b>Align to Slide</b> to distribute objects between the edges of the slide,</li>
<li><b>Align Selected Objects</b> (this option is selected by default) to distribute objects between two outermost selected objects,</li>
</ul>
</li>
<li>
Click the <b>Align shape</b> <div class="icon icon-alignshape"></div> icon once again and select the necessary distribution type from the list:
<ul>
<li><b>Distribute Horizontally</b> <div class="icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects/left and right edges of the slide<!--to align the selected objects by their centers (from right to left edges) to the horizontal center of the page-->.</li>
<li><b>Distribute Vertically</b> <div class="icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects/top and bottom edges of the slide<!--to align the selected objects by their centers (from top to bottom edges) to the vertical center of the page-->.</li>
</ul>
</li>
</ol>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available distribution options.</p>
<p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
<h3>Group objects</h3>
<p>To <b>group</b> <em>two or more</em> selected objects or <b>ungroup</b> them, click the <b>Arrange shape</b> <span class="icon icon-arrangeshape"></span> icon on the <b>Home</b> tab of the top toolbar and select the necessary option from the list:</p>
<ul>
<li><b>Group</b> <div class="icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <div class="icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
</ul>
<p>Alternatively, you can right-click the selected objects, choose the <b>Arrange</b> option from the contextual menu and then use the <b>Group</b> or <b>Ungroup</b> option.</p>
<p class="note"><b>Note</b>: the <b>Group</b> option is disabled if you select less than two objects. The <b>Ungroup</b> option is available only when a group of the previously joined objects is selected.</p>
<h3>Arrange objects</h3>
<p>To <b>arrange</b> the selected object(s) (i.e. to change their order when several objects overlap each other), click the <b>Arrange shape</b> <span class="icon icon-arrangeshape"></span> icon on the <b>Home</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
<ul>
<li><b>Bring To Foreground</b> <div class="icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
<li><b>Send To Background</b> <div class="icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
<li><b>Bring Forward</b> <div class="icon icon-bringforward"></div> - to move the selected object(s) one level forward as related to other objects.</li>
<li><b>Send Backward</b> <div class="icon icon-sendbackward"></div> - to move the selected object(s) one level backward as related to other objects.</li>
</ul>
<p>Alternatively, you can right-click the selected object(s), choose the <b>Arrange</b> option from the contextual menu and then use one of the available arrangement options.</p>
<h3 id="boolean">Boolean operations on shapes</h3>
<p>To access the logical operations on shapes, select the <b>Merge shapes</b> menu item in the context menu. The Boolean operations include the following:</p>
<ul>
<li><b>Union</b> - the shapes will be united into one group and share one area.</li>
<li><b>Combine</b> - the shapes will be united into one group, but the shared area will be highlighted.</li>
<li><b>Fragment</b> - the shapes will be united into one group, but the shared area will be outlined.</li>
<li><b>Intersect</b> - creates a new shape from the areas where the selected shapes overlap.</li>
<li><b>Subtract</b> - removes the area of a shape from the one underneath it.</li>
</ul>
</div>
</body>
</html>

View File

@ -10,37 +10,39 @@
<script type="text/javascript" src="../../../../../../common/main/resources/help/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>Insert and adjust images</h1>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Insert and adjust images</h1>
<h3>Insert an image</h3>
<p>In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you can insert images in the most popular formats into your presentation. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
<p>To <b>add</b> an image on a slide,</p>
<ol>
<li>in the slide list on the left, select the slide you want to add the image to,</li>
<li>click the <div class = "icon icon-image"></div> <b>Image</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>select one of the following options to load the image:
<ul>
<li>the <b>Image from File</b> option will open the standard dialog window so that you can choose a file. Browse the hard disk drive your computer to select the necessary file and click the <b>Open</b> button
<p>In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you can insert images in the most popular formats into your presentation. The following image formats are supported: <b>BMP</b>, <b>GIF</b>, <b>JPEG</b>, <b>JPG</b>, <b>PNG</b>.</p>
<p>To <b>add</b> an image on a slide,</p>
<ol>
<li>in the slide list on the left, select the slide you want to add the image to,</li>
<li>click the <div class="icon icon-image"></div> <b>Image</b> icon on the <b>Home</b> or <b>Insert</b> tab of the top toolbar,</li>
<li>
select one of the following options to load the image:
<ul>
<li>
the <b>Image from File</b> option will open the standard dialog window so that you can choose a file. Browse the hard disk drive your computer to select the necessary file and click the <b>Open</b> button
<p class="note">In the <em>online editor</em>, you can select several images at once.</p>
</li>
<li>the <b>Image from URL</b> option will open the window where you can enter the web address of the necessary image and click the <b>OK</b> button</li>
<li class="onlineDocumentFeatures"> the <b>Image from Storage</b> option will open the <b>Select data source</b> window. Select an image stored on your portal and click the <b>OK</b> button</li>
</ul>
</li>
</ul>
</li>
<li>once the image is added, you can <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size and position</a>. You can save the image as picture on your hard drive using the <b>Save as picture</b> option in the right-click menu.</li>
</ol>
<p>You can also add an image into a text placeholder pressing the <span class = "icon icon-placeholder_imagefromfile"></span> <b>Image from file</b> in it and selecting the necessary image stored on your PC, or use the <span class="icon icon-placeholder_imagefromurl"></span> <b>Image from URL</b> button and specify the image URL address:</p>
<p><img alt="Add image to placeholder" src="../images/placeholder_object.png" /></p>
</ol>
<p>You can also add an image into a text placeholder pressing the <span class="icon icon-placeholder_imagefromfile"></span> <b>Image from file</b> in it and selecting the necessary image stored on your PC, or use the <span class="icon icon-placeholder_imagefromurl"></span> <b>Image from URL</b> button and specify the image URL address:</p>
<p><img alt="Add image to placeholder" src="../images/placeholder_object.png" /></p>
<p>It's also possible to add an image to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
<hr />
<hr />
<h3>Adjust image settings</h3>
<p>The right sidebar is activated when you left-click an image and choose the <b>Image settings</b> <span class="icon icon-image_settings_icon"></span> icon on the right. It contains the following sections:</p>
<p>The right sidebar is activated when you left-click an image and choose the <b>Image settings</b> <span class="icon icon-image_settings_icon"></span> icon on the right. It contains the following sections:</p>
<img alt="Image Settings tab" src="../images/imagesettingstab.png" />
<p><b>Size</b> - is used to view the <b>Width</b> and <b>Height</b> of the current image or restore its <b>Actual Size</b> if necessary.</p>
<p>The <b>Crop</b> button is used to crop the image. Click the <b>Crop</b> button to activate cropping handles which appear on the image corners and in the center of its each side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the <span class="icon icon-arrow"></span> icon and drag the area. </p>
<ul>
<li>To crop a single side, drag the handle located in the center of this side.</li>
@ -55,25 +57,27 @@
<li>If you select the <b>Fill</b> option, the central part of the original image will be preserved and used to fill the selected cropping area, while other parts of the image will be removed.</li>
<li>If you select the <b>Fit</b> option, the image will be resized so that it fits the cropping area height or width. No parts of the original image will be removed, but empty spaces may appear within the selected cropping area.</li>
</ul>
<p>To return the image to its default pixel dimensions, click the <b>Reset crop</b> button.</p>
<p><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.</p>
<p><b>Replace Image</b> - is used to load another image instead of the current one from the desired source. You can select one of the options: <b>From File</b>, <b>From Storage</b>, or <b>From URL</b>. The <b>Replace image</b> option is also available in the right-click menu.</p>
<p><b>Rotation</b> is used to rotate the image by 90 degrees clockwise or counterclockwise as well as to flip the image horizontally or vertically. Click one of the buttons:</p>
<ul>
<li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the image by 90 degrees counterclockwise</li>
<li><div class = "icon icon-rotateclockwise"></div> to rotate the image by 90 degrees clockwise</li>
<li><div class = "icon icon-fliplefttoright"></div> to flip the image horizontally (left to right)</li>
<li><div class = "icon icon-flipupsidedown"></div> to flip the image vertically (upside down)</li>
<li><div class="icon icon-rotatecounterclockwise"></div> to rotate the image by 90 degrees counterclockwise</li>
<li><div class="icon icon-rotateclockwise"></div> to rotate the image by 90 degrees clockwise</li>
<li><div class="icon icon-fliplefttoright"></div> to flip the image horizontally (left to right)</li>
<li><div class="icon icon-flipupsidedown"></div> to flip the image vertically (upside down)</li>
</ul>
<p>When the image is selected, the <b>Shape settings</b> <span class="icon icon-shape_settings_icon"></span> icon is also available on the right. You can click this icon to open the <b>Shape settings</b> tab on the right sidebar and adjust the <a href="../UsageInstructions/InsertAutoshapes.htm#shape_stroke" onclick="onhyperlinkclick(this)"><b>Line</b></a> type, size, color, and opacity, as well as change its type by selecting another shape from the <b>Change Autoshape</b> menu. The shape of the image will change correspondingly.</p>
<p>On the <b>Shape Settings</b> tab, you can also use the <b>Show shadow</b> option to add a shadow to the image.</p>
<p><img alt="Shape Settings tab" src="../images/right_image_shape.png" /></p>
<hr />
<p>To change the <b>advanced settings</b> of the image, right-click the image and select the <b>Image Advanced Settings</b> option from the contextual menu or left-click the image and press the <b>Show advanced settings</b> link on the right sidebar. The image properties window will be opened:</p>
<hr />
<p>To change the <b>advanced settings</b> of the image, right-click the image and select the <b>Image Advanced Settings</b> option from the contextual menu or left-click the image and press the <b>Show advanced settings</b> link on the right sidebar. The image properties window will be opened:</p>
<p><img alt="Image Properties" src="../images/image_properties.png" /></p>
<p>The <b>Placement</b> tab allows you to set the following image properties:</p>
<ul>
<li><b>Size</b> - use this option to change the image width and/or height. If the <b>Constant proportions</b> <div class = "icon icon-constantproportions"></div> button is clicked (in this case it looks like this <div class = "icon icon-constantproportionsactivated"></div>), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
<p>The <b>Placement</b> tab allows you to set the following image properties:</p>
<ul>
<li><b>Size</b> - use this option to change the image width and/or height. If the <b>Constant proportions</b> <div class="icon icon-constantproportions"></div> button is clicked (in this case it looks like this <div class="icon icon-constantproportionsactivated"></div>), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
<li><b>Position</b> - set the exact position using the <b>Horizontal</b> and <b>Vertical</b> fields, as well as the <b>From</b> field where you can access such settings as <b>Top Left Corner</b> and <b>Center</b>.</li>
</ul>
</ul>
<p><img alt="Image Properties: Rotation" src="../images/image_properties2.png" /></p>
<p>The <b>Rotation</b> tab contains the following parameters:</p>
<ul>
@ -81,10 +85,10 @@
<li><b>Flipped</b> - check the <b>Horizontally</b> box to flip the image horizontally (left to right) or check the <b>Vertically</b> box to flip the image vertically (upside down).</li>
</ul>
<p><img alt="Image Properties" src="../images/image_properties1.png" /></p>
<p>The <b>Alternative Text</b> tab allows specifying the <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand the contents of the image.</p>
<hr />
<p>To <b>delete</b> the inserted image, left-click it and press the <b>Delete</b> key.</p>
<p>To learn how to <b>align</b> an image on the slide or <b>arrange</b> several images, refer to the <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Align and arrange objects on a slide</a> section.</p>
</div>
<p>The <b>Alternative Text</b> tab allows specifying the <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand the contents of the image.</p>
<hr />
<p>To <b>delete</b> the inserted image, left-click it and press the <b>Delete</b> key.</p>
<p>To learn how to <b>align</b> an image on the slide or <b>arrange</b> several images, refer to the <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Align and arrange objects on a slide</a> section.</p>
</div>
</body>
</html>

View File

@ -0,0 +1,37 @@
<p>When you open the <b>ONLYOFFICE Presentation Editor</b> with viewer access rights, you can freely navigate the presentation using the viewing tools available.</p>
<p><img alt="Presentation viewer window" src="../images/presentation_viewer.png" /></p>
<ol>
<li>
The top toolbar has the following tabs and quick access buttons:
<ul>
<li>
Available tabs: <a href="../ProgramInterface/FileTab.htm" target="_blank">File</a> tab, <a href="../ProgramInterface/ViewTab.htm" target="_blank">View</a> tab, <a href="../ProgramInterface/PluginsTab.htm" target="_blank">Plugins</a> tab, <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/Editors-User-Guides/AllEditors/AIconfiguration.aspx" target="_blank" onclick="onhyperlinkclick(this)">AI</a> tab.
<p>The <b>View</b> tab allows changing the pointer style. Use the <b>Hand</b> tool for navigating the slide, and the <b>Select</b> tool for selecting slide objects.</p>
</li>
<li>
Quick access buttons:
<ul>
<li><b>Edit current file</b> - close the presentation viewer mode and switch to editing.</li>
<li><b>Print</b> - print the current presentation.</li>
<li><div class="icon icon-gotodocuments"></div> <b>Open file location</b> - <span class="desktopDocumentFeatures">in the <em>desktop version</em>, it allows opening the folder, where the file is stored, in the <b>File Explorer</b> window.</span> <span class="onlineDocumentFeatures"> In the <em>online version</em>, it allows opening the folder of the <b>Documents</b> module, where the file is stored, in a new browser tab.</span></li>
<li><b>Download file</b> - download the current presentation onto your hard disk drive.</li>
<li><div class="icon icon-search_icon_header"></div> <b>Search</b> - allows to search the presentation for a particular word or symbol, etc.</li>
</ul>
</li>
</ul>
</li>
<li>
The left panel has the following buttons:
<ul>
<li><div class="icon icon-searchicon"></div> - allows using the <a href="../HelpfulHints/Search.htm" onclick="onhyperlinkclick(this)">Search and Replace</a> tool,</li>
<li><div class="icon icon-slides"></div> - allows viewing slides and navigating them,</li>
<li><div class="icon icon-commentsicon"></div> - allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm#comments" onclick="onhyperlinkclick(this)">Comments</a> panel,</li>
<li class="onlineDocumentFeatures"><div class="icon icon-chaticon"></div> - (available in the <em>online version</em> only) allows opening the <a href="../HelpfulHints/CollaborativeEditing.htm#chat" onclick="onhyperlinkclick(this)">Chat</a> panel,</li>
<li class="onlineDocumentFeatures"><div class="icon icon-feedbackicon"></div> - (available in the <em>online version</em> only) allows contacting our support team,</li>
<li class="onlineDocumentFeatures"><div class="icon icon-about"></div> - (available in the <em>online version</em> only) allows viewing the information about the program.</li>
</ul>
</li>
<li>The <b>Slide list</b> has all presentation slides available for quick access.</li>
<li>The <b>Status bar</b> at the bottom of the editor window contains the <a href="../UsageInstructions/PreviewPresentation.htm" onclick="onhyperlinkclick(this)">Start slideshow</a> icon, some <a href="../HelpfulHints/Navigation.htm" onclick="onhyperlinkclick(this)">navigation tools</a>: slide number indicator and zoom buttons. The <b>Status bar</b> also displays some notifications (such as "All changes saved", Connection is lost when there is no connection and the editor is trying to reconnect etc.).</li>
<li>The <b>Scroll bar</b> on the right allows scrolling the presentation up and down.</li>
</ol>

View File

@ -56,11 +56,12 @@
<li>the <b>Timer</b> displays the elapsed time of the presentation in the <em>hh.mm.ss</em> format.</li>
<li>the <b>Pause presentation</b> <div class = "icon icon-presenter_pausepresentation"></div> button allows you to stop previewing. When the button is pressed, it turns into the <div class = "icon icon-presenter_startpresentation"></div> button.</li>
<li>the <b>Start presentation</b> <div class = "icon icon-presenter_startpresentation"></div> button allows you to resume previewing. When the button is pressed, it turns into the <div class = "icon icon-presenter_pausepresentation"></div> button.</li>
<li>the <b>Reset</b> button allows to reset the elapsed time of the presentation.</li>
<li>the <b>Reset</b> button allows resetting the elapsed time of the presentation.</li>
<li>the <b>Previous slide</b> <div class = "icon icon-presenter_previousslide"></div> button allows you to return to the previous slide.</li>
<li>the <b>Next slide</b> <div class = "icon icon-presenter_nextslide"></div> button allows you to advance to the following slide.</li>
<li>the <b>Slide number indicator</b> displays the current slide number as well as the overall number of slides in the presentation.</li>
<li>the <b>Pointer</b> <div class = "icon icon-pointer"></div> button allows you to highlight something on the screen when showing the presentation. When this option is enabled, the button looks like this: <div class = "icon icon-pointer_enabled"></div>. To point some objects, hover your mouse pointer over the slide preview area and move the pointer around the slide. The pointer will look the following way: <div class = "icon icon-pointer_screen"></div>. To disable this option, click the <div class = "icon icon-pointer_enabled"></div> button once again.</li>
<li>the <b>Pen</b> symbol allows enabling the drawing mode: choose the pen type, highlight and ink color, as well as erase previous markings on a slide.</li>
<li>the <b>End slideshow</b> button allows you to exit the <b>Presenter</b> mode.</li>
</ul>
</div>

View File

@ -22,14 +22,21 @@
<li>Click the <b>Slide Master</b> button on the top toolbar.</li>
</ol>
<p>To manage master slides:</p>
<p><img alt="Slide Master" src="../images/slidemaster.png" /></p>
<ol>
<li>Click the <b>Add Slide Master</b> button on the top toolbar of the <b>View</b> tab.</li>
<li>The Master slides for each layout will appear in the slide list on the left. They are visible only to you and only in the <em>Slide Master</em> mode.</li>
<li>Edit the slides the way you need them to look via the <b>Home</b> and <b>Insert</b> tabs.</li>
<li>
Edit the slides the way you need them to look via the <b>Home</b> and <b>Insert</b> tabs.
<p><img alt="Slide Master" src="../images/slidemaster.png" /></p>
</li>
<li>If you need more layouts, click the <b>Add Layout</b> button.</li>
<li>Customize the slide layout. Click the <b>Insert Placeholder</b> button to add and edit specific content areas.</li>
<li>Uncheck the <b>Title</b> and <b>Footers</b> buttons on the top toolbar if you do not need them.</li>
<li>
To <b>rename</b> your slide master, hover over it in the left panel, click it with the right mouse button, and choose the <b>Rename Master</b> option.
<p>To <b>rename</b> your layout, hover over it in the left panel, click it with the right mouse button, and choose the <b>Rename Layout</b> option.</p>
<p>Enter the required name into the corresponding field and click <b>OK</b>.</p>
</li>
</ol>
<p>To <b>exit</b> the Slide Master mode, click the <b>Close Master</b> button on the top toolbar, or go to the <b>View</b> tab and click the <b>Normal</b> button.</p>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 693 KiB

After

Width:  |  Height:  |  Size: 566 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 549 KiB

After

Width:  |  Height:  |  Size: 539 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 707 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 144 KiB

View File

@ -150,6 +150,12 @@
height: 30px;
}
.big-leftpart {
background-position: -599px -545px;
width: 222px;
height: 23px;
}
.big-bordersize {
background-position: -722px -498px;
width: 93px;
@ -163,17 +169,11 @@
}
.big-rightpart {
background-position: -599px -545px;
background-position: -599px -568px;
width: 176px;
height: 19px;
}
.big-leftpart {
background-position: -599px -564px;
width: 176px;
height: 17px;
}
.icon{
background-image: url(../images/icons.png);
background-repeat: no-repeat;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 481 B

After

Width:  |  Height:  |  Size: 594 B

View File

@ -73,11 +73,10 @@
</li>
<li>The <b>Use Alt key to navigate the user interface using the keyboard</b> option is used to enable using the <em>Alt</em> / <em>Option</em> key in keyboard shortcuts.</li>
<li><span class="desktopDocumentFeatures"><b>Show the Quick Print button in the editor header</b> is used in the <em>desktop version</em> to enable quick printing via the corresponding button at the top toolbar. The file will be printed on the last selected or default printer.</span></li>
<li>
The <b>RTL Interface (Beta)</b> option is used to change the direction in which elements of the interface are displayed.
<p class="note">This option is available only for interface languages that require RTL.</p>
</li>
<li><b>Snapped to the grid while scrolling</b> - enables grid snapping for the scrolling process.</li>
<li><b>Show horizontal scroll bar</b> - enables hiding/displaying the horizontal scroll bar.</li>
<li><b>Show vertical scroll bar</b> - enables hiding/displaying the vertical scroll bar.</li>
<li><b>Default sheet direction</b> - choose whether you want the sheet direction to be <em>Left-to-right</em> or <em>Right-to-left</em>. Please note that this setting will be applied only to the newly created sheets.</li>
<li>The <b>Customize quick access</b> button is used to choose which buttons shall be available in the top toolbar, i.e., <em>Save</em>, <em>Print</em>, <em>Undo</em>, and <em>Redo</em>.</li>
<li>The <b>Unit of measurement</b> option is used to specify what units are used on the rulers and in properties of objects when setting such parameters as width, height, spacing, margins etc. The available units are <em>Centimeter</em>, <em>Point</em>, and <em>Inch</em>.</li>
<li>

View File

@ -29,13 +29,15 @@
<p>To update the added external links,</p>
<ol>
<li>switch to the <b>Data</b> tab,</li>
<li>click the <b>External Links</b> button,</li>
<li>select the necessary link in the list,
<li>
click the <b>External Links</b> button,
<p><img alt="External Links" src="../images/externallinks.png" /></p>
</li>
<li>click the <b>Update Values</b> button or click the arrow next to it and choose whether you want to <b>Update values</b> (currently selected) or <b>Update all</b>.</li>
<li>activate the <b>Automatically update data from the linked sources</b> to keep <em>all data</em> constantly up-to-date,</li>
<li>to update <em>certain values</em>, select them and click the <b>Update values</b> button.</li>
</ol>
<p>The status will be changed to 'OK'.</p>
<p>In the same <b>External links</b> window, you can click the <b>Open source</b> button to go to the source workbook; or click the <b>Change source</b> button to change the source link.</p>
<p>When you open the workbook which contains external links, the warning appears:</p>
<p><img alt="External Links" src="../images/extlinkwarning.png" /></p>
<p>Click <b>Update</b> to update all external links.</p>

View File

@ -11,16 +11,16 @@
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Cut/copy/paste data</h1>
<h3>Use basic clipboard operations</h3>
<p>To cut, copy and paste data in the current spreadsheet make use of the right-click menu or use the corresponding icons of the <a href="https://www.onlyoffice.com/spreadsheet-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Spreadsheet Editor</b></a> available on any tab of the top toolbar,</p>
<ul>
<li><b>Cut</b> - select data and use the <b>Cut</b> option from the right-click menu, or the <b>Cut</b> <span class="icon icon-cut"></span> icon on the top toolbar to delete the selected data and send them to the computer clipboard memory. <span class="onlineDocumentFeatures">The cut data can be later inserted to another place in the same spreadsheet.</span></li>
<li><b>Copy</b> - select data and either use the <b>Copy</b> <span class = "icon icon-copy"></span> icon at the top toolbar or right-click and select the <b>Copy</b> option from the menu to send the selected data to the computer clipboard memory. <span class="onlineDocumentFeatures">The copied data can be later inserted to another place in the same spreadsheet.</span></li>
<li><b>Paste</b> - select a place and either use the <b>Paste</b> <span class = "icon icon-paste"></span> icon on the top toolbar or right-click and select the <b>Paste</b> option to insert the previously copied/cut data from the computer clipboard memory to the current cursor position. <span class="onlineDocumentFeatures">The data can be previously copied from the same spreadsheet.</span></li>
<li><b>Copy</b> - select data and either use the <b>Copy</b> <span class="icon icon-copy"></span> icon at the top toolbar or right-click and select the <b>Copy</b> option from the menu to send the selected data to the computer clipboard memory. <span class="onlineDocumentFeatures">The copied data can be later inserted to another place in the same spreadsheet.</span></li>
<li><b>Paste</b> - select a place and either use the <b>Paste</b> <span class="icon icon-paste"></span> icon on the top toolbar or right-click and select the <b>Paste</b> option to insert the previously copied/cut data from the computer clipboard memory to the current cursor position. <span class="onlineDocumentFeatures">The data can be previously copied from the same spreadsheet.</span></li>
</ul>
<p><span class="onlineDocumentFeatures">In the <em>online version</em>, the following key combinations are only used to copy or paste data from/into another spreadsheet or some other program,</span> <span class="desktopDocumentFeatures">in the <em>desktop version</em>, both the corresponding buttons/menu options and key combinations can be used for any copy/paste operations:</span></p>
<ul>
@ -28,11 +28,11 @@
<li><b>Ctrl+C</b> key combination for copying (<b>Cmd+C</b> for macOS);</li>
<li><b>Ctrl+V</b> key combination for pasting (<b>Cmd+V</b> for macOS).</li>
</ul>
<p class="note"><b>Note</b>: instead of cutting and pasting data within the same worksheet you can select the required cell/cell range, hover the mouse cursor over the selection border so that it turns into the Arrow <span class = "icon icon-arrow"></span> icon and drag and drop the selection to the necessary position.</p>
<p class="note"><b>Note</b>: instead of cutting and pasting data within the same worksheet you can select the required cell/cell range, hover the mouse cursor over the selection border so that it turns into the Arrow <span class="icon icon-arrow"></span> icon and drag and drop the selection to the necessary position.</p>
<p>To enable / disable the automatic appearance of the <b>Paste Special</b> button after pasting, go to the <b>File</b> tab > <b>Advanced Settings</b> and check / uncheck the <b>Show the Paste Options button when the content is pasted</b> checkbox.</p>
<h3>Use the Paste Special feature</h3>
<p class="note"><b>Note</b>: For collaborative editing, the <b>Paste Special</b> feature is available in the <b>Strict</b> co-editing mode only.</p>
<p>Once the copied data is pasted, the <b>Paste Special</b> <span class = "icon icon-pastespecialbutton"></span> button appears next to the lower right corner of the inserted cell/cell range. Click this button to select the necessary paste option or use the <em>Ctrl</em> key to open the <b>Paste Special</b> menu, then press the letter key given in the brackets next to the required option.</p>
<p>Once the copied data is pasted, the <b>Paste Special</b> <span class="icon icon-pastespecialbutton"></span> button appears next to the lower right corner of the inserted cell/cell range. Click this button to select the necessary paste option or use the <em>Ctrl</em> key to open the <b>Paste Special</b> menu, then press the letter key given in the brackets next to the required option.</p>
<p>When pasting a cell/cell range with formatted data, the following options are available:</p>
<ul>
<li><em>Paste (Ctrl then P)</em> - allows you to paste all the cell contents including data formatting. This option is selected by default.</li>
@ -56,41 +56,42 @@
</ul>
</li>
<li><em>Paste only formatting (Ctrl then R)</em> - allows you to paste the cell formatting only without pasting the cell contents.</li>
<li><em>Paste link (Ctrl then N)</em> - allows you to paste the <a href="../UsageInstructions/AddExternalLinks.htm" onclick="onhyperlinkclick(this)">external link to a cell or range of cells</a> in another spreadsheet within the current portal (in the online editor) or in a local file (in the desktop editor).
<li>
<em>Paste link (Ctrl then N)</em> - allows you to paste the <a href="../UsageInstructions/AddExternalLinks.htm" onclick="onhyperlinkclick(this)">external link to a cell or range of cells</a> in another spreadsheet within the current portal (in the online editor) or in a local file (in the desktop editor).
<p><img alt="Paste options" src="../images/pastespecial.png" /></p>
<ol>
<li>
<b>Paste</b>
<ul>
<li><em>Formulas</em> - allows you to paste formulas without pasting the data formatting.</li>
<li><em>Values</em> - allows you to paste the formula results without pasting the data formatting.</li>
<li><em>Formats</em> - allows you to apply the formatting of the copied area.</li>
<li><em>Comments</em> - allows you to add comments of the copied area.</li>
<li><em>Column widths</em> - allows you to set certal column widths of the copied area.</li>
<li><em>All except borders</em> - allows you to paste formulas, formula results with all its formatting except borders.</li>
<li><em>Formulas &#38; formatting</em> - allows you to paste formulas and apply formatting on them from the copied area.</li>
<li><em>Formulas &#38; column widths</em> - allows you to paste formulas and set certaln column widths of the copied area.</li>
<li><em>Formulas &#38; number formulas</em> - allows you to paste formulas and number formulas.</li>
<li><em>Values &#38; number formats</em> - allows you to paste formula results and apply the numbers formatting of the copied area.</li>
<li><em>Values &#38; formatting</em> - allows you to paste formula results and apply the formatting of the copied area.</li>
</ul>
</li>
<li>
<b>Operation</b>
<ul>
<li><em>Add</em> - allows you to automatically add numeric values in each inserted cell.</li>
<li><em>Subtract</em> - allows you to automatically subtract numeric values in each inserted cell.</li>
<li><em>Multiply</em> - allows you to automatically multiply numeric values in each inserted cell.</li>
<li><em>Divide</em> - allows you to automatically divide numeric values in each inserted cell.</li>
</ul>
</li>
<li><b>Transpose</b> - allows you to paste data switching them from columns to rows, or vice versa.</li>
<li><b>Skip blanks</b> - allows you to skip pasting empty cells and their formatting.</li>
</ol>
<p><img alt="Окно Специальная вставка" src="../images/pastespecial_window.png" /></p>
<ol>
<li>
<b>Paste</b>
<ul>
<li><em>Formulas</em> - allows you to paste formulas without pasting the data formatting.</li>
<li><em>Values</em> - allows you to paste the formula results without pasting the data formatting.</li>
<li><em>Formats</em> - allows you to apply the formatting of the copied area.</li>
<li><em>Comments</em> - allows you to add comments of the copied area.</li>
<li><em>Column widths</em> - allows you to set certal column widths of the copied area.</li>
<li><em>All except borders</em> - allows you to paste formulas, formula results with all its formatting except borders.</li>
<li><em>Formulas &#38; formatting</em> - allows you to paste formulas and apply formatting on them from the copied area.</li>
<li><em>Formulas &#38; column widths</em> - allows you to paste formulas and set certaln column widths of the copied area.</li>
<li><em>Formulas &#38; number formulas</em> - allows you to paste formulas and number formulas.</li>
<li><em>Values &#38; number formats</em> - allows you to paste formula results and apply the numbers formatting of the copied area.</li>
<li><em>Values &#38; formatting</em> - allows you to paste formula results and apply the formatting of the copied area.</li>
</ul>
</li>
<li>
<b>Operation</b>
<ul>
<li><em>Add</em> - allows you to automatically add numeric values in each inserted cell.</li>
<li><em>Subtract</em> - allows you to automatically subtract numeric values in each inserted cell.</li>
<li><em>Multiply</em> - allows you to automatically multiply numeric values in each inserted cell.</li>
<li><em>Divide</em> - allows you to automatically divide numeric values in each inserted cell.</li>
</ul>
</li>
<li><b>Transpose</b> - allows you to paste data switching them from columns to rows, or vice versa.</li>
<li><b>Skip blanks</b> - allows you to skip pasting empty cells and their formatting.</li>
</ol>
<p><img alt="Paste Special window" src="../images/pastespecial_window.png" /></p>
</li>
</ul>
<p>When pasting the contents of a single cell or some text within autoshapes, the following options are available:</p>
<ul>
<li><em>Source formatting (Ctrl+K)</em> - allows you to keep the source formatting of the copied data.</li>
@ -101,8 +102,9 @@
<p class="note">The delimited text can contain several records, and each record corresponds to a single table row. Each record can contain several text values separated with a delimiter (such as a comma, semicolon, colon, tab, space or other characters). The file should be saved as a plain text <b>.txt</b> file.</p>
<ul>
<li><em>Keep text only (Ctrl+T)</em> - allows you to paste text values into a single column where each cell contents corresponds to a row in the source text file.</li>
<li><em>Use text import wizard</em> - allows you to open the <b>Text Import Wizard</b> which helps to easily split the text values into multiple columns where each text value separated by a delimiter will be placed into a separate cell.
<p>When the <b>Text Import Wizard</b> window opens, select the text delimiter used in the delimited data from the <b>Delimiter</b> drop-down list. The data split into columns will be displayed in the <b>Preview</b> field below. If you are satisfied with the result, click the <b>OK</b> button.</p>
<li>
<em>Use text import wizard</em> - allows you to open the <b>Text Import Wizard</b> which helps to easily split the text values into multiple columns where each text value separated by a delimiter will be placed into a separate cell.
<p>When the <b>Text Import Wizard</b> window opens, select the text delimiter used in the delimited data from the <b>Delimiter</b> drop-down list. The data split into columns will be displayed in the <b>Preview</b> field below. If you are satisfied with the result, click the <b>OK</b> button.</p>
</li>
</ul>
<p><img alt="Text import wizard" src="../images/textimportwizard.png" /></p>
@ -113,8 +115,10 @@
<li>Switch to the <b>Data</b> tab.</li>
<li>Click the <b>Text to columns</b> button on the top toolbar. The <b>Text to Columns Wizard</b> opens.</li>
<li>In the <b>Delimiter</b> drop-down list, select the delimiter used in the delimited data.</li>
<li>Click the <b>Advanced</b> button to open the <b>Advanced Settings</b> window in which you can specify the <b>Decimal</b> and <b>Thousands</b> separators.
<p><img alt="Separator settings window" src="../images/separator.png" /></p></li>
<li>
Click the <b>Advanced</b> button to open the <b>Advanced Settings</b> window in which you can specify the <b>Decimal</b> and <b>Thousands</b> separators.
<p><img alt="Separator settings window" src="../images/separator.png" /></p>
</li>
<li>Preview the result in the field below and click <b>OK</b>.</li>
</ol>
<p>After that, each text value separated by the delimiter will be located in a separate cell.</p>
@ -123,39 +127,53 @@
<p>To quickly fill multiple cells with the same data use the <b>Auto Fill</b> option:</p>
<ol>
<li>select a cell/cell range containing the required data,</li>
<li>move the mouse cursor over the fill handle in the right lower corner of the cell. The cursor will turn into the black cross:
<p><div class = "big big-autofill"></div></p>
<li>
move the mouse cursor over the fill handle in the right lower corner of the cell. The cursor will turn into the black cross:
<p><div class="big big-autofill"></div></p>
</li>
<li>drag the handle over the adjacent cells to fill them with the selected data.</li>
</ol>
<p class="note"><b>Note</b>: if you need to create a series of numbers (such as 1, 2, 3, 4...; 2, 4, 6, 8... etc.) or dates, you can enter at least two starting values and quickly extend the series selecting these cells and dragging the fill handle. For a series of days of the week or months, enter the initial value and drag the fill handle. </p>
<p>To further customize the cell autofilling, drag the range with the right mouse button to open the Auto Fill context menu:</p>
<p><img alt="Series - context menu" src="../images/series_context_menu.png" /></p>
<ul>
<li><b>Copy cells</b> - the cell range content will be copied into your clipboard.</li>
<li><b>Fill series</b> - autofill based on the established pattern in the selected cell range.</li>
<li><b>Fill days</b> - only days will follow the established pattern, e.g., 01/01/2025, 02/01/2025 ... (DD-MM-YYYY).</li>
<li><b>Fill weekdays</b> - only weekdays will follow the established pattern, the weekends will be omitted.</li>
<li><b>Fill months</b> - only months will follow the established pattern, e.g., 01/01/2025, 01/02/2025 ... (DD-MM-YYYY).</li>
<li><b>Fill years</b> - only years will follow the established pattern, e.g., 01/01/2025, 01/01/2026 ... (DD-MM-YYYY).</li>
<li><b>Linear trend</b> - the autofill will follow the linear trend (1, 2, 3 ...).</li>
<li><b>Growth trend</b> - the autofill will follow the exponential growth trend (1, 2, 4, 8, 16 ...).</li>
<li><b>Series</b> - opens the <b>Series</b> menu, where you can further <a href="#series">customize the settings</a>.</li>
</ul>
<h3>Fill cells in the column with text values</h3>
<p>If a column in your spreadsheet contains some text values, you can easily replace any value within this column or fill the next blank cell selecting one of already existing text values.</p>
<p>Right-click the necessary cell and choose the <b>Select from drop-down list</b> option in the contextual menu.</p>
<p><img alt="Select from drop-down list" src="../images/selectfromlist.png" /></p>
<p>Select one of the available text values to replace the current one or fill an empty cell.</p>
<h3 id="series">Fill cells using the Series tool</h3>
<ol>
<li>Select a cell/cell range containing the initial data and some empty cells in the necessary direction. Click the <b>Fill</b> icon on the <b>Home</b> tab of the top toolbar and choose the <b>Series</b> option.
<p>You can also use the <b>Down</b>, <b>Right</b>, <b>Up</b>, <b>Left</b> options to fill the selected empty cells.</p>
<p><img alt="Series - menu" src="../images/series_menu.png" /></p>
<p>There is another way to access the <b>Series</b> window. You can select the initial data, move the mouse cursor over the fill handle in the right lower corner of the cell, click and hold the <b>right mouse button</b> on the fill handle, then drag down, up, right, or left and release the right mouse button - the context menu appears with the <b>Series</b> option.</p>
<p>You can also use the following options to fill the selected empty cells: <b>Copy cells</b> is used to fill cells with the same values, <b>Fill series</b> is used to fill cells with a series using the default step value, <b>Fill days</b> is used to fill cells with a series of dates, <b>Linear trend</b> is available if more than one starting value is selected, is used to add the default step value to the starting value and then to each subsequent value, <b>Growth trend</b> is available if more than one starting value is selected, is used to multiply the starting value by the default step value.</p>
<p><img alt="Series - context menu" src="../images/series_context_menu.png" /></p>
<li>
Select a cell/cell range containing the initial data and some empty cells in the necessary direction. Click the <b>Fill</b> icon on the <b>Home</b> tab of the top toolbar and choose the <b>Series</b> option.
<p>You can also use the <b>Down</b>, <b>Right</b>, <b>Up</b>, <b>Left</b> options to fill the selected empty cells.</p>
<p><img alt="Series - menu" src="../images/series_menu.png" /></p>
<p>There is another way to access the <b>Series</b> window. You can select the initial data, move the mouse cursor over the fill handle in the right lower corner of the cell, click and hold the <b>right mouse button</b> on the fill handle, then drag down, up, right, or left and release the right mouse button - the context menu appears with the <b>Series</b> option.</p>
</li>
<li>In the <b>Series</b> dialog window, select the necessary options and click <b>OK</b>:
<li>
In the <b>Series</b> dialog window, select the necessary options and click <b>OK</b>:
<p><img alt="Series - window" src="../images/series_window.png" /></p>
<ul>
<li><b>Series in</b>: <em>Rows</em>, <em>Columns</em> - select the direction to fill cells.</li>
<li><b>Type</b>: <em>Linear</em> is used to add the step value to the starting value and then to each subsequent value, <em>Growth</em> is used to multiply the starting value by the step value, <em>Date</em> is used to fill cells with a series of dates, <em>AutoFill</em> is used to fill cells with data based on other cells.</li>
<li><b>Date unit</b>: <em>Day</em>, <em>Weekday</em>, <em>Month</em>, <em>Year</em> - select the date unit you want to increase the series by.</li>
<li><b>Trend</b> - check this box if there is more than one starting value in the series.</li>
<li><b>Step value</b> - select the numerical value you want to increase the series by. By default, it is set to 1.</li>
<li><b>Stop value</b> - specify the last value in the series.</li>
</ul>
<ul>
<li><b>Series in</b>: <em>Rows</em>, <em>Columns</em> - select the direction to fill cells.</li>
<li><b>Type</b>: <em>Linear</em> is used to add the step value to the starting value and then to each subsequent value, <em>Growth</em> is used to multiply the starting value by the step value, <em>Date</em> is used to fill cells with a series of dates, <em>AutoFill</em> is used to fill cells with data based on other cells.</li>
<li><b>Date unit</b>: <em>Day</em>, <em>Weekday</em>, <em>Month</em>, <em>Year</em> - select the date unit you want to increase the series by.</li>
<li><b>Trend</b> - check this box if there is more than one starting value in the series.</li>
<li><b>Step value</b> - select the numerical value you want to increase the series by. By default, it is set to 1.</li>
<li><b>Stop value</b> - specify the last value in the series.</li>
</ul>
</li>
</ol>
</div>
</body>
</html>
</html>

View File

@ -21,11 +21,12 @@
<ol>
<li>place the cursor where the image should be added,</li>
<li>switch to the <b>Insert</b> tab of the top toolbar,</li>
<li>click the <div class = "icon icon-image"></div> <b>Image</b> icon on the top toolbar,</li>
<li>click the <div class="icon icon-image"></div> <b>Image</b> icon on the top toolbar,</li>
<li>
select one of the following options to load the image:
<ul>
<li>the <b>Image from File</b> option will open the standard dialog window to select a file. Browse the hard disk drive of your computer to find the required file and click the <b>Open</b> button
<li>
the <b>Image from File</b> option will open the standard dialog window to select a file. Browse the hard disk drive of your computer to find the required file and click the <b>Open</b> button
<p class="note">In the <em>online editor</em>, you can select several images at once.</p>
</li>
<li>the <b>Image from URL</b> option will open the window where you can enter the web address of the required image and click the <b>OK</b> button</li>
@ -40,10 +41,10 @@
<ol>
<li>select the required image with the mouse,</li>
<li>
click the <b>Image settings</b> <div class = "icon icon-image_settings_icon"></div> icon on the right sidebar,
click the <b>Image settings</b> <div class="icon icon-image_settings_icon"></div> icon on the right sidebar,
<p><img alt="Image Settings Right-Side Panel window" src="../images/imagesettings.png" /></p>
</li>
<li>in the <b>Size</b> section, set the necessary <b>Width</b> and <b>Height</b> values. If the <b>Constant proportions</b> <div class = "icon icon-constantproportions"></div> button is clicked (in this case it looks like this <div class = "icon icon-constantproportionsactivated"></div>), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
<li>in the <b>Size</b> section, set the necessary <b>Width</b> and <b>Height</b> values. If the <b>Constant proportions</b> <div class="icon icon-constantproportions"></div> button is clicked (in this case it looks like this <div class="icon icon-constantproportionsactivated"></div>), the width and height will be changed together preserving the original image aspect ratio. To restore the actual size of the added image, click the <b>Actual Size</b> button.</li>
</ol>
<p>To crop the image:</p>
<p>Click the <b>Crop</b> button to activate cropping handles that appear on the image corners and in the center of each side. Manually drag the handles to set the cropping area. You can move the mouse cursor over the cropping area border so that it turns into the Arrow <span class="icon icon-arrow"></span> icon and drag the area. </p>
@ -60,17 +61,19 @@
<li>If you select the <b>Fill</b> option, the central part of the original image will be preserved and used to fill the selected cropping area, while other parts of the image will be removed.</li>
<li>If you select the <b>Fit</b> option, the image will be resized so that it fits the height or width of the cropping area. No parts of the original image will be removed, but empty spaces may appear within the selected cropping area.</li>
</ul>
<p>To return the image to its default pixel dimensions, click the <b>Reset crop</b> button.</p>
<p><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.</p>
<p>To rotate the image:</p>
<ol>
<li>select the required image with the mouse,</li>
<li>click the <b>Image settings</b> <div class = "icon icon-image_settings_icon"></div> icon on the right sidebar,</li>
<li>click the <b>Image settings</b> <div class="icon icon-image_settings_icon"></div> icon on the right sidebar,</li>
<li>
in the <b>Rotation</b> section, click one of the buttons:
<ul>
<li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the image by 90 degrees counterclockwise</li>
<li><div class = "icon icon-rotateclockwise"></div> to rotate the image by 90 degrees clockwise</li>
<li><div class = "icon icon-fliplefttoright"></div> to flip the image horizontally (left to right)</li>
<li><div class = "icon icon-flipupsidedown"></div> to flip the image vertically (upside down)</li>
<li><div class="icon icon-rotatecounterclockwise"></div> to rotate the image by 90 degrees counterclockwise</li>
<li><div class="icon icon-rotateclockwise"></div> to rotate the image by 90 degrees clockwise</li>
<li><div class="icon icon-fliplefttoright"></div> to flip the image horizontally (left to right)</li>
<li><div class="icon icon-flipupsidedown"></div> to flip the image vertically (upside down)</li>
</ul>
<p class="note">Alternatively, you can right-click the image and use the <b>Rotate</b> option from the contextual menu.</p>
</li>
@ -78,7 +81,7 @@
<p>To replace the inserted image,</p>
<ol>
<li>select the required image with the mouse,</li>
<li>click the <b>Image settings</b> <div class = "icon icon-image_settings_icon"></div> icon on the right sidebar,</li>
<li>click the <b>Image settings</b> <div class="icon icon-image_settings_icon"></div> icon on the right sidebar,</li>
<li>click the <b>Replace Image</b> button,</li>
<li>
choose the necessary option: <b>From File</b>, <b>From Storage</b>, or <b>From URL</b> and select the desired image.

View File

@ -33,10 +33,10 @@
<p>To manually <b>rotate</b> the autoshape/image, hover the mouse cursor over the rotation handle <span class="icon icon-greencircle"></span> 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>
<p>To rotate a shape or image by 90 degrees counterclockwise/clockwise or flip the object horizontally/vertically you can use the <b>Rotation</b> section of the right sidebar that will be activated once you select the necessary object. To open it, click the <b>Shape settings</b> <span class="icon icon-shape_settings_icon"></span> icon or the <b>Image settings</b> <span class="icon icon-image_settings_icon"></span> icon to the right. Click one of the buttons:</p>
<ul>
<li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the object by 90 degrees counterclockwise</li>
<li><div class = "icon icon-rotateclockwise"></div> to rotate the object by 90 degrees clockwise</li>
<li><div class = "icon icon-fliplefttoright"></div> to flip the object horizontally (left to right)</li>
<li><div class = "icon icon-flipupsidedown"></div> to flip the object vertically (upside down)</li>
<li><div class="icon icon-rotatecounterclockwise"></div> to rotate the object by 90 degrees counterclockwise</li>
<li><div class="icon icon-rotateclockwise"></div> to rotate the object by 90 degrees clockwise</li>
<li><div class="icon icon-fliplefttoright"></div> to flip the object horizontally (left to right)</li>
<li><div class="icon icon-flipupsidedown"></div> to flip the object vertically (upside down)</li>
</ul>
<p>It's also possible to right-click the image or shape, choose the <b>Rotate</b> option from the contextual menu and then use one of the available rotation options.</p>
<p>To rotate a shape or image by an exactly specified angle, click the <b>Show advanced settings</b> link on the right sidebar and use the <b>Rotation</b> tab of the <b>Advanced Settings</b> window. Specify the necessary value measured in degrees in the <b>Angle</b> field and click <b>OK</b>.</p>
@ -52,7 +52,7 @@
</li>
<li>
Once you click the anchor point, two blue lines with white squares at the ends will appear. These are Bezier handles that allow you to create and a curve and to change a curves smoothness.
<p><span class = "big big-editpoints_example"></span></p>
<p><span class="big big-editpoints_example"></span></p>
</li>
<li>
As long as the anchor points are active, you can add and delete them:
@ -65,28 +65,28 @@
<h3>Align objects</h3>
<p>To <b>align</b> <em>two or more</em> selected objects in relation to each other, hold down the <b>Ctrl</b> key while selecting the objects with the mouse, then click the <span class="icon icon-align_toptoolbar"></span> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary alignment type from the list:</p>
<ul>
<li><b>Align Left</b> <div class = "icon icon-alignobjectleft"></div> - to align objects relative to each other to the left edge of the leftmost object,</li>
<li><b>Align Center</b> <div class = "icon icon-alignobjectcenter"></div> - to align objects relative to each other in the center,</li>
<li><b>Align Right</b> <div class = "icon icon-alignobjectright"></div> - to align objects relative to each other to the right edge of the rightmost object,</li>
<li><b>Align Top</b> <div class = "icon icon-alignobjecttop"></div> - to align objects relative to each other to the top edge of the topmost object,</li>
<li><b>Align Middle</b> <div class = "icon icon-alignobjectmiddle"></div> - to align objects relative to each other in the middle,</li>
<li><b>Align Bottom</b> <div class = "icon icon-alignobjectbottom"></div> - to align objects relative to each other to the bottom edge of the bottommost object.</li>
<li><b>Align Left</b> <div class="icon icon-alignobjectleft"></div> - to align objects relative to each other to the left edge of the leftmost object,</li>
<li><b>Align Center</b> <div class="icon icon-alignobjectcenter"></div> - to align objects relative to each other in the center,</li>
<li><b>Align Right</b> <div class="icon icon-alignobjectright"></div> - to align objects relative to each other to the right edge of the rightmost object,</li>
<li><b>Align Top</b> <div class="icon icon-alignobjecttop"></div> - to align objects relative to each other to the top edge of the topmost object,</li>
<li><b>Align Middle</b> <div class="icon icon-alignobjectmiddle"></div> - to align objects relative to each other in the middle,</li>
<li><b>Align Bottom</b> <div class="icon icon-alignobjectbottom"></div> - to align objects relative to each other to the bottom edge of the bottommost object.</li>
</ul>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available alignment options.</p>
<p class="note"><b>Note</b>: the alignment options are disabled if you select less than two objects.</p>
<h3>Distribute objects</h3>
<p>To <b>distribute</b> <em>three or more</em> selected objects horizontally or vertically between two outermost selected objects so that there is equal distance between them, click the <span class="icon icon-align_toptoolbar"></span> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary distribution type from the list:</p>
<ul>
<li><b>Distribute Horizontally</b> <div class = "icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects.</li>
<li><b>Distribute Vertically</b> <div class = "icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects.</li>
<li><b>Distribute Horizontally</b> <div class="icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects.</li>
<li><b>Distribute Vertically</b> <div class="icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects.</li>
</ul>
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available distribution options.</p>
<p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
<h3>Group several objects</h3>
<p>To manipulate several objects at once, you can <b>group</b> them. Hold down the <b>Ctrl</b> key while selecting the objects with the mouse, then click the arrow next to the <span class="icon icon-group_toptoolbar"></span> <b>Group</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary option from the list:</p>
<ul>
<li><b>Group</b> <div class = "icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <div class = "icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
<li><b>Group</b> <div class="icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
<li><b>Ungroup</b> <div class="icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
</ul>
<p>Alternatively, you can right-click the selected objects, choose the <b>Arrange</b> option from the contextual menu and then use the <b>Group</b> or <b>Ungroup</b> option.</p>
<p class="note"><b>Note</b>: the <b>Group</b> option is disabled if you select less than two objects. The <b>Ungroup</b> option is available only when a group of the previously combined objects is selected.</p>
@ -95,15 +95,24 @@
<p>To <b>arrange</b> the selected object or several objects (e.g. to change their order when several objects overlap each other), you can use the <span class="icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> and <span class="icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icons on the <b>Layout</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
<p>To move the selected object(s) forward, click the arrow next to the <span class="icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary arrangement type from the list:</p>
<ul>
<li><b>Bring To Foreground</b> <div class = "icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
<li><b>Bring Forward</b> <div class = "icon icon-bringforward"></div> - to move the selected object(s) by one level forward as related to other objects.</li>
<li><b>Bring To Foreground</b> <div class="icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
<li><b>Bring Forward</b> <div class="icon icon-bringforward"></div> - to move the selected object(s) by one level forward as related to other objects.</li>
</ul>
<p>To move the selected object(s) backward, click the arrow next to the <span class="icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary arrangement type from the list:</p>
<ul>
<li><b>Send To Background</b> <div class = "icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
<li><b>Send Backward</b> <div class = "icon icon-sendbackward"></div> - to move the selected object(s) by one level backward as related to other objects.</li>
<li><b>Send To Background</b> <div class="icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
<li><b>Send Backward</b> <div class="icon icon-sendbackward"></div> - to move the selected object(s) by one level backward as related to other objects.</li>
</ul>
<p>Alternatively, you can right-click the selected object(s), choose the <b>Arrange</b> option from the contextual menu and then use one of the available arrangement options.</p>
<h3>Boolean operations on shapes</h3>
<p>To access the logical operations on shapes, select the <b>Merge shapes</b> menu item in the context menu. The Boolean operations include the following:</p>
<ul>
<li><b>Union</b> - the shapes will be united into one group and share one area.</li>
<li><b>Combine</b> - the shapes will be united into one group, but the shared area will be highlighted.</li>
<li><b>Fragment</b> - the shapes will be united into one group, but the shared area will be outlined.</li>
<li><b>Intersect</b> - creates a new shape from the areas where the selected shapes overlap.</li>
<li><b>Subtract</b> - removes the area of a shape from the one underneath it.</li>
</ul>
</div>
</body>
</html>

View File

@ -326,6 +326,23 @@
<li>Select the entire pivot table using the <div class = "icon icon-pivotselecticon"></div> <b>Select</b> button on the top toolbar.</li>
<li>Press the <b>Delete</b> key.</li>
</ol>
<h3>Calculated items</h3>
<p><b>Calculated items</b> are used for basic calculations between different items within a single field.</p>
<p>To add a calculated item:</p>
<ol>
<li>Select the required field.</li>
<li>Go to the <b>Pivot Table</b> tab and click the <b>Calculated Items</b> button on the top toolbar.</li>
<li>
Enter the <b>Item Name</b>, which will be displayed as a pivot table field name later.
<p><img alt="Calculated Items window" src="../images/calculateditems_new.png" /></p>
</li>
<li>Edit the <b>Formula</b> field by typing in the required fields from the list below or by clicking the plus button to the right of them, and entering the required mathematical symbols, e.g., "+" or "-".</li>
<li>
Click <b>OK</b>. To further manage created calculated items, use the corresponding buttons at the top of the window: add a <b>new</b> one, <b>duplicated</b>, <b>edit</b>, or <b>delete</b> the currently selected one.
<p><img alt="Calculated Items window for editing" src="../images/calculateditems_edit.png" /></p>
</li>
</ol>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,50 @@
# Sprite Image Build Script Requirements
To run the sprite image build script, Python version 3.6 or higher is required.
# Adding an Image Common to All Languages
1. Open the folder:
- `web-apps/apps/common/main/resources/help/images/src` if the image is used in at least two editors,
- or `web-apps/apps/{editor}/main/resources/help/images/src` if the image is used in only one editor:
* Place images for button or icon in the `icons` folder. The image name will correspond to the CSS selector name.
* Place larger images in the `big` folder.
* Place symbols in the `symbols` folder.
2. Launch the terminal (command line).
3. Navigate to the `web-apps/translation/help` folder using the command: `cd path_to_folder`
- **NOTE!** [For Windows] If the folder is not on the C drive, switch to another drive using the command `cd Drive_Letter:` and then press `Enter` (e.g., `cd F:`).
4. Run the script with the command: `python helpsprite.py`
- If the command returns an error `ModuleNotFoundError: No module named 'PIL'`, execute the following in the terminal:
- For Windows: `python -m pip install Pillow`
- For other OS: `python pip install Pillow`
- If the error `ImportError: cannot import name '_imaging' from 'PIL'...` occurs, execute:
- For Windows:
```bash
python -m pip uninstall Pillow
python -m pip install Pillow
```
- For other OS:
```bash
python pip uninstall Pillow
python pip install Pillow
```
5. Example of Using an Image from the Sprite
To add an image to the page text, insert:
- For images from the `icons` folder:
```html
<div class="icon icon-file_name_without_extension"></div>
```
- For images from the `big` folder:
```html
<div class="big big-file_name_without_extension"></div>
```
- For images from the `symbols` folder:
```html
<div class="smb smb-file_name_without_extension"></div>
```

View File

@ -1,37 +0,0 @@
Для работы скрипта сборки спрайта картинок нужен python версии 3.6+
Для добавления картинки общей для всех языков
1. Откройте папку web-apps/apps/common/main/resources/help/images/src, если картинка используется как минимум в двух редакторах
или web-apps/apps/{редактор}/main/resources/help/images/src, если картинка используется только в одном редакторе:
a) изображение кнопки или иконки положите в папку"icons". название картинки будет соответствовать названию селектора для css;
b) более крупное изображение положите в папку "big";
c) символ в папку "symbols".
2. Запустите терминал(командную строку)
3. Передите в папку web-apps/translation/help c помощью команды: cd путь_к_папке
(ВНИМАНИЕ! [для windows] ecли папка лежит не на дике С, перейти на другой диск можно комадой "cd Буква_диска:" после нажать "enter" ([Пример:] cd F:))
4. Запустить скрипт командой: python helpsprite.py
если команда выдаст ошибку "ModuleNotFoundError: No module named 'PIL'", нужно выполнить в терминале
для windows: python -m pip install Pillow
для остальных os: python pip install Pillow
если при выполнении появилась ошибка "ImportError: cannot import name '_imaging' from 'PIL'....", нужно выполнить
для windows:
python -m pip uninstall Pillow
python -m pip install Pillow
для остальных os:
python pip uninstall Pillow
python pip install Pillow
5. Пример использования картинки из спрайта
Чтобы добавить картинку в текст страницы нужно вставить:
a) Для изображений из папки icons:
<div class="icon icon-имя_файла_без_расширения"></div>
b) Для изображений из папки big:
<div class="big big-имя_файла_без_расширения"></div>
c) Для изображений из папки big:
<div class="smb smb-имя_файла_без_расширения"></div>

View File

@ -1,37 +0,0 @@
Для работы скрипта сборки спрайта картинок нужен python версии 3.6+
Для добавления картинки общей для всех языков
1. Откройте папку web-apps/apps/common/main/resources/help/images/src, если картинка используется как минимум в двух редакторах
или web-apps/apps/{редактор}/main/resources/help/images/src, если картинка используется только в одном редакторе:
a) изображение кнопки или иконки положите в папку"icons". название картинки будет соответствовать названию селектора для css;
b) более крупное изображение положите в папку "big";
c) символ в папку "symbols".
2. Запустите терминал(командную строку)
3. Передите в папку web-apps/translation/help c помощью команды: cd путь_к_папке
(ВНИМАНИЕ! [для windows] ecли папка лежит не на дике С, перейти на другой диск можно комадой "cd Буква_диска:" после нажать "enter" ([Пример:] cd F:))
4. Запустить скрипт командой: python helpsprite.py
если команда выдаст ошибку "ModuleNotFoundError: No module named 'PIL'", нужно выполнить в терминале
для windows: python -m pip install Pillow
для остальных os: python pip install Pillow
если при выполнении появилась ошибка "ImportError: cannot import name '_imaging' from 'PIL'....", нужно выполнить
для windows:
python -m pip uninstall Pillow
python -m pip install Pillow
для остальных os:
python pip uninstall Pillow
python pip install Pillow
5. Пример использования картинки из спрайта
Чтобы добавить картинку в текст страницы нужно вставить:
a) Для изображений из папки icons:
<div class="icon icon-имя_файла_без_расширения"></div>
b) Для изображений из папки big:
<div class="big big-имя_файла_без_расширения"></div>
c) Для изображений из папки big:
<div class="smb smb-имя_файла_без_расширения"></div>