aw_wys v2.0.3
AW-WYS
Componente wysiwyg desarrollado en Polymer 3 por Arisman Webs. Este componente te permite crear un editor de texto de forma para añadir a la web. Del mismo modo, va completamente enlazado con los aw-form y es de un uso muy sencillo.
Docs.: AW-WYS - Arisman Webs
Este componente crea un editor de texto <i>wysiwyg</i> para poder introducir texto con formato en la web. Para añadir este campo:<script type="module" src="/node_modules/aw_wys/aw-wys.js"></script><aw-wys></aw-wys>Los parámetros que admite el componeten son:<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">id</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: ID del componente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">name</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Nombre del compoente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">placeholder</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Placeholder del componente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">options</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opciones que queremos disponibles en el editor.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">required</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Si es obligatorio rellenarlo al enviar el formulario.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">novalidate</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Evitar la validación del componente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">validateonchange</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Valida el campo cuando cambia.Añadir opciones al editorEl componente se puede configurar para que muestre las opciones que queramos ordenadas como queramos. Las opciones disponibles son:<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">bold</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de poner en negrita.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">italic</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de poner en cursiba.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">underline</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de subrayar el texto.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">strikeThrough</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de tachar el texto.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">removeFormat</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de remover el formato.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">justifyLeft</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de alinear el texto a la izquierda.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">justifyCenter</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de alinear el texto al centro.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">justifyRight</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de alinear el texto a la derecha.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">justifyFull</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción de justificar el texto.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">addLink</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para añadir un enlace.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">addImage</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para añadir una imagen.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">addVideo</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para añadir un vídeo.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">addLine</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para añadir una línea separadora.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">heads</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para añadir cabeceras.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">cut</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para cortar texto.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">copy</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para copiar texto.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">paste</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para pegar texto.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">undo</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para deshacer.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">redo</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para rehacer.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">insertUnorderedList</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción inertar una lista punteada.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">insertOrderedList</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para insertar un alista numerada.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">formatBlock</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para insertar un bloque de texto.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">fontFamily</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para elegirla fuente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">fontSize</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para elegir el tamaño de la fuente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">fontColor</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para elegir color de la fuente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">backColor</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para elegir el color del fondo de la fuente.<b style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">code</b><span style="color: var(--aw-wys-color,#333333); (--aw-wys-font-family,"arial");">: Opción para ver el código HTML creado.Por defecto el edito se crea con todas las opciones. Para configurarlas tan solo hay que añadir las opciones que queramos separadas por comas (<b>,</b>) y por slash (<b>|</b>) para crear bloques entre las opciones.<aw-wys options="bold,italic,underline|justifyLeft,justifyCenter,justifyRight"></aw-wys>En el ejemplo superior se creará un editor con las opciones de negrita, cursiva, subrayar el texto en un bloque y alinear el texto a la izquierda, centro y derecha en otro bloque.Añadir un value al cargar el editorSi queremos que el editor tenga un texto desde el inicio, tan solo tenemos que introducirlo en el interio de la etiqueta en lugar de hacer con el atributo <b>value</b>:<aw-wys name="textarea"> <h1>Este es el texto por defecto que aparecerá en el editor.</h1></aw-wys>Subir imágnes desde el editor al servidor.Obviamente si queremos añadir imágenes al editor debemos completar cierta configuración para crear una conexión <i>ftp</i>. Para ello tendremos que dirigirnos al siguiente archivo: <i><font color="#3d85c6">/node_modules/aw_wys/scripts/ftp_connect.php</font></i>. En ese archivo tan solo tenemos que añadir el usuario FTP y la contraseña de conexión si esta es necesaria.if ( $_SERVER'REMOTE_ADDR' == "127.0.0.1" ) { $c_ftp = ftp_connect( "127.0.0.1" ); if( $c_ftp ) { $u_ftp= ftp_login( $c_ftp, "web_arisman", "" ); ftp_pasv( $c_ftp, true ); }} else { $c_ftp = ftp_connect( $_SERVER'SERVER_NAME' ); if( $c_ftp ) { $u_ftp= ftp_login( $c_ftp, "usuario_ftp", "pass_ftp" ); ftp_pasv( $c_ftp, true ); }}Tan solo hay que cambiar el usuario_ftp por el usuario y el pass_ftp por la contraseña FTP y ya se podrán subir imágenes del editor.Por defecto las imágnes se subirán a la siguiente ruta: <i><font color="#3d85c6">/img/awwys/galery/</font></i>. Si queremos cambiar la ruta a la que se suban las imágenes tan solo hay que configurar estas líneas:$path = "";while( !file_exists( $path . "node_modules/aw_wys" )) { $path .= "../";}if( !file_exists( $path . "img" )) { mkdir( $path . "img", 0777 );}if( !file_exists( $path . "img/awwys" )) { mkdir( $path . "img/awwys", 0777 );}if( !file_exists( $path . "img/awwys/galery" )) { mkdir( $path . "img/awwys/galery", 0777 );}$path .= "img/awwys/galery/";