126 lines
11 KiB
Plaintext
126 lines
11 KiB
Plaintext
<%@ Control Language="C#" Inherits="BaseContentUserControls"%>
|
|
<%@ Register Namespace="TeamLab.Controls" Assembly="__Code" TagPrefix="cc" %>
|
|
|
|
<script runat="server">
|
|
protected override void Init()
|
|
{
|
|
PageTitle = PageCaption = "Embedding a document into a blog";
|
|
MetaKeyWords = "spreadsheet, document, presentation, document embedding, embed document";
|
|
MetaDescription = "Documents. Embed a document into your blog or any other web site.";
|
|
|
|
var guides = new GuidesModel();
|
|
|
|
guides.CaptionRelatedTips = "Related Tips & Tricks";
|
|
guides.Title = "Installing Ascensio System Plug-in";
|
|
guides.TitleVideo = "How to create a new document?";
|
|
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">Embedding a document into a blog</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/presentations/presentations.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/embed-documents/embed-documents.ascx" /></li>
|
|
</ul>
|
|
</div>
|
|
<div class="video_ground video_trips">
|
|
<h2 id="introduction">Introduction</h2>
|
|
<div class="block_of_step">
|
|
<div class="screen_text">
|
|
<p>Wish to complement the information you have posted? Add some documents, spreadsheets or presentations to your blog/website so that everyone can view it right there without downloading or using any additional viewer? So, embed the document using the features provided by your online office.</p>
|
|
<p>This guide will show you how to embed a document in a few mouse clicks.</p>
|
|
</div>
|
|
</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 embed a document into your blog? Step 1" target="img1_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide24/step1.png")%>" />
|
|
<img alt="How to embed a document into your blog? 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 embed</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 embed a document into your blog? Step 2" target="img2_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide62/step2.png")%>" />
|
|
<img alt="How to embed a document into your blog? 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 embed 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 open the embed code parameters clicking the <b>Embedding document</b> link.</p>
|
|
<p>Now you need to adjust the size of the document to embed. Select one of the available presets: <b>600 × 800 px</b> or <b>400 × 600 px</b>, or customize it entering the necessary <b>Width</b> and <b>Height</b> values in pixels or percentages into the corresponding fields. To leave the 100 % document size, use the default <b>Auto</b> option.</p>
|
|
</div>
|
|
<div class="screen_block">
|
|
<img alt="How to embed a document into your blog? Step 3" target="img3_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide62/step3.png")%>" />
|
|
<img alt="How to embed a document into your blog? Step 3" id="img3_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide62/step3.png")%>" />
|
|
<div target="img3_eventcom_guides" class="screenphoto magnifier"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="step4"><span class="style_step">Step 4. </span>Embed your document</h2>
|
|
<div class="block_of_step">
|
|
<div class="screen_text">
|
|
<p>When all the parameters are set, click the <b>Copy</b> link next to the embed code to copy it to the clipboard. You can also use use the <b>Ctrl+A</b> and <b>Ctrl+C</b> key combinations. Then close the window clicking the <b>Close</b> button.</p>
|
|
</div>
|
|
<div class="screen_block">
|
|
<img alt="How to embed a document into your blog? Step 4" target="img4_eventcom_guides" class="screenphoto screen_guides" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/small/guide62/step3.png")%>" />
|
|
<img alt="How to embed a document into your blog? Step 4" id="img4_eventcom_guides" class="bigphoto_screen" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/Guides/big/guide62/step4.png")%>" />
|
|
<div target="img4_eventcom_guides" class="screenphoto magnifier"></div>
|
|
</div>
|
|
<div class="screen_text">
|
|
<p>After that you can insert the copied embed code into any web page you need so that everyone who visits your blog/website can <b>view</b> this document. Your visitors can also click the <img alt="Actions button" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/embedded_doc_actions.png")%>" /> button in the upper left corner to open the available actions list and <b>download</b> <img alt="Download icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/SaveCopy.png")%>" /> the file, <b>share</b> <img alt="Share icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/Share.png")%>" /> or <b>embed</b> <img alt="Embed icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/Embed.png")%>" /> it. </p>
|
|
<iframe src="https://help.onlyoffice.com/products/files/doceditor.aspx?fileid=3772031&doc=bUhHMEZBdkUzODdyVi8zbnUrSW5VYW5sci9LdHhESUFwMjkvTHNaUEdiZz0_IjM3NzIwMzEi0&action=embedded" width="350px" height="400px" frameborder="0" scrolling="no" allowtransparency></iframe>
|
|
<p>For more convenient viewing you can use the <img alt="Full Screen icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/OpenNewTab.png")%>" /> icon from the actions list to open the document in a new tab maximizing it to fill the entire screen or the <img alt="Zoom in Icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/ZoomIn.png")%>" /> and <img alt="Zoom out icon" src="<%=VirtualPathUtility.ToAbsolute("~/images/Help/GettingStarted/ZoomOut.png")%>" /> icons which appear when you point the document to zoom in and zoom out it.</p>
|
|
<div class="notehelp">
|
|
If you move, delete or deny the access to the document on your portal, it becomes unavailable for your visitors as well.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|