helpcenter/Web/Controls/Help/Guides/Documents/CollaborativeEditing/CollaborativeEditing.ascx

194 lines
19 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ Control Language="C#" Inherits="BaseContentUserControls"%>
<%@ Register Namespace="TeamLab.Controls" Assembly="__Code" TagPrefix="cc" %>
<script runat="server">
protected override void Init()
{
PageTitle = PageCaption = "Co-editing documents online";
MetaKeyWords = "spreadsheet, document, collaborative editing, edit document, real-time commenting";
MetaDescription = "Documents. Сo-edit documents online: comment and communicate in real time";
var guides = new GuidesModel();
guides.CaptionRelatedTips = "Related Tips & Tricks";
guides.Title = "Installing Ascensio System Plug-in";
guides.TitleVideo = "Real-time co-editing in ONLYOFFICE";
guides.RelatedTips = "Would you like to create new documents, edit uploaded text files right on your portal? It's easy!";
guides.LearnMore = "Learn more...";
(Page as BasePage).Guides = guides;
}
</script>
<div class="MainHelpCenter">
<h1 class="subHeaderFeaturesCaption Guides_Video_Captions">Co-editing documents online</h1>
<div class="keyword_block">
<ul>
<li><cc:LocalizeContent runat="Server" ControlName="~/Controls/Help/Tags/onlyoffice-documents/onlyoffice-documents.ascx" /></li>
<li><cc:LocalizeContent runat="Server" ControlName="~/Controls/Help/Tags/create-documents/create-documents.ascx" /></li>
<li><cc:LocalizeContent runat="Server" ControlName="~/Controls/Help/Tags/spreadsheets/spreadsheets.ascx" /></li>
<li><cc:LocalizeContent runat="Server" ControlName="~/Controls/Help/Tags/share-files/share-files.ascx" /></li>
<li><cc:LocalizeContent runat="Server" ControlName="~/Controls/Help/Tags/share-documents/share-documents.ascx" /></li>
<li><cc:LocalizeContent runat="Server" ControlName="~/Controls/Help/Tags/collaborative-editing/collaborative-editing.ascx" /></li>
</ul>
</div>
<div class="video_ground video_trips">
<h2 id="introduction">Introduction</h2>
<div class="video_ground video_trips">
<div class="video_text">
<div class="video_block">
<a onclick="showVideoContainer();" class="co_editing"><span class="playbackbutton"></span></a>
</div>
<p>Whether you make a contract, or write an article, or translate a text you might need to interact with people especially at the final stage to specify details or proofread the document. In this case the action sequence is more or less similar: sending document - waiting for the result - correcting and editing - sending document - waiting for the result - correcting and editing and so on till the result satisfy both parties.</p>
<p>To avoid this continuous procedure and achieve the best result without wasting time on sending and waiting, make use of the <b>Co-editing</b> feature provided by <a href="<%=VirtualPathUtility.ToAbsolute("~/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/index.aspx")%>">Document Editor</a>. All you need to do that is to send the link to your document to the needed person and start co-editing the document commenting and discussing it in real time without installing any program.</p>
<p>This guide will show you how it can be done in a few steps.</p>
</div>
</div>
<h2 id="step1"><span class="style_step">Step 1. </span>Access the Documents</h2>
<div class="block_of_step">
<div class="screen_text">
<p>Enter your portal and click the <b>Documents</b> link.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 1" target="img1_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide24/step1.png")%>" />
<img alt="How to co-edit the document online? Step 1" id="img1_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide24/step1.png")%>" />
<div target="img1_eventcom_guides" class="screenphoto magnifier"></div>
</div>
<div class="screen_text">
<p>In case you have already logged in to the portal and been using it for some time, to access the <b>Documents</b> module, open the drop-down list in the top left corner of the page and select the corresponding option.</p>
</div>
</div>
<h2 id="step2"><span class="style_step">Step 2. </span>Select a document to edit</h2>
<div class="block_of_step">
<div class="screen_text">
<p>The <b>My documents</b> folder opens. To locate a necessary document make use of our filter at the top of the document list.</p>
<p>Click the <img alt="Plus Icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/FilterIcon.png")%>" /> button and specify the necessary filter parameters:</p>
<ul>
<li>To filter items by <b>TYPES</b> choose one of the following options: <b>Folders</b>, <b>Documents</b>, <b>Presentations</b>, <b>Spreadsheets</b>, <b>Images</b>, <b>Media</b>, <b>Archives</b>, or <b>All files</b>.</li>
<li>To filter items by <b>AUTHOR</b> click the <b>User</b> or <b>Group</b> option and choose the necessary user or group.
<div class="notehelp">
The <b>My documents</b> section contains your personal files. Filtering by <b>AUTHOR</b> in the <b>My documents</b> section can be useful if you've previously shared a folder and other users added their files to your shared folder.
</div>
</li>
<li>To include subfolders in search click the <b>All subfolders</b> option in the <b>SEARCH</b> section.</li>
</ul>
<p>Enter a document title, entirely or partially, in the filter field and press the <b>Enter</b> key to display the found item(s).</p>
<p>By default, all the files are sorted by <b>Last modified date</b> in descending order (later dates to early ones). If necessary, you can sort the items by <b>Creation date</b>, <b>Title</b>, <b>Type</b>, <b>Size</b> or <b>Author</b> opening the <b>Sort by</b> drop-down list to the right of the <b>Filter</b> field and choosing the necessary option. To change the sorting order from <b>Descending</b> to <b>Ascending</b> click the <img alt="Sorting Order Icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/SortingOrderIcon.png")%>" /> icon.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 2" target="img2_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide62/step2.png")%>" />
<img alt="How to co-edit the document online? Step 2" id="img2_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide62/step2.png")%>" />
<div target="img2_eventcom_guides" class="screenphoto magnifier"></div>
</div>
<div class="screen_text">
<p>To edit a file stored on your hard disk drive, first upload it to <b>Documents</b> clicking the <b>Upload</b> <img alt="Upload button" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/Upload.png")%>" /> button in the upper left corner of the page and selecting the <b>Upload files</b> option.</p>
<p>You can also create a new document right on the portal clicking the <b>Create</b> button in the upper left corner and selecting the file type you wish to create from the drop-down list.</p>
</div>
</div>
<h2 id="step3"><span class="style_step">Step 3. </span>Configure the sharing settings</h2>
<div class="block_of_step">
<div class="screen_text">
<p>Once the document is located click the <b>Share</b> button to the right.</p>
<p>In the opened <b>Sharing Settings</b> window, click the <b>External link access</b> switcher and give full access to the document choosing the <b>Full Access</b> option from the list next to the <b>External link access</b> caption. Use the <b>Shorten</b> option to get a shortened link.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 3" target="img9_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide64/step3.png")%>" />
<img alt="How to co-edit the document online? Step 3" id="img9_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide64/step3.png")%>" />
<div target="img9_eventcom_guides" class="screenphoto magnifier"></div>
</div>
<div class="screen_text">
<p>Then select a way you wish to share the link to your document:</p>
<ul>
<li><b>Send it via email</b><br />
Click the <img alt="Email icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/emailicon.png")%>" /> icon. If you are already using the <a target="_blank" href="<%=VirtualPathUtility.ToAbsolute("~/userguides/groups-gettingstarted-mail.aspx")%>"><b>Mail</b> module</a>, a message template will open in a new tab.
<p>In the <b>To:</b> field, enter the email address of the person you need to send the link. You can start typing the recipient email address or name and choose the needed one from the list. The contacts stored in your address book that match the entered characters are displayed there as you type (i.e. your personal, CRM and portal contacts as well as email adresses you've already sent emails to).</p>
<p>You can add as many recipients as you wish. Select several addresses from the list one by one or enter multiple new addresses separated by commas. If an email address is entered incorrectly, the address block will be highlighted in red. To edit an address, double click the necessary address block. To delete an address, click the <img alt="Delete Address Icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/deleteaddressicon.png")%>" /> icon.</p>
<p>Edit the covering message, if necessary, and click the <b>Send</b> button.</p>
</li>
</ul>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 3" target="img3_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide64/step3-1.png")%>" />
<img alt="How to co-edit the document online? Step 3" id="img3_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide64/step3-1.png")%>" />
<div target="img3_eventcom_guides" class="screenphoto magnifier"></div>
</div>
<div class="screen_text">
<ul>
<li><b>Share it via social networks</b><br />
Click one of the available social network logos: <b>Facebook</b> or <b>Twitter</b> and access your account.</li>
<li><b>Share it in another way</b><br />
Use the <b>Copy</b> option or copy the whole link with the mouse or using the <b>Ctrl+A</b> and <b>Ctrl+C</b> key combinations and send it via the instant messenger you use or any other available way.</li>
</ul>
</div>
</div>
<h2 id="step4"><span class="style_step">Step 4. </span>Start the co-editing</h2>
<div class="block_of_step">
<div class="screen_text">
<p>To start co-editing the document all that is necessary is to follow the provided link. </p>
<div class="notehelp">
To be able to edit the document, the person with the provided link doesn't need to be a registered user of the current portal or have his/her own. He/she doesn't need to download the document or install any additional word processing program.
</div>
<p>After following the link the invited persons can start editing the document using the <a href="<%=VirtualPathUtility.ToAbsolute("~/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/index.aspx")%>">Online Editor</a> features without any limitations.</p>
<p><b>Document Editor</b> allows to select one of the two available co-editing modes:</p>
<ul>
<li>The <b>Fast</b> mode is used by default and shows the changes made by other people in real time.</li>
<li>The <b>Strict</b> mode allows to hide other user changes until you click the <b>Save</b> icon to save your own changes and accept the changes made by others.</li>
</ul>
<p>Switch to the <b>Collaboration</b> tab, click the <img alt="Co-editing Mode icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/coeditingmode.png")%>" /> <b>Co-editing Mode</b> button at the top toolbar and choose the necessary mode. Alternatively, you can open the <b>File</b> tab, click the <b>Advanced Settings</b> menu item, select the necessary mode in the <b>Co-editing Mode</b> list and click the <b>Apply</b> button.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 4" target="img4_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide64/step4.png")%>" />
<img alt="How to co-edit the document online? Step 4" id="img4_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide64/step4.png")%>" />
<div target="img4_eventcom_guides" class="screenphoto magnifier"></div>
</div>
<div class="screen_text">
<p>If you have selected the <b>Strict</b> mode, the currently edited text passages are marked with dashed lines of different colors. As soon as one of your co-editors saves his/her changes, you will see a note in the left upper corner of the top toolbar stating that they have updates. To save the changes made click the <img alt="Save Updates icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/savewhilecoediting.png")%>" /> icon, to get the updates click the <img alt="Get Updates icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/saveupdate.png")%>" /> icon. The updates will be highlighted.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 4" target="img5_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide64/step4_1.png")%>" />
<img alt="How to co-edit the document online? Step 4" id="img5_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide64/step4_1.png")%>" />
<div target="img5_eventcom_guides" class="screenphoto magnifier"></div>
</div>
</div>
<h2 id="step5"><span class="style_step">Step 5. </span>Comment the text passages</h2>
<div class="block_of_step">
<div class="screen_text">
<p>If you or your co-editor need to comment the changes one of you made or just indicate the text passages to be edited, make use of the <b>Real-time commenting</b> feature.</p>
<p>Select a passage you need to add a comment to with the mouse, right-click it and select the <b>Add comment</b> option from the context menu. The pop-up window will be opened.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 5" target="img6_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide64/step5.png")%>" />
<img alt="How to co-edit the document online? Step 5" id="img6_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide64/step5.png")%>" />
<div target="img6_eventcom_guides" class="screenphoto magnifier"></div>
</div>
<div class="screen_text">
<p>Enter your comment text and click the <b>Add</b> button. The commented passage will be highlighted. To edit or remove the comment, just click within the commented passage and use the <img alt="Edit icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/editcommenticon.png")%>" /> or <img alt="Remove icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/deletecommenticon.png")%>" /> icons respectively. In the <b>Strict</b> co-editing mode, do not forget to save the document using the <img alt="Save Updates icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/savewhilecoediting.png")%>" /> icon to make the comment available for your co-editors.</p>
<p>To reply to the comment added by your co-editor, left-click within the commented passage. Click the <b>Add Reply</b> link at the bottom of the opened pop-up window, type in your message and click the <b>Reply</b> button.</p>
<p>Once the issue is solved, click the <img alt="Resolve icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/resolveicon.png")%>" /> icon in the upper right corner of the pop-up window.</p>
<p>To track the whole history of the comments added to the current document, open the <b>Comments</b> panel clicking the <img alt="Comments icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/commentsicon.png")%>" /> icon at the leftside bar.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 5" target="img7_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide64/step5_1.png")%>" />
<img alt="How to co-edit the document online? Step 5" id="img7_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide64/step5_1.png")%>" />
<div target="img7_eventcom_guides" class="screenphoto magnifier"></div>
</div>
</div>
<h2 id="step6"><span class="style_step">Step 6. </span>Discuss the document</h2>
<div class="block_of_step">
<div class="screen_text">
<p>To communicate with your co-editors while editing the document, open the <b>Chat</b> panel clicking the <img alt="Chat icon" src="<%=VirtualPathUtility.ToAbsolute("~/OfficeWeb/apps/documenteditor/main/resources/help/en/images/chaticon.png")%>" /> icon at the leftside bar. All the users who currently edit the document will be listed at the top of the panel.</p>
<p>To start a discussion, just enter your message into the field below and click the <b>Send</b> button.</p>
</div>
<div class="screen_block">
<img alt="How to co-edit the document online? Step 6" target="img8_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide64/step6.png")%>" />
<img alt="How to co-edit the document online? Step 6" id="img8_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide64/step6.png")%>" />
<div target="img8_eventcom_guides" class="screenphoto magnifier"></div>
</div>
</div>
</div>
</div>