{"id":788,"date":"2023-02-22T23:34:13","date_gmt":"2023-02-22T22:34:13","guid":{"rendered":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/?p=788"},"modified":"2023-11-08T22:38:50","modified_gmt":"2023-11-08T21:38:50","slug":"editor-de-texto-de-exelearning-con-botones-personalizados","status":"publish","type":"post","link":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/2023\/02\/22\/editor-de-texto-de-exelearning-con-botones-personalizados\/","title":{"rendered":"Editor de texto de eXeLearning con botones personalizados"},"content":{"rendered":"<p>Buenas tras <a href=\"https:\/\/t.me\/eXeLearning\/21780\">este mensaje<\/a> de <em>Rubens<\/em> en el<a href=\"https:\/\/t.me\/eXeLearning\"> grupo de Telegram de eXeLearning<\/a> que enlazaba a <a href=\"https:\/\/www.iesarangurenavila.com\/files\/ruben\/public\/atajo\/index.html\">este magnifico material<\/a> explica como a\u00f1adir atajos de teclado al editor TinyMCE de eXeLearning. Tr\u00e1s verlo, me dije, si se pueden a\u00f1adir atajos de teclado, se pueden a\u00f1adir botones al editor de textos y me puse a mirar la documentaci\u00f3n de tinyMCE. Y aqu\u00ed esta el resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-789 aligncenter\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/d3IyWKksTD.png\" alt=\"\" width=\"719\" height=\"155\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/d3IyWKksTD.png 719w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/d3IyWKksTD-300x65.png 300w\" sizes=\"(max-width: 719px) 100vw, 719px\" \/><\/p>\n<ul>\n<li>El primer bot\u00f3n no es una funcionalidad nueva, sino un acceso m\u00e1s directo a la funci\u00f3n <strong>Formato -&gt; Limpiar formato<\/strong><\/li>\n<li>Los siguientes dos botones a\u00f1aden la funcionalidad que el compa\u00f1ero <em>Ruben Jim\u00e9nez Jim\u00e9nez<\/em> a\u00f1adi\u00f3 como atajo de teclado, que consiste en a\u00f1adir esos car\u00e1cteres \u00fatiles para las funciones matem\u00e1ticas en el lugar donde este el cursor.<\/li>\n<li>Los siguientes tres botones a\u00f1aden una funcionalidad que consiste en a\u00f1adir al texto seleccionado las clase CSS que se usan en el estilo Educaand (y DUA) para distinguir si un texto es de tipo Comprensi\u00f3n, Expresi\u00f3n o Implicaci\u00f3n. Estos colores har\u00e1n que el texto se coloree con el color correspondiente a cada uno de esos tipos de texto. Estas clases a\u00f1adidas solo funcionar\u00e1n si se tiene seleccionado el estilo Educaand o DUA<\/li>\n<\/ul>\n<p>Por \u00faltimo en la paleta de colores se ha a\u00f1adido una fila nueva al principio para poder tener colores personalizados, en mi caso los 3 colores de DUA, me dio la idea el mensaje de <a href=\"https:\/\/t.me\/eXeLearning\/21796\">Jes\u00fas Rodrigo L\u00f3pez<\/a> en el grupo de eXeLearning de Telegram<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-791 aligncenter\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/OoHn0dQRyM.png\" alt=\"\" width=\"677\" height=\"212\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/OoHn0dQRyM.png 677w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/OoHn0dQRyM-300x94.png 300w\" sizes=\"(max-width: 677px) 100vw, 677px\" \/><\/p>\n<p>Si solo quieres usar este eXeLearning&nbsp; modificado en Windows, solo tienes que descargar el siguiente <a href=\"https:\/\/drive.google.com\/file\/d\/14QoaQlwgWwu6xHbzncPc6fKkhz0bWy6m\/view?usp=sharing\">eXelearning 2.8 modificado<\/a> con estos cambios.<\/p>\n<p>Si ten\u00e9is una instalaci\u00f3n propia de eXeLearning 2.8 y quer\u00e9is mantenerla pero a\u00f1adir esta personalizaci\u00f3n solo ten\u00e9is que bajaros el archivo <a href=\"https:\/\/drive.google.com\/file\/d\/14RdPmrQHseG1Ei2NitP7KfVQ5BgEzyBE\/view?usp=sharing\">tinymce_4_settings.js<\/a> modificado y sustituirlo en vuestra instalaci\u00f3n, mientras eXeLearning esta cerrado.<\/p>\n<p><a href=\"https:\/\/t.me\/eXeLearning\/22173\">Ricardo Nutz<\/a> nos di\u00f3 las claves de donde est\u00e1 ese archivo en cada sistema:<\/p>\n<p>&#8211; En Linux se encuentra en la siguiente ruta:<\/p>\n<p>\/usr\/share\/exe\/scripts\/<\/p>\n<p>&#8211; En Windows se encuentra en la siguiente ruta:<\/p>\n<p>C:\\Archivos de programa (x86)\\exe\\scripts<\/p>\n<p>&#8211; En macOS se encuentra en la siguiente ruta:<\/p>\n<p>\/Aplicaciones\/exe.app\/Contents\/Resources\/exe\/vscripts Desde Finder, al pulsar Shift+Command+G se abrir\u00e1 una ventana donde podr\u00e1s escribi r la ru<\/p>\n<p>Y si quer\u00e9is hacer vuestras propias modificaciones o simplemente entender como funcionan estos cambios seguid leyendo, que voy a explicar cada uno de estos cambios.<\/p>\n<p>Para modificar el editor de textos de eXeLearning tenemos que localizar el archivo<strong> tinymce_4_settings.js<\/strong> en nuestro sistema y abrirlo con un editor de texto (si resalta la sintaxis de js mejor que mejor).<\/p>\n<p>Nos vamos a la l\u00ednea 242 y ah\u00ed entre la 242 y 243 es donde vamos a meter todo el c\u00f3digo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-792 aligncenter\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/tNHjc5UHoe.png\" alt=\"\" width=\"447\" height=\"66\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/tNHjc5UHoe.png 447w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/tNHjc5UHoe-300x44.png 300w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/p>\n<p>El c\u00f3digo que pod\u00e9is ver en el archivo modificado y que pod\u00e9is descargar m\u00e1s arriba hace lo siguiente:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-793 aligncenter\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/Ij21C22WIS.png\" alt=\"\" width=\"895\" height=\"879\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/Ij21C22WIS.png 895w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/Ij21C22WIS-300x295.png 300w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/Ij21C22WIS-768x754.png 768w\" sizes=\"(max-width: 895px) 100vw, 895px\" \/><\/p>\n<ol>\n<li>Este c\u00f3digo crea dos nuevos comandos que a\u00f1aden el texto matem\u00e1tico, esto nos va a servir para poder llamarlo desde los botones o desde el atajo de teclado.<\/li>\n<li>Este c\u00f3digo crea los botones para a\u00f1adir los botones que a\u00f1aden las 3 clases del estilo Educaand y los dos botones del texto matem\u00e1tico.<\/li>\n<li>El \u00faltimo c\u00f3digo sirve para llamar a los comandos que a\u00f1aden texto matem\u00e1tico desde un atajo de teclado.<\/li>\n<\/ol>\n<p>Todo esto es para definir los botones y sus acciones, pero no ser\u00e1n visibles si nos quedamos ah\u00ed, tenemos que volver a las l\u00edneas 10,11 y 12 y a\u00f1adir los \u00abID\u00bb de cada bot\u00f3n que hemos definido anteriormente y ponerlos en una de las 3 barras de botones, el <em><strong>removeformat<\/strong> <\/em>que no os sonar\u00e1, pues no lo hemos definido, es una funci\u00f3n propia de tiny que limpia el formato y que ya ten\u00edamos disponible a trav\u00e9s de los men\u00fas:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-796 aligncenter\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/zBS5b8ZJZY.png\" alt=\"\" width=\"1333\" height=\"68\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/zBS5b8ZJZY.png 1333w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/zBS5b8ZJZY-300x15.png 300w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/zBS5b8ZJZY-1024x52.png 1024w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/zBS5b8ZJZY-768x39.png 768w\" sizes=\"(max-width: 1333px) 100vw, 1333px\" \/><\/p>\n<p>Ahora vamos a ver como a\u00f1adir m\u00e1s colores a la paleta del editor. Nos vamos a la l\u00ednea&nbsp; 238&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-794 aligncenter\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/JDHdNfPSaD.png\" alt=\"\" width=\"274\" height=\"112\"><\/p>\n<p>y entre la 238 y 239 a\u00f1adimos lo siguiente:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-795 aligncenter\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/otxDnpsZPH.png\" alt=\"\" width=\"331\" height=\"813\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/otxDnpsZPH.png 331w, https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/files\/2023\/02\/otxDnpsZPH-122x300.png 122w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><\/p>\n<p>Esto hace que la paleta ahora tenga 6 filas en vez de las 5 que tiene por defecto y todos los colores que ahora tendr\u00e1. Que son los 3 de educaand y el resto hasta completar la primera fila en blanco y despu\u00e9s la paleta com\u00fan a la que estamos acostumbrados con sus 5 filas. En la primera fila, pod\u00e9is a\u00f1adir colores personalizados muy f\u00e1cilmente, la primera parte de cada l\u00ednea es el color en hexadecimal, y la segunda parte el texto que aparece al dejar el&nbsp; rat\u00f3n sobre el color.<\/p>\n<p>Espero que sea \u00fatil para otros compa\u00f1eros que trabajan con eXeLearning.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buenas tras este mensaje de Rubens en el grupo de Telegram de eXeLearning que enlazaba a este magnifico material explica como a\u00f1adir atajos de teclado al editor TinyMCE de eXeLearning. Tr\u00e1s verlo, me dije,&#46;&#46;&#46;<\/p>\n","protected":false},"author":7756,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1966597],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/posts\/788"}],"collection":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/users\/7756"}],"replies":[{"embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":5,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/posts\/788\/revisions"}],"predecessor-version":[{"id":810,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/posts\/788\/revisions\/810"}],"wp:attachment":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/media?parent=788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/categories?post=788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/melendo\/wp-json\/wp\/v2\/tags?post=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}