Import HTML Files
Hey there! Need to import HTML file into HelpStudio? Here are the step-by-step instructions to help you out:
- Select HTML File:
When importing the HTML, unselect the JavaScript and CSS files to avoid unnecessary elements.
- On the Ribbon Menu, select Import > Html Files.
- Select the HTML file and click Open.
The Html Files Import dialog appears, allowing you to choose the Topic Content, Content Encoding, and Content Cleanup options.
- On the Ribbon Menu, select Import > Html Files.
- Import topic content:
- If you want to import all body content from an HTML file, select the Import all body content from imported html files option.
- If you want to import only main content from an HTML file, select the Import the portion of the html file matched by a Regular Expression option.
For example Copy Code<body><div id="Toc103362120"><div id="page-grid"><header role="banner"><div id="i-header-content"> <div class="logo"> <a href=https://contiem.com/> <img src="../resources/images/logo-white-border.png" alt="logo"> </a> </div> <p id="i-project-title"> [Project Title] </p> <div id="top-bar" class="top-bar"> <nav id="top-menu"> <ul class="prod-menu"> <li class="prod_item"> <a href="#">Link 1</a> </li> <li class="prod_item"> <a href="#">Link 2</a> </li> <li class="prod_item"> <a href="#">Link 3</a> </li> <li class="prod_item"> <a href="#"> Link 4</a> </li> </ul> </nav> </div> </div><div class="i-header-buttons-container"><div class="i-search-container"><div class="i-search-container"><form name="search" action="../search.html"><input id="i-search" name="q" placeholder="Enter search term" type="text"><button type="submit" id="i-search-button"><i class="fa fa-search"></i></button></form><div class="loading" id="loading-div"><i class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true"></i><span class="sr-only">Loading...</span></div></div></div></div></header><nav id="i-breadcrumbs-outer-container"></nav><nav id="i-toc-outer-container" class="toc"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a><nav role="toc"><div id="i-toc-container"><div id="i-toc-content"><div class="i-toc-content-scroll-container"><div id="i-dynamic-toc-container"><h1 class="nav-h1"></h1><div id="Contents" class="w3-container w3-hide w3-show"><ul><li><a href="../index.html">RSuite Standard User Guide</a><button onclick="myFunction('d2109e11')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e11" class="w3-container w3-hide w3-show"><ul class="drop_down_level_1"><li><a href="../overview_ui/overview.html">RSS Overview</a><button onclick="myFunction('d2109e18')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e18" class="w3-container w3-hide"><ul class="drop_down_level_2"><li><a href="../overview_ui/rss_features_and_capabilities.html">RSS Features and Capabilities</a></li></ul></div></li><li><a href="../overview_ui/get_started.html">Sign in and Navigate RSS</a><button onclick="myFunction('d2109e32')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e32" class="w3-container w3-hide"><ul class="drop_down_level_2"><li><a href="../overview_ui/log_in_and_log_out.html">Sign in to RSS</a></li><li><a href="../admin_tools/change_username_password.html">Manage User Account Information</a></li><li><a href="../overview_ui/describe_the_ui_elements.html">UI Elements - Menu, Left Pane, Main Window</a></li><li><a href="../overview_ui/navigational_elements.html">Navigational Elements</a></li><li><a href="../overview_ui/side_menu.html">Side Menu</a></li><li><a href="../overview_ui/common_tasks.html">Common Tasks</a><button onclick="myFunction('d2109e77')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e77" class="w3-container w3-hide"><ul class="drop_down_level_3"><li><a href="../repository/content_actions.html">Content Actions</a></li></ul></div></li></ul></div></li><li><a href="../repository/work_with_repository.html">Work with Repository</a><button onclick="myFunction('d2109e91')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e91" class="w3-container w3-hide w3-show"><ul class="drop_down_level_2"><li><a href="../repository/add_content_-_new.html">Add Content - New</a><button onclick="myFunction('d2109e98')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e98" class="w3-container w3-hide"><ul class="drop_down_level_3"><li><a href="../repository/add_new_folder.html">Create a New Folder</a></li><li><a href="../repository/create_new_html_or_xml_file.html">Create a New HTML or XML File</a></li><li><a href="../repository/create_plain_text_file.html">Create a New Plain Text File</a></li></ul></div></li><li><a href="../repository/add_content_from_computer.html">Add Content – From Computer</a><button onclick="myFunction('d2109e138')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e138" class="w3-container w3-hide"><ul class="drop_down_level_3"><li><a href="../repository/upload_file_from_computer.html">Upload File From Computer</a></li><li><a href="../repository/import_zip_from_computer.html">Import ZIP From Computer</a></li><li><a href="../repository/upload_folder_from_computer.html">Upload Folder From Computer</a></li></ul></div></li><li><a href="../repository/create_template.html">Create From Template</a><button onclick="myFunction('d2109e178')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e178" class="w3-container w3-hide"><ul class="drop_down_level_3"><li><a href="../repository/create_folder_from_template.html">Create Folder from Template</a></li><li><a href="../repository/create_document_from_template.html">Create Document From Template</a></li><li><a href="../repository/create_xml_from_template.html">Create XML From Template</a></li></ul></div></li><li><a href="../search/search_objects.html">Search the Repository</a></li><li><a href="../repository/copy_content_filefolder.html">Copy or Move a File/Folder</a></li><li><a href="../repository/delete_content.html">Delete Content</a></li><li><a href="../repository/restore_content.html">Restore Content</a></li><li><a href="../repository/download_content.html">Download Content</a></li><li><a href="../repository/download_as_zip.html">Download as ZIP</a></li><li class="active"><a href="../publishing/publish_content.html">Publish Content</a></li><li><a href="../repository/add_new_version.html">Add New Version</a></li><li><a href="../repository/create_branch.html">Create Branch</a></li><li><a href="../repository/preview_file.html">Preview File</a></li><li><a href="../repository/changing_views.html">Changing Views</a></li></ul></div></li><li><a href="../create_maps/create_bookmap_parent.html">Create Bookmap</a><button onclick="myFunction('d2109e326')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e326" class="w3-container w3-hide"><ul class="drop_down_level_2"><li><a href="../create_maps/create_book_map.html">Create Bookmap from RSS Repository</a></li></ul></div></li><li><a href="../translation/manage_translation.html">Manage Translation</a></li><li><a href="../workflows/manage_workflows_and_tasks.html">Manage Workflows and Tasks</a><button onclick="myFunction('d2109e352')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e352" class="w3-container w3-hide"><ul class="drop_down_level_2"><li><a href="../workflows/wf_nav_bar.html">Workflow Navigation Bar</a></li><li><a href="../workflows/start_workflow.html">Start Workflow</a></li><li><a href="../workflows/attach_file_to_task.html">Attach File to Task</a></li><li><a href="../workflows/add_comments_to_task.html">Add Comments to Task</a></li><li><a href="../workflows/approve_reject_attach_item_and_reassign_task.html">Approve, Reject and Attach Item to a Task</a></li><li><a href="../workflows/reassign_a_teask.html">Reassign a Task</a></li><li><a href="../workflows/complete_task.html">Complete Task</a></li><li><a href="../workflows/workflow_view.html">View Workflow</a></li><li><a href="../workflows/delete_workflow.html">Delete Workflow</a></li></ul></div></li><li><a href="../admin_tools/admin_tools.html">Admin Tools</a><button onclick="myFunction('d2109e446')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e446" class="w3-container w3-hide"><ul class="drop_down_level_2"><li><a href="../admin_tools/add_new_user.html">Add New User</a></li><li><a href="../admin_tools/edit_user.html">Edit User</a></li><li><a href="../admin_tools/edit_groups.html">Edit Groups for a Single User</a></li><li><a href="../admin_tools/search_user_details.html">Search User Details</a></li></ul></div></li><li><a href="../dashboard/work_with_dashboard.html">Work with Dashboard</a><button onclick="myFunction('d2109e493')" class="w3-button"><i class="fas fa-angle-right"></i></button><div id="d2109e493" class="w3-container w3-hide"><ul class="drop_down_level_2"><li><a href="../dashboard/add_widget.html">Add Widget</a></li></ul></div></li></ul></div></li></ul></div></div></div></div></div></nav></nav><div id="i-body-content-container" class="i-content-width-container"><div class="show-contents"><span onclick="openNav()">☰ Menu</span></div><main id="i-body-content"><main role="main" id="i-body-content"><article role="article" aria-labelledby="ariaid-title1"> <h1 class="title topictitle1" id="ariaid-title1">Publish Content</h1> <div class="body taskbody"><p class="shortdesc">How to publish a file in RSS.</p><section class="section context"> <p class="p">The RSS publication builder enables you to publish an XML file into multiple output formats by specifying the associated style sheet and language. You can apply filters and variables to include or exclude content.</p> <p class="p">When you publish your content, you can choose which values (variants) should be used for the content variables.</p> </section><ol class="ol steps"><li class="li step stepexpand"> <span class="ph cmd">Navigate to the file you want to publish in the <strong class="ph b">Repository</strong> menu and click the <span class="ph uicontrol">Action Menu</span> <img class="image" id="Toc103362120__image_mfb_xkt_25b" src="../images/img(82).png" height="23" width="18"> icon.</span> <div class="itemgroup info"> <p class="p"> <img class="image" id="Toc103362120__image_ihr_jt1_f5b" src="../images/img(81).png" width="605"> </p> </div> </li><li class="li step stepexpand"><span class="ph cmd">Select <span class="ph uicontrol">Publish</span>. </span> <div class="itemgroup stepresult"><p class="p">The DCMS Publication Builder will appear as shown below:</p> <img class="image" id="Toc103362120__image_wyp_bdh_5tb" src="../images/img(83).png" width="491" alt="A picture containing table Description automatically generated"></div></li><li class="li step stepexpand"> <span class="ph cmd">Enter the following details in the <strong class="ph b">Options</strong> section:</span> <div class="itemgroup info"> <ul class="ul" id="Toc103362120__ul_f35_y3w_ztb"> <li class="li">Output format</li> <li class="li">TopLeaf StyleSheet</li> <li class="li">Language</li> <li class="li">Validate XML</li> </ul> </div> </li><li class="li step stepexpand"> <span class="ph cmd">Click <span class="ph uicontrol">Next</span>.</span> <div class="itemgroup stepresult"><p class="p">You will see the Filter section:</p> <img class="image" id="Toc103362120__image_k4x_rdh_5tb" src="../images/img(84).png" width="491" alt="Table Description automatically generated"></div> </li><li class="li step stepexpand"> <span class="ph cmd">Select the files to filter the content.</span> <div class="itemgroup stepxmp">For example, if you are using DITA, you may have created a ditaval file with include and exclude instructions for the publication. If so, this is where you would select the ditaval. </div> </li><li class="li step stepexpand"> <span class="ph cmd">Click <span class="ph uicontrol">Confirm</span> to publish.</span> </li></ol></div> <nav role="navigation" class="related-links"><div class="familylinks"><div class="parentlink"><strong>Parent topic:</strong> <a class="link" href="../repository/work_with_repository.html">Work with Repository</a></div></div></nav></article></main></main></div><div id="i-footer-content" class="i-footer-content"><footer role="contentinfo"><script> function myFunction(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script><script> function openNav() { document.getElementById("i-toc-outer-container").style.width = "350px"; } function closeNav() { document.getElementById("i-toc-outer-container").style.width = "0"; } </script><footer> <a href=https://logo_link_placeholder> <div id="footer-logo"> </div> </a> <div id="footer-icons"> <a href=https://www.linkedin.com/ class="social_icons_linkedin"> <div class="social_icons_linkedin"></div> </a> <a href=https://twitter.com/ class="social_icons_twitter"> <div class="social_icons_twitter"></div> </a> <a href=https://www.instagram.com/ class="social_icons_instagram"> <div class="social_icons_instagram"></div> </a> <a href=https://www.facebook.com/ class="social_icons_facebook"> <div class="social_icons_facebook"></div> </a> </div> <p>©Copyright 2023 [Company name]. All rights reserved.</p> </footer></footer></div></div></div></body>
To import the main content, first locate the main tag that holds it. The main tag might be something like <article>, <main>, <div id="content">, or <section id="main">. Once you find the main content you need to import, strip out all the unwanted elements like navigation panes, headers, and footers.
Let's consider the HTML code example above and you want to import only the main content within the <article> tag, so you need to select the use Import the portion of the html file matched by a Regular Expression option and enter the regular expression as <article[^>]*?>(.*?)</article>.
Example Copy Code<article[^>]*?>(.*?)</article>
- Select Content Encoding.
- Select Content Cleanup:
- If you want to import the original HTML without any modification, select Original (unmodified Html)
- If you want to import as only text, select As Text (strip all Html tags, one paragraph)
- If you want to import as paragraph, select As Paragraph (strip all Html tags, retain paragraphs)
- If you want to strip any styles, select Strip Styles (strip any style attributes, e.g. if Html originates from a Microsoft Office document) and select the applicable checkbox.
The checkboxes below enable only after you select the Strip Styles option.
- Remove SPAN tags.
- Remove Style attributes.
- Remove Class names.
- Select OK.
An import completion message appears once the HTML imports successfully.
By following this tutorial, you have learned how to efficiently import HTML files into HelpStudio. With these steps, you can ensure that your HTML content is clean, organized, and ready for use.