aw_wys

v2.0.3

Published

3 years ago

Componente wysiwyg para Polymer 3

0High
0Medium
0Low

manu.overa

Arisman Webs

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 wysiwyg 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:id: ID del componente.name: Nombre del compoente.placeholder: Placeholder del componente.options: Opciones que queremos disponibles en el editor.required: Si es obligatorio rellenarlo al enviar el formulario.novalidate: Evitar la validación del componente.validateonchange: 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:bold: Opción de poner en negrita.italic: Opción de poner en cursiba.underline: Opción de subrayar el texto.strikeThrough: Opción de tachar el texto.removeFormat: Opción de remover el formato.justifyLeft: Opción de alinear el texto a la izquierda.justifyCenter: Opción de alinear el texto al centro.justifyRight: Opción de alinear el texto a la derecha.justifyFull: Opción de justificar el texto.addLink: Opción para añadir un enlace.addImage: Opción para añadir una imagen.addVideo: Opción para añadir un vídeo.addLine: Opción para añadir una línea separadora.heads: Opción para añadir cabeceras.cut: Opción para cortar texto.copy: Opción para copiar texto.paste: Opción para pegar texto.undo: Opción para deshacer.redo: Opción para rehacer.insertUnorderedList: Opción inertar una lista punteada.insertOrderedList: Opción para insertar un alista numerada.formatBlock: Opción para insertar un bloque de texto.fontFamily: Opción para elegirla fuente.fontSize: Opción para elegir el tamaño de la fuente.fontColor: Opción para elegir color de la fuente.backColor: Opción para elegir el color del fondo de la fuente.code: 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 (,) y por slash (|) 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 value:<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 ftp. Para ello tendremos que dirigirnos al siguiente archivo: /node_modules/aw_wys/scripts/ftp_connect.php. 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: /img/awwys/galery/. 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/";

Pkg
Stats

Discover Tips

General search

Package details

User packages

Sponsor

About

Twitter

GitHub

Twitter

GitHub

Site

Open Software & Tools

Framework

Server

Data Store

Caching

CSS / Styling

Typeface

Avatars

Data Viz

Date formatting

Infinite scrolling

Markdown rendering

Repository url parsing

User data

Compiling

Types

Odds & Ends

aw_wys

v2.0.3

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

AW-WYS