{"id":6477,"date":"2025-03-26T14:54:53","date_gmt":"2025-03-26T17:54:53","guid":{"rendered":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/?page_id=6477"},"modified":"2025-03-26T14:55:22","modified_gmt":"2025-03-26T17:55:22","slug":"conversor-de-html","status":"publish","type":"page","link":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/conversor-de-html","title":{"rendered":"Conversor de HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6477\" class=\"elementor elementor-6477\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c6290c6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c6290c6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-eadc1ea\" data-id=\"eadc1ea\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-99fdd0f elementor-widget elementor-widget-html\" data-id=\"99fdd0f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\r\n\r\n\r\n\r\n<title>CONVERSOR DE HTML<\/title>\r\n\r\n\r\n\r\n\r\nbody {\r\nfont-family: 'Arial', sans-serif;\r\nmargin: 0;\r\npadding: 0;\r\ncolor: #333;\r\nposition: relative;\r\nbackground-color: #f0f4f8;\r\n}\r\n\r\nbody::before {\r\ncontent: '';\r\nposition: absolute;\r\ntop: 0;\r\nleft: 0;\r\nwidth: 100%;\r\nheight: 100%;\r\nbackground-image: url('https:\/\/www.ufsm.br\/app\/uploads\/sites\/344\/2024\/11\/AN1_8732-2.jpg');\r\nbackground-size: cover;\r\nbackground-position: center;\r\nbackground-repeat: no-repeat;\r\nz-index: -1;\r\nopacity: 0.9; \r\n}\r\n\r\n.container {\r\nmax-width: 1050px;\r\nmargin: 50px auto;\r\nbackground-color: rgba(64, 63, 59, 0.5); \r\npadding: 30px;\r\nborder-radius: 10px;\r\nbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\ntransition: all 0.3s ease;\r\n}\r\n\r\n.container.with-sidebar {\r\nmargin-right: 350px; \/* Espa\u00e7o para a barra lateral *\/\r\n}\r\n\r\n.header {\r\ntext-align: center;\r\nmargin-bottom: 35px; \r\n}\r\n\r\n.logo {\r\nwidth: 300px;\r\nheight: 200px;\r\nobject-fit: contain;\r\nmargin-bottom: 15px;\r\n}\r\n\r\nh1 {\r\ntext-align: center;\r\nfont-size: 40px;\r\nfont-weight: bold;\r\ntext-align: center;\r\ntext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); \r\ncolor: #c99436;\r\n}\r\n\r\nh2 {\r\ntext-align: center;\r\nfont-size: 25px;\r\ntext-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);\r\nfont-family: 'Arial', sans-serif;\r\npadding: 10px;\r\ncolor: #0168A6;\r\n}\r\n\r\nh3 {\r\ntext-align: center;\r\nfont-size: 15px;\r\nfont-weight: bold;\r\ntext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\r\npadding: 15px;\r\ncolor: #FAFAFA;\r\n}\r\n\r\nh4 {\r\ntext-align: center;\r\ncolor: #000;\r\n}\r\n.editor {\r\nwidth: 100%;\r\nheight: 350px;\r\npadding: 10px;\r\nmargin-bottom: 20px;\r\nfont-size: 14px;\r\nborder: 1px solid #ddd;\r\nborder-radius: 12px;\r\nresize: vertical;\r\nbackground-color: #f5f7fa;\r\ntext-align: justify;\r\noutline: none;\r\noverflow: auto;\r\nword-wrap: break-word;\r\n}\r\n\r\n.toolbar-container {\r\ndisplay: flex;\r\nflex-wrap: wrap;\r\nalign-items: center;\r\nmargin-bottom: 20px;\r\ngap: 3px; \r\n}\r\n\r\n.toolbar, .alignment-bar, .indent-bar, .color-bar {\r\ndisplay: flex;\r\ngap: 5px; \r\n}\r\n\r\n.toolbar button, .alignment-bar button, .indent-bar button, .color-bar button, .manual-button {\r\npadding: 10px 15px;\r\nfont-size: 10px;\r\nborder: 1px solid #000;\r\nborder-radius: 4px;\r\ncursor: pointer;\r\nbackground-color: #E9F9FF;\r\ncolor: black;\r\ntransition: background-color 0.3s ease;\r\nheight: 30px; \r\n}\r\n\r\n.toolbar button:hover, .alignment-bar button:hover, .indent-bar button:hover, .color-bar button:hover, .manual-button:hover {\r\nbackground-color: #3498db;\r\n}\r\n\r\n.separator {\r\nmargin: 0 10px;\r\ncolor: #ccc;\r\n}\r\n\r\n.output-container {\r\nmargin-top: 20px;\r\n}\r\n\r\n.code-output {\r\nborder: 1px solid #ddd;\r\npadding: 12px;border-radius: 10px;\r\nbackground-color: #fafafa;\r\nmin-height: 200px;\r\nfont-family: monospace;\r\noverflow-y: auto;\r\nwhite-space: pre-wrap;\r\nheight: 400px; \r\n}\r\n\r\n.button-container {\r\ntext-align: center;\r\nmargin-top: 0px;\r\n}\r\n\r\n.button-container button {\r\npadding: 15px 20px;\r\nfont-size: 16px;\r\nborder: none;\r\nborder-radius: 10px;\r\ncursor: pointer;\r\nbackground-color: #E98C42;\r\ncolor: white;\r\ntransition: background-color 0.3s ease;\r\n}\r\n\r\n.button-container button:hover {\r\nbackground-color: #218838;\r\n}\r\n\r\n.clear-button {\r\nbackground-color: #dc3545;\r\n}\r\n\r\n.clear-button:hover {\r\nbackground-color: #c82333;\r\n}\r\n\r\n.ementa-button {\r\nbackground-color: #EE8630;\r\ncolor: black;\r\nfont-weight: bold;\r\n}\r\n\r\n.ementa-button:hover {\r\nbackground-color: #d77a29;\r\n}\r\n\r\n.separator {\r\nmargin: 0 5px;\r\ncolor: #ccc;\r\n}\r\n\r\n.centered-image {\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nmargin-top: 10px;\r\ntext-align: center;\r\n}\r\n\r\n.centered-image img {\r\nwidth: 1.71cm;\r\nheight: 1.83cm;\r\n}\r\n\r\n.header-text {\r\ntext-align: center;\r\nfont-size: 14px;\r\ncolor: #3938FF;\r\nmargin-top: 10px;\r\n}\r\n\r\n.subheader-text {\r\ntext-align: center;\r\nfont-size: 12px;\r\ncolor: #00B0E0;\r\nmargin-top: 5px;\r\n}\r\n\r\n.normal-text {\r\ncolor: black;\r\n}\r\n\r\n.centered-cursor {\r\ntext-align: center;\r\ncolor: black;\r\n}\r\n\r\n.color-bar {\r\ndisplay: flex;\r\njustify-content: center;\r\ngap: 10px;\r\nmargin-bottom: 10px; \r\n}\r\n\r\n\/* Estilos para o Manual no Sidebar *\/\r\n.sidebar {\r\nposition: fixed;\r\ntop: 0;\r\nright: -350px; \/* Inicialmente escondido *\/\r\nwidth: 330px;\r\nheight: 100%;\r\nbackground-color: rgba(255, 255, 255, 0.95);\r\noverflow-y: auto;\r\nz-index: 1000;\r\npadding: 20px;\r\nbox-shadow: -5px 0 15px rgba(0,0,0,0.1);\r\ntransition: right 0.3s ease;\r\n}\r\n\r\n.sidebar.active {\r\nright: 0;\r\n}\r\n\r\n.sidebar-header {\r\ndisplay: flex;\r\njustify-content: space-between;\r\nalign-items: center;\r\nmargin-bottom: 15px;\r\nborder-bottom: 2px solid #0168A6;\r\npadding-bottom: 10px;\r\n}\r\n\r\n.sidebar-title {\r\ncolor: #0168A6;\r\nfont-size: 20px;\r\nmargin: 0;\r\n}\r\n\r\n.close-sidebar {\r\ncolor: #aaa;\r\nfont-size: 24px;\r\nfont-weight: bold;\r\ncursor: pointer;\r\n}\r\n\r\n.close-sidebar:hover {\r\ncolor: #333;\r\n}\r\n\r\n#manualContent {\r\nline-height: 1.6;\r\n}\r\n\r\n#manualContent h1 {\r\ncolor: #0168A6;\r\ntext-align: left;\r\nfont-size: 20px;\r\nmargin-top: 20px;\r\nmargin-bottom: 15px;\r\ntext-shadow: none;\r\n}\r\n\r\n#manualContent h2 {\r\ncolor: #E98C42;\r\ntext-align: left;\r\nfont-size: 18px;\r\nmargin-top: 15px;\r\ntext-shadow: none;\r\n}\r\n\r\n#manualContent h3 {\r\ncolor: #333;\r\ntext-align: left;\r\nfont-size: 16px;\r\nmargin-top: 10px;\r\ntext-shadow: none;\r\n}\r\n\r\n#manualContent p, #manualContent li {\r\ncolor: #333;\r\nmargin-bottom: 8px;\r\ntext-align: left;\r\nfont-size: 14px;\r\n}\r\n\r\n#manualContent ol, #manualContent ul {\r\npadding-left: 20px;\r\nmargin-top: 5px;\r\nmargin-bottom: 10px;\r\n}\r\n\r\n\/* Bot\u00e3o de manual com destaque *\/\r\n.manual-button {\r\nbackground-color: #0168A6;\r\ncolor: white;\r\nfont-weight: bold;\r\nheight: auto;\r\n}\r\n\r\n.manual-button:hover {\r\nbackground-color: #014e7d;\r\n}\r\n\r\n\/* Destaque para os passos *\/\r\n.step-highlight {\r\nbackground-color: #fffacd;\r\npadding: 5px;\r\nborder-radius: 3px;\r\nborder-left: 3px solid #E98C42;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n<div id=\"mainContainer\" class=\"container\">\r\n<div class=\"header\">\r\n<img decoding=\"async\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/344\/2024\/11\/Logo_Proplan_UFSM_png.png\" alt=\"Logo\" class=\"logo\">\r\n\r\n<h1>HYPERTEXT MARKUP LANGUAGE CONVERSOR<\/h1> \r\n<\/div>\r\n\r\n<h2>FORMATA\u00c7\u00c3O<\/h2> \r\n\r\n<!-- Bot\u00e3o do Manual -->\r\n<div style=\"text-align: right;margin-bottom: 10px\">\r\n    <button class=\"manual-button\"><i class=\"fas fa-book\"><\/i> MANUAL DE INSTRU\u00c7\u00d5ES<\/button>\r\n<\/div>\r\n\r\n<div class=\"toolbar-container\">\r\n<!-- Separador -->\r\n<div class=\"separator\">|<\/div>\r\n\r\n<!-- Bot\u00e3o de Inserir Cabe\u00e7alho -->\r\n<div class=\"toolbar\">\r\n<button>Inserir Cabe\u00e7alho<\/button>\r\n<\/div>\r\n\r\n<!-- Padr\u00e3o Ementa -->\r\n<div class=\"toolbar\">\r\n<button class=\"ementa-button\">Padr\u00e3o Ementa<\/button>\r\n<\/div>\r\n\r\n<!-- Bot\u00e3o de Inserir Rodap\u00e9 -->\r\n<div class=\"toolbar\">\r\n<button>Rodap\u00e9<\/button>\r\n<\/div>\r\n\r\n<!-- Separador -->\r\n<div class=\"separator\">|<\/div>\r\n\r\n<!-- Barra de Alinhamento -->\r\n<div class=\"alignment-bar\">\r\n<button><i class=\"fas fa-align-left\"><\/i><\/button>\r\n<button><i class=\"fas fa-align-center\"><\/i><\/button>\r\n<button><i class=\"fas fa-align-right\"><\/i><\/button>\r\n<button><i class=\"fas fa-align-justify\"><\/i><\/button>\r\n<\/div>\r\n\r\n<!-- Separador -->\r\n<div class=\"separator\">|<\/div>\r\n\r\n<!-- Barra de Ferramentas -->\r\n<div class=\"toolbar\">\r\n<button><i class=\"fas fa-bold\"><\/i><\/button>\r\n<button><i class=\"fas fa-italic\"><\/i><\/button>\r\n<button><i class=\"fas fa-strikethrough\"><\/i><\/button>\r\n<button><i class=\"fas fa-underline\"><\/i><\/button>\r\n<button><i class=\"fas fa-subscript\"><\/i><\/button>\r\n<button><i class=\"fas fa-superscript\"><\/i><\/button>\r\n\r\n<!-- Separador -->\r\n<div class=\"separator\">|<\/div>\r\n\r\n<!-- Barra de Hiperlink -->\r\n<div class=\"toolbar\">\r\n<button><i class=\"fas fa-link\"><\/i><\/button>\r\n<\/div>\r\n<\/div>\r\n\r\n<!-- Separador -->\r\n<div class=\"separator\">|<\/div>\r\n\r\n<!-- Barra de Recuo -->\r\n<div class=\"indent-bar\">\r\n<button><i class=\"fas fa-outdent\"><\/i> +0.5cm<\/button>\r\n<button><i class=\"fas fa-indent\"><\/i> -0.5cm<\/button>\r\n<\/div>\r\n\r\n<!-- Bot\u00f5es de cores -->\r\n<div class=\"color-bar\">\r\n<button><i class=\"fas fa-paint-brush\" style=\"color: black\"><\/i> Preto<\/button> \r\n<button id=\"botaoAzulT\"><i class=\"fas fa-paint-brush\" style=\"color: blue\"><\/i> Azul T<\/button>\r\n<button><i class=\"fas fa-paint-brush\" style=\"color: #800000\"><\/i> Marom B<\/button>\r\n<button><i class=\"fas fa-paint-brush\" style=\"color: red\"><\/i> Vermelho<\/button>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- Editor de Texto (com contenteditable) -->\r\n<div id=\"inputText\" class=\"editor\"><\/div>\r\n\r\n<div class=\"button-container\">\r\n<button> \u2193 Converter \u2193<\/button>\r\n<button class=\"clear-button\">Limpar Tudo<\/button>\r\n<\/div>\r\n\r\n<div class=\"output-container\">\r\n<div class=\"code-output\" id=\"codeOutput\">O c\u00f3digo fonte ser\u00e1 exibido aqui.<\/div>\r\n<\/div>\r\n\r\n<div class=\"button-container\">\r\n<button>Copiar HTML<\/button>\r\n<\/div>\r\n\r\n<h3>\r\n<p> DESENVOLVIMENTO - COORDENADORIA DE PLANEJAMENTO ADMINISTRATIVO<\/p>\r\n<\/h3>\r\n<\/div>\r\n\r\n<!-- Sidebar do Manual -->\r\n<div id=\"manualSidebar\" class=\"sidebar\">\r\n  <div class=\"sidebar-header\">\r\n    <h3 class=\"sidebar-title\">Manual de Instru\u00e7\u00f5es<\/h3>\r\n    <span class=\"close-sidebar\">&times;<\/span>\r\n  <\/div>\r\n  <div id=\"manualContent\">\r\n    <h1>Passo a Passo<\/h1>\r\n    \r\n    <h2>Prepara\u00e7\u00e3o do Documento<\/h2>\r\n    <ol>\r\n      <li class=\"step-highlight\">Clique na \u00e1rea de edi\u00e7\u00e3o (ret\u00e2ngulo branco).<\/li>\r\n      <li class=\"step-highlight\">Clique no bot\u00e3o \"Inserir Cabe\u00e7alho\".<\/li>\r\n    <\/ol>\r\n    \r\n    <h2>Importa\u00e7\u00e3o do Texto<\/h2>\r\n    <ol start=\"3\">\r\n      <li>Abra o arquivo .doc do ato normativo.<\/li>\r\n      <li>Copie todo o conte\u00fado, desde a ementa at\u00e9 a assinatura final.<\/li>\r\n      <li>Cole o texto logo abaixo do cabe\u00e7alho inserido.<\/li>\r\n    <\/ol>\r\n    \r\n    <h2>Formata\u00e7\u00e3o do T\u00edtulo<\/h2>\r\n    <ol start=\"6\">\r\n      <li class=\"step-highlight\">Selecione com o mouse o t\u00edtulo completo do ato normativo.<\/li>\r\n      <li class=\"step-highlight\">Clique no bot\u00e3o de hiperlink (\u00edcone de corrente) e insira o link do PDF do ato.<\/li>\r\n      <li class=\"step-highlight\">Com o t\u00edtulo ainda selecionado, clique no bot\u00e3o \"B\" para aplicar negrito.<\/li>\r\n    <\/ol>\r\n    \r\n    <h2>Formata\u00e7\u00e3o da Ementa<\/h2>\r\n    <ol start=\"9\">\r\n      <li class=\"step-highlight\">Selecione todo o texto da ementa (par\u00e1grafo abaixo do t\u00edtulo).<\/li>\r\n      <li class=\"step-highlight\">Clique no bot\u00e3o \"Padr\u00e3o Ementa\".<\/li>\r\n    <\/ol>\r\n    \r\n    <h2>Inser\u00e7\u00e3o de Hiperlinks<\/h2>\r\n    <ol start=\"11\">\r\n      <li>Identifique todas as cita\u00e7\u00f5es de atos normativos no texto.<\/li>\r\n      <li>Para cada ato normativo citado:\r\n        <ul>\r\n          <li class=\"step-highlight\">Selecione a refer\u00eancia completa.<\/li>\r\n          <li>Localize o link oficial do ato.<\/li>\r\n          <li class=\"step-highlight\">Clique no bot\u00e3o de hiperlink e insira o link.<\/li>\r\n        <\/ul>\r\n      <\/li>\r\n      <li>Para o n\u00famero do processo UFSM:\r\n        <ul>\r\n          <li class=\"step-highlight\">Selecione apenas o c\u00f3digo num\u00e9rico.<\/li>\r\n          <li class=\"step-highlight\">Clique no bot\u00e3o de hiperlink e insira o link.<\/li>\r\n        <\/ul>\r\n      <\/li>\r\n    <\/ol>\r\n    \r\n    <h2>Adi\u00e7\u00e3o do Rodap\u00e9<\/h2>\r\n    <ol start=\"14\">\r\n      <li class=\"step-highlight\">Posicione o cursor ap\u00f3s a assinatura e pressione Enter.<\/li>\r\n      <li class=\"step-highlight\">Clique no bot\u00e3o \"Rodap\u00e9\" e insira o mesmo link usado no t\u00edtulo.<\/li>\r\n    <\/ol>\r\n    \r\n    <h2>Finaliza\u00e7\u00e3o<\/h2>\r\n    <ol start=\"16\">\r\n      <li class=\"step-highlight\">Clique no bot\u00e3o \"Converter\".<\/li>\r\n      <li class=\"step-highlight\">Clique em \"Copiar HTML\".<\/li>\r\n      <li>Salve o c\u00f3digo em um arquivo .txt para refer\u00eancia futura.<\/li>\r\n      <li>Insira o HTML copiado no Elementor como c\u00f3digo HTML.<\/li>\r\n    <\/ol>\r\n    \r\n    <h2>Observa\u00e7\u00f5es Importantes<\/h2>\r\n    <ul>\r\n      <li>Verifique se todos os hiperlinks est\u00e3o funcionando antes de publicar.<\/li>\r\n      <li>Confirme se a formata\u00e7\u00e3o foi mantida ap\u00f3s a convers\u00e3o.<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\nlet indentLevel = 0; \r\n\r\nfunction applyAlignment(alignment) {\r\nconst editor = document.getElementById('inputText');\r\ndocument.execCommand('justify' + alignment);\r\n}\r\n\r\nfunction applyTag(tag) {\r\nconst editor = document.getElementById('inputText');\r\nif (tag === 'link') {\r\nconst url = prompt(\"Digite a URL:\");\r\nif (url &amp;&amp; url.trim() !== \"\") {\r\n    const selection = window.getSelection();\r\n    const range = selection.getRangeAt(0);\r\n    const selectedText = selection.toString();\r\n    \/\/ Usando atributos inline mais fortes para o Elementor\r\n    const linkHTML = `<a href=\"${url}\" style=\"color: blue !important;text-decoration: underline !important\" data-elementor-preserved=\"true\">${selectedText}<\/a>`;\r\n    range.deleteContents();\r\n    range.insertNode(document.createRange().createContextualFragment(linkHTML));\r\n}\r\n} else {\r\ndocument.execCommand(tag);\r\n}\r\n}\r\n\r\nfunction applyIndent(direction) {\r\nconst editor = document.getElementById('inputText');\r\nif (direction === 'left') {\r\ndocument.execCommand('outdent');\r\nindentLevel--; \r\n} else {\r\ndocument.execCommand('indent');\r\nindentLevel++; \r\n}\r\n}\r\n\r\nfunction applyEmenta() {\r\nconst editor = document.getElementById('inputText');\r\nconst selectedText = window.getSelection().toString(); \r\n\r\nif (selectedText.trim() === \"\") { \r\nreturn; \r\n}\r\n\r\nconst range = window.getSelection().getRangeAt(0); \r\nconst ementaHTML = `<span style=\"color:#800000;text-align:justify;margin-left: 9cm\">${selectedText}<\/span>`;\r\nrange.deleteContents();\r\nrange.insertNode(document.createRange().createContextualFragment(ementaHTML));\r\n}\r\n\r\nfunction insertCabecalho() {\r\nconst editor = document.getElementById('inputText');\r\nconst imgTag = '<div align=\"center\"><img decoding=\"async\" src=\"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-content\/uploads\/sites\/344\/2019\/09\/brasao-da-republica-do-brasil-logo.png\" alt=\"Bras\u00e3o Rep\u00fablica Federativa do Brasil\" width=\"6%\" height=\"6%\"><\/div>';\r\nconst texto1 = '<h4><font color=\"blue\"><font size=\"5\"><div align=\"center\">MINIST\u00c9RIO DA EDUCA\u00c7\u00c3O<\/font><\/font><\/div><\/h4>';\r\nconst texto2 = '<p><b><font color=\"0000blue\"><div align=\"center\">UNIVERSIDADE FEDERAL DE SANTA MARIA<\/font><\/b><\/div><\/p>';\r\nconst texto3 = '<br><div class=\"normal-text\" style=\"color: black;text-align: center\"><\/div>';\r\nconst texto4 = '<div class=\"normal-text\" style=\"text-align: center\"><\/div>';\r\n\r\ndocument.execCommand('insertHTML', false, imgTag + texto1 + texto2 + texto3 + texto4);\r\n}\r\n\r\nfunction formatHTML(html) { \r\nlet formatted = '';\r\nlet reg = \/(&gt;)(&lt;)(\\\/*)\/g;\r\nlet xml = html.replace(reg, &#039;$1\\r\\n$2$3&#039;); \r\nxml.split(&#039;\\r\\n&#039;).forEach(function(node) {\r\n    formatted += node + &#039;\\r\\n&#039;;\r\n});\r\n\r\nreturn formatted.trim(); \r\n}\r\n\r\nfunction convertToHTML() {\r\nconst editor = document.getElementById(&#039;inputText&#039;);\r\nconst output = document.getElementById(&#039;codeOutput&#039;);\r\nlet htmlContent = editor.innerHTML;\r\n\r\n\/\/ Formatar o HTML antes de exibir\r\nlet formattedHTML = formatHTML(htmlContent);\r\n\r\n\/\/ Certificar-se de que todos os links tenham as propriedades preservadas do Elementor\r\nformattedHTML = formattedHTML.replace(\/<a>]*)&gt;\/g, '<a href=\"$1\" style=\"color: blue !important;text-decoration: underline !important\">');\r\n\r\noutput.textContent = formattedHTML;\r\n}\r\n\r\nfunction clearText() {\r\nconst editor = document.getElementById('inputText');\r\neditor.innerHTML = '';\r\n}\r\n\r\nfunction copyHTML() {\r\nconst output = document.getElementById('codeOutput');\r\nnavigator.clipboard.writeText(output.textContent).then(() =&gt; {\r\nalert(\"HTML copiado para a \u00e1rea de transfer\u00eancia!\");\r\n});\r\n}\r\n\r\nfunction applyColor(color) {\r\nconst editor = document.getElementById('inputText');\r\ndocument.execCommand('foreColor', false, color);\r\n}\r\n\r\nfunction insertRodape() {\r\nconst editor = document.getElementById('inputText');\r\nconst url = prompt(\"Digite o link do Portal de Documentos:\");\r\nlet rodapeTexto;\r\nif (url &amp;&amp; url.trim() !== \"\") {\r\n    \/\/ Usando atributos mais fortes para o Elementor\r\n    rodapeTexto = `<p><span style=\"color: red\">Este texto n\u00e3o substitui o documento original, publicado no Portal de Documentos.<\/span> Dispon\u00edvel em <a href=\"${url}\" style=\"color: blue !important;text-decoration: underline !important\" data-elementor-preserved=\"true\">${url}<\/a><\/p>`;\r\n} else {\r\n    rodapeTexto = `<p><span style=\"color: red\">Este texto n\u00e3o substitui o documento original, publicado no Portal de Documentos.<\/span> Dispon\u00edvel em: [Link n\u00e3o informado]<\/p>`;\r\n}\r\ndocument.execCommand('insertHTML', false, rodapeTexto);\r\n}\r\n\r\n\/\/ Preservar formata\u00e7\u00e3o ao colar\r\ndocument.getElementById('inputText').addEventListener('paste', function(e) {\r\n    \/\/ Evita o comportamento padr\u00e3o que poderia limpar a formata\u00e7\u00e3o\r\n    e.preventDefault();\r\n    \r\n    \/\/ Obt\u00e9m o texto colado com formata\u00e7\u00e3o\r\n    const text = e.clipboardData.getData('text\/html') || e.clipboardData.getData('text');\r\n    \r\n    \/\/ Insere o conte\u00fado preservando a formata\u00e7\u00e3o\r\n    document.execCommand('insertHTML', false, text);\r\n});\r\n\r\n\/\/ Fun\u00e7\u00e3o para alternar a visibilidade do manual\r\nfunction toggleManual() {\r\n    const sidebar = document.getElementById('manualSidebar');\r\n    const mainContainer = document.getElementById('mainContainer');\r\n    \r\n    sidebar.classList.toggle('active');\r\n    \r\n    \/\/ Ajusta o espa\u00e7o principal quando o sidebar est\u00e1 vis\u00edvel\r\n    if (sidebar.classList.contains('active')) {\r\n        mainContainer.classList.add('with-sidebar');\r\n    } else {\r\n        mainContainer.classList.remove('with-sidebar');\r\n    }\r\n}\r\n\r\n\r\n\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CONVERSOR DE HTML body { font-family: &#8216;Arial&#8217;, sans-serif; margin: 0; padding: 0; color: #333; position: relative; background-color: #f0f4f8; } body::before { content: &#8221;; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(&#8216;https:\/\/www.ufsm.br\/app\/uploads\/sites\/344\/2024\/11\/AN1_8732-2.jpg&#8217;); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; opacity: 0.9; } .container { max-width: 1050px; margin: 50px auto; background-color: rgba(64, [&hellip;]<\/p>\n","protected":false},"author":4883,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-6477","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/pages\/6477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/users\/4883"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/comments?post=6477"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/pages\/6477\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/media?parent=6477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/categories?post=6477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pro-reitorias\/proplan\/wp-json\/wp\/v2\/tags?post=6477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}