{"id":1270,"date":"2022-08-26T17:46:56","date_gmt":"2022-08-26T16:46:56","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1270"},"modified":"2022-10-31T14:46:39","modified_gmt":"2022-10-31T13:46:39","slug":"editor-de-texto-interactivo-para-tus-webs-con-rich-text-editor","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/1270\/editor-de-texto-interactivo-para-tus-webs-con-rich-text-editor\/","title":{"rendered":"Editor de texto interactivo para tus web apps con Rich Text Editor"},"content":{"rendered":"\n<p>Uno de mis \u00faltimos proyectos es una app de notas para alojarlas en mi servidor y prescindir de [G] Notes.<\/p>\n\n\n\n<p>La caracter\u00edstica m\u00e1s interesante que incluye es <a rel=\"noreferrer noopener\" href=\"http:\/\/richtexteditor.com\" target=\"_blank\">Rich Text Editor<\/a>, una completa librer\u00eda javascript en forma de interfaz para dar formato HTML al texto de cualquier formulario web.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/rte1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"445\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/rte1.png\" alt=\"\" class=\"wp-image-1281\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/rte1.png 684w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/rte1-300x195.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/08\/rte1-676x440.png 676w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Es de <strong>c\u00f3digo abierto, gratis<\/strong> para uso personal, y muy simple de usar. Todo un win-win que te traigo hoy.<\/p>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Contenido<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\n}\n}\n\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"licencia\">Licencia<\/h2>\n\n\n\n<p>He dicho que <strong>Rich Text Editor<\/strong> es <strong>gratis<\/strong>, y es as\u00ed si le das un uso <strong>no comercial<\/strong>.<\/p>\n\n\n\n<p>Es importante que leas su p\u00e1gina de <a href=\"https:\/\/richtexteditor.com\/pricing.aspx\" target=\"_blank\" rel=\"noreferrer noopener\">precios<\/a> para que entiendas las limitaciones de la licencia gratuita:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>1 desarrollador<\/li><li>1 dominio<\/li><li>5 usuarios activos<\/li><\/ul>\n\n\n\n<p>En mi caso, he instalado <strong>Rich Text Editor<\/strong> en este servidor que aloja el blog, y lo he <strong>restringido<\/strong> <strong>mediante php<\/strong> para que solo se pueda acceder desde el propio dominio.<\/p>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>No hospedes los archivos en cualquier sitio que sea accesible por cualquiera (como un servidor p\u00fablico), ya que podr\u00edas dar pie a un <b>incumplimiento de licencia<\/b>, teniendo que pagar una licencia standard, o dando de baja tu app.<\/i><\/p>\n\n\n\n<p>Aun as\u00ed, las licencias comerciales son de un<strong> \u00fanico pago<\/strong> y puede que te merezca la pena obtener una si vas a darle m\u00e1s uso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"instalacion\">Instalaci\u00f3n<\/h2>\n\n\n\n<p>Usar <strong>Rich Text Editor<\/strong> es muy sencillo, y su p\u00e1gina de <a href=\"https:\/\/richtexteditor.com\/docs\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentaci\u00f3n<\/a> lo explica a la perfecci\u00f3n.<\/p>\n\n\n\n<p>Para instalar <strong>Rich Text Editor<\/strong> solo tenemos que descargar los ficheros de su p\u00e1gina web a una carpeta local o a una ubicaci\u00f3n de tu servidor.<\/p>\n\n\n\n<p><a href=\"https:\/\/richtexteditor.com\/download.aspx\">https:\/\/richtexteditor.com\/download.aspx<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"habilitar-interfaz\">Habilitar interfaz<\/h2>\n\n\n\n<p>Rich Text Editor funciona dentro de un documento HTML.<\/p>\n\n\n\n<p>Para habilitarlo:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Como siempre, creamos un fichero HTML con su <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/html\/\" target=\"_blank\">estructura b\u00e1sica<\/a>.<\/li><li>Enlazamos los scripts y el CSS en el <code>&lt;head&gt;<\/code> :<br><br><code>&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"\/richtexteditor\/rte_theme_default.css\"&nbsp;\/&gt;&nbsp;&nbsp;<br>&lt;script&nbsp;type=\"text\/javascript\"&nbsp;src=\"\/richtexteditor\/rte.js\"&gt;&lt;\/script&gt;&nbsp;&nbsp;<br>&lt;script&nbsp;type=\"text\/javascript\"&nbsp;src='\/richtexteditor\/plugins\/all_plugins.js'&gt;&lt;\/script&gt;&nbsp;&nbsp;<\/code><br><\/li><li>Dentro del <code>&lt;body&gt;<\/code> a\u00f1adimos el siguiente <code>&lt;div&gt;<\/code> :<br><br><code>&lt;div&nbsp;id=\"div_editor1\"&nbsp;&gt;&nbsp;<br>&lt;p&gt;Initial Document Content&lt;\/p&gt;&nbsp;<br>&lt;\/div&gt;<\/code><br><\/li><li>&nbsp;&nbsp;Por \u00faltimo, llamamos al editor en el <code>&lt;script&gt;<\/code> :<br><br><code>var editor1 = new RichTextEditor(\"#div_editor1\", {skin:\"rounded-corner\", toolbar:\"full\"});<\/code><br><\/li><\/ol>\n\n\n\n<p>Todo lo anterior se ver\u00eda as\u00ed (puedes interactuar con \u00e9l):<\/p>\n\n\n\n<body>\n<iframe style=\"border:none;width:100%;height:275px;\" src=\"https:\/\/theroamingworkshop.cloud\/rte\/demo.php\"><\/iframe>\n<\/body>\n\n\n\n<p>Y aqu\u00ed el c\u00f3digo completo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;head&gt;\n\n&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"\/richtexteditor\/rte_theme_default.css\"&nbsp;\/&gt;\n&lt;script&nbsp;type=\"text\/javascript\"&nbsp;src=\"\/richtexteditor\/rte.js\"&gt;&lt;\/script&gt;\n&lt;script&nbsp;type=\"text\/javascript\"&nbsp;src='\/richtexteditor\/plugins\/all_plugins.js'&gt;&lt;\/script\n\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div id=\"div_editor1\" &gt; \n&lt;p&gt;Initial Document Content&lt;\/p&gt; \n&lt;\/div&gt; \n\n&lt;\/body&gt;\n&lt;script&gt;\n\nvar editor1 = new RichTextEditor(\"#div_editor1\", {skin:\"rounded-corner\", toolbar:\"full\"});\n\n&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Copia y pega el c\u00f3digo anterior en un fichero .html, dentro de la carpeta de richtexteditor, y podr\u00e1s ver este ejemplo en tu navegador.<\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"configuracion\">Configuraci\u00f3n<\/h2>\n\n\n\n<p>Como ver\u00e1s, he a\u00f1adido algunas propiedades a la hora de llamar al editor:<\/p>\n\n\n\n<p><code>{skin:\"rounded-corner\", toolbar:\"full\"}<\/code><\/p>\n\n\n\n<p>Hay m\u00faltiples opciones de configuraci\u00f3n que puedes consultar aqu\u00ed:<\/p>\n\n\n\n<p><a href=\"https:\/\/richtexteditor.com\/docs\/configuration-reference.aspx\">https:\/\/richtexteditor.com\/docs\/configuration-reference.aspx<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"funciones\">Funciones del editor<\/h2>\n\n\n\n<p>La librer\u00eda contiene m\u00faltiples funciones en forma de API para interactuar con el editor. Todos los comandos que se pueden usar se encuentran aqu\u00ed:<\/p>\n\n\n\n<p><a href=\"https:\/\/richtexteditor.com\/docs\/cmd_allcommands.aspx\">https:\/\/richtexteditor.com\/docs\/cmd_allcommands.aspx<\/a><\/p>\n\n\n\n<p>Una funcionalidad b\u00e1sica es capturar el texto que hemos ido editando en el cuadro de texto. Es lo que hace el bot\u00f3n de la parte inferior, usando la funci\u00f3n <code>getHTMLcode()<\/code>:<\/p>\n\n\n\n<p><code>&lt;button onclick=\"alert(editor1.getHTMLCode())\"&gt;Show Html Code&lt;\/button&gt;<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"usos\">Usos<\/h2>\n\n\n\n<p>Como coment\u00e9 anteriormente, el uso que le voy a dar a esta librer\u00eda es en un editor de notas que se alojar\u00e1 en mi servidor.<\/p>\n\n\n\n<p>El editor de texto me sirve para dar formato a las notas muy f\u00e1cilmente y guardarlas con todo el formato.<\/p>\n\n\n\n<p>Aqu\u00ed tienes una demo de c\u00f3mo va quedando la interfaz, aunque no tiene las funciones habilitadas todav\u00eda.<\/p>\n\n\n\n<body>\n<iframe style=\"border:none;width:100%;height:350px;\" src=\"https:\/\/theroamingworkshop.cloud\/rte\"><\/iframe>\n<\/body>\n\n\n\n<p>Otras aplicaciones en las que puedes usar este editor es en foros, formularios, o cualquier cuadro de texto que tenga que rellenar un usuario de tu web app.<\/p>\n\n\n\n<p>Espero que te resulte tan \u00fatil como a m\u00ed y que le des buen uso. Si tienes dudas o comentarios puedes enviarlos por Twitter \ud83d\udc26 Hasta pronto!<\/p>\n\n\n\n<p>\ud83d\udc26 <code><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/roamingworkshop\" target=\"_blank\">@RoamingWorkshop<\/a><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uno de mis \u00faltimos proyectos es una app de notas para alojarlas en mi servidor y prescindir de [G] Notes. La caracter\u00edstica m\u00e1s interesante que incluye es Rich Text Editor, una completa librer\u00eda javascript en forma de interfaz para dar formato HTML al texto de cualquier formulario web. Es de c\u00f3digo abierto, gratis para uso [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1280,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[],"class_list":["post-1270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webes","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=1270"}],"version-history":[{"count":13,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1270\/revisions"}],"predecessor-version":[{"id":1588,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1270\/revisions\/1588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1280"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}