Arisman Webs - Diseño Web

Estamos cargando la página
sólo será un monento.

13 Feb 2019

Recursos WebPolymer 3

Webcomponents wysiwyg - Polymer 3

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 editor

El 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 editor

Si 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/";