Noticias de Uritec - Más Plugins

Demo

Tue, 09 Aug 2016 21:44:00 GMT

Numeric Input para el CKEditor

Demo

Esta página muestra un ejemplo de un plugin que utiliza el componente Numeric Input en dos campos de un diálogo.

Este es el código utilizado:

CKEDITOR.plugins.add( 'sample', {
    requires: 'dialog,numericinput',
    init: function( editor ) {
        editor.addCommand( 'sample', new CKEDITOR.dialogCommand( 'sampleDialog' ) );
        editor.ui.addButton( 'Sample', {
            label: 'Demo dialog',
            command: 'sample',
            toolbar: 'insert'
        });
    }
});

En la definición del plugin añadimos en la linea de requires el 'numericinput'.

Y este es el diálogo:

CKEDITOR.dialog.add( 'sampleDialog', function( editor ) {
    return {
        title: 'A Dialog',
        minWidth: 400,
        minHeight: 200,
        contents: [
            {
                id: 'main',
                label: 'Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'normal',
                        label: 'Normal input'
                    },
                    {
                        type: 'number',
                        id: 'sample-number',
                        label: 'A numeric input'
                    },
                    {
                        type: 'number',
                        id: 'speed',
                        label: 'Numbers restricted between 0 and 1000, steps in 100',
                        'default': 200,
                        min: 0,
                        max: 1000,
                        step: 100
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;
            // dialog.getValueOf( 'main', 'normal' );
            // dialog.getValueOf( 'main', 'sample-number' );

        }
    };
});

Por último, también modificamos el diálogo de Tablas para cambiar los elementos de filas, columnas, borde, padding y spacing a campos numéricos (también se puede hacer con la anchura y altura, pero entonces los usuarios no podrán especificar las unidades como porcentaje, p.ej: width = 100%)

config.numericinput_modifyfields = {
   'table': {
       'info' : {
           'txtRows': {
               'min': 1
           },
           'txtCols': {
               'min': 1
           },
           'txtBorder': {
               'min': 0,
               'controlStyle': 'width: 4em',
           },
           'txtCellSpace': {
               'min': 0,
               'controlStyle': 'width: 4em',
           },
           'txtCellPad': {
               'min': 0,
               'controlStyle': 'width: 4em',
           }
       }
   }
}

Pueden probar este ejemplo en el siguiente editor:

Utilice el botón de la barra de herramientas para lanzar el diálogo

Licencia

Wed, 03 Aug 2016 09:47:00 GMT

Numeric Input para CKEditor

Licencia de uso

Puedes desgargar este plugin gratis. Este componente es distribuido mediante la licencia MPL.

La licencia MPL permite que el código fuente cubierto para ser mezclado con otros archivos bajo una licencia diferente, incluso propietaria. Sin embargo, los archivos de código bajo la licencia MPL deben permanecer bajo la MPL y estar libremente disponible en forma de código fuente.

Puede descargar el Numeric Input plugin aquí.

Soporte

Fri, 29 Jul 2016 16:10:00 GMT

Numeric Input para CKEditor

Soporte y actualizaciones

El soporte se hará por email. Para la instalación y configuración de Numeric Input, por favor consulte el apartado Instalación.

Si desea tener soporte específico para usted mediante teléfono o asistencia remota deberá contratar un ticket de soporte.

Si tiene alguna pregunta, por favor contacte con nosotros.

Historial de las actualizaciones

Version	Date	Comments
0.1	10-08-2016	Primera versión pública.
0.2	02-09-2016	Añadida la opción de configuración numericinput_modifyfields para modificar diálogos existentes.

FAQ

Fri, 29 Jul 2016 16:10:00 GMT

Numeric Input para CKEditor

Preguntas frecuentes

Ver todas las respuestas

No funciona

Necesitamos que nos explique el problema mejor: ¿Tiene algún mensaje de error?, ¿Funciona mal? ¿Qué navegador y sistema operativo está usando?. Envie un mail a info@uritec.es explicando el problema

¿En qué navegadores funciona?

Este componente simplemente usa un elemento input type="number" estandard, por lo que funcionará en los navegadores actualizados que lo soporten correctamente.

Ha de tener en cuenta que aunque en las tablas de soporte se suele indicar que IE11 y Edge soportan este elemento, la realidad es que el soporte se podría definir como nulo.

Instalación

Fri, 29 Jul 2016 16:09:00 GMT

Numeric Input para el CKEditor

Instalación

Este plugin está pensado para ser usado desde otros plugins.

Primero tiene que asegurarse de que en su plugin se ha especificado que se quiere usar esta funcionalidad:

requires: 'dialog,numericinput'

Luego en la definición del diálogo puede usar el nuevo tipo "number", de forma similar por ejemplo a los campos de tipo "text". Pero con el tipo "number" también puede definir los atributos "min", "max" y "step".

Ejemplo:

{
    id: 'autoplaySpeed',
   type: 'number',
   min: 50,
   step: 50
}

Pueden ver un ejemplo completo de un plugin en nuestra página de demostración.

Si quiere modificar un diálogo existente, entonces tienen que poner un objeto JSON con la configuración de los diálogos y de los campos en los que quiere usar Numeric Input con la entrada numericinput_modifyfields.

Puede descargar el Numeric Input plugin aquí.

Presentación

Fri, 29 Jul 2016 15:57:00 GMT

Numeric Input para el CKEditor

Presentación

Numeric Input es un plugin que permite usar elementos <input type="number"> en los diálogos de CKEditor.

Si está creado un diálogo y desea añadir un campo en el que el usuario solo pueda introducir un número, el CKEditor solo le deja usar un campo de texto y añadir una validación para cuando el usuario pulsa en el botón de Aceptar del diálogo.

Para mejorar la experiencia de usuario y la usabilidad de sus plugins, puede añadir este plugin a su editor.
Con Numeric Input podrá indicar al navegador del usuario que el campo es type="number"; de esta forma el navegador se encargará de:

Evitar que el usuario introduzca valores NO numéricos
Ofrecer unos botones para incrementar o disminuir el valor numérico
Evitar que el usuario introduzca un valor fuera del rango permitido

Con Numeric Input podrá definir el rango numérico permitido así como el valor a sumar o restar cuando el usuario pulse los botones de incrementar o disminuir.

Nota:
Dependiendo de la versión del navegador del cliente, alguna de las características pudieran no estar disponibles.

Este es un ejemplo de cómo se ve en el plugin Slick Carousel:

Configuración

Mon, 23 May 2016 14:22:00 GMT

Dropdown Details para el CKEditor

Configuración

Este plugin no necesita configuración adicional. Solo necesita añadir a su página los estilos CSS que desee para que see muestren tal y como quiera y seguir usando el polyfill hasta que todos los navegadores soporten el elemento details.

Uselo

Limpie la caché y recargue el editor.
A continuación añada un elemento details y rellene sus contenidos

Si tiene alguna pregunta, por favor contacte con nosotros.

Instalación

Mon, 23 May 2016 14:22:00 GMT

Dropdown Details para el CKEditor

Requisitos

CKEditor 4.
Navegador: Funcionará con cualquier navegador soportado por CKEditor 4
Polyfill: no todos los navegadores soportan actualmente el elemento details, por lo que deberá añadir un polyfill a su página para que los visitantes a su página pueda desplegar y cerrar los elementos. Polyfill de ejemplo

Instalación (1/2): Copie los ficheros

Extraiga los contenidos del zip en su directorio de plugins, de forma que quede así:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               details\
                       plugin.js
                       docs\
                       lang\
               ...
        skins\
        themes\

Instalación (2/2): Añada el plugin a CKEditor

A continuación abra su fichero de configuración config.js (o su fichero de configuración personalizada) y añada una linea como la siguiente:

config.extraPlugins='details';

Si ya está usando otros plugins extra, recuerde que no debe añadir otra linea sino incluirlo en la configuración existente:

config.extraPlugins='magicline,details';

Si lo desea, consulte otras opciones para añadir el plugin al CKEditor.

Precio

Mon, 23 May 2016 14:22:00 GMT

Dropdown Details para el CKEditor

Comprar

Hay 3 tipos de licencia disponibles para Dropdown Details:

Licencia para 1 dominio	Licencia OEM	Enterprise license
Precio: 20 euros	Precio: 120 euros	Price: 350 euros
Para su uso sólo en 1 dominio	Para empresas que quieren usar el plugin en varios sitios web creados por ellos	Esta licencia le permite integrar el plugin en 1 producto
Comprar ahora	Comprar ahora	Comprar ahora

Notas:

Los precios no incluyen el IVA

Dropdown Details plugin es © Uritec S.L.
CKEditor is © CKSource

Soporte

Mon, 23 May 2016 14:22:00 GMT

Dropdown Details para el CKEditor

Soporte y actualizaciones

Los usuarios con licencia dispondrán de soporte por email para la resolución de los posibles problemas del componente. El importe del la licencia no incluye su instalación ni el desarrollo o la personalización de sus características.

La compra consiste en un pago único. Después del pago recibirá el componente por correo electrónico y su correo será añadido a una lista privada para comunicarle las futuras actualizaciones de Dropdown Details. Las futuras actualizaciones del componente están incluidas en precio de la licencia.

Si tiene alguna pregunta, por favor contacte con nosotros.

Historial de las actualizaciones

Version	Date	Comments
0.3	15-06-2016	Actualizar contenido existente para que pueda ser editado fácilmente
0.4	16-06-2016	Generar automáticamente las reglas CSS para el widget del editor basándose en las reglas para los elementos reales

FAQ

Mon, 23 May 2016 14:22:00 GMT

Dropdown Details para el CKEditor

Preguntas frecuentes

Ver todas las respuestas

No funciona

¿Puedo usarlo si en mi contenido ya estoy usando el elemento details?

Sí, el plugin se encargará de actualizar el contenido para que pueda ser usado correctamente con CKEditor.

Al cargar el contenido por primera vez se añadirán los elementos divs con las clases necesarias y que además le permitirán añadir estilos más fácilmente para conseguir obtener el resultado que desee en su web

¿Cómo aplico estilos para ver en edición el mismo funcionamiento que en la web final?

El plugin se encarga de importar los estilos que haya definido en su contents.css (o el archivo que haya definido para el CKEditor) de forma que en edición pueda tener los mismos resultados que en su web final.

Demo

Mon, 23 May 2016 14:22:00 GMT

Dropdown Details para el CKEditor

Demostración

Use este editor para editar los elementos existentes o añada los suyos:

Juego de Tronos, Temporada 6

Episodio 5. La Puerta

Arya recibe una tarea, Bran viaja sin supervisión.

Episodio 6. Sangre de mi Sangre

Tommen crea una alianza; Gilly conoce a la familia de Sam

Haga clic debajo e inserte otro Dropdown Details:

Presentación

Mon, 23 May 2016 14:21:00 GMT

Dropdown ckeditor accordion

Este es un componente para CKEditor que permite la creación y edición de elementos HTML5 details. Es un ejemplo del clásico acordeón o ckeditor accordion que tienen algunos maquetadores.
Ejemplos de DropdownDetails:

Este es el asunto y permite formato básico: negrita, itálica y estilos de formato

Este es el contenido y puedo incluir lo que quiera: fotos, fichas, carruseles, etc.

Y aquí otro elemento Details anidado.

Podemos anidar tantos elementos Details como necesitemos.

Este es un ejemplo que contiene un carrusel

Este es un ejemplo que contiene fichas

ImageCrop

Es un plugin para el CKEditor para: 1 Recortar y escalar imágenes; 2 Subir y guardar las imágenes en su servidor.

Puede pre configurar las opciones de recorte que desea usar. Leer más

ImageToolbar

Al hacer clic en la imagen se mostrará una barra de herramientas y podremos:

Mostrar la imagen con forma de elipse
Poner un pie de foto a la image

Y otras muchas opciones. Leer más

Descubre Si ya ha intentado trabajar con un elemento details en CKEditor, ya sabrá que existe un conjunto de problemas que hay que resolver: hacer funcionar el elemento details en navegadores que no se basen en webkit; para los navegadores de webkit el comportamiento por defecto impide editar la leyenda; como no es un elemento que CKEditor maneje por defecto ha de configurar adecuadamente el sistema ACF; tiene que habilitar una forma de editarlo; etc...

Con Dropdown Details se solucionan todos estos problemas, de forma que no tiene que emplear su tiempo peleando con ellos y se puede dedicar a cosas más productivas.

Nota:
Actualmente no todos los navegadores soportan nativamente este elemento ckeditor accordion, por lo que es necesario que añada a su página algún polyfill de forma que los visitantes a su página puedan utilizarlo correctamente. Mientras está editando el contenido en CKEditor, el plugin se encarga de realizar esta tarea.

FAQ

Mon, 09 May 2016 09:22:00 GMT

Slick Carousel para CKEditor

Preguntas frecuentes

Ver todas las respuestas

No funciona

¿Puedo añadir otros tipos de vídeos?

La versión actual permite incluir vídeos de YouTube y Vimeo. Si necesita incluir otros tipos de vídeos, por favor póngase en contacto con nosotros y estudiaremos su solicitud.

Cuando un vídeo vuelve a aparecer en el carrusel, este empieza desde el inicio

La versión actual no permite ver los vídeo a partir de la posición en donde los dejamos.
En próximas versiones integraremos los APIs de Youtube y Vimeo para permitir continuar viendo el vídeo desde la posición en la que fue pausado.

En el modo Autoplay, el carrusel pasa al siguiente elemento antes de que el vídeo se termine

La versión actual no podemos saber si el vídeo se ha terminado y por lo tanto no podemos evitarlo.
En próximas versiones integraremos los APIs de Youtube y Vimeo y podremos esperar a que el vídeo se termine para pasar al siguiente elemento.

Soporte

Mon, 09 May 2016 09:22:00 GMT

Slick Carousel para CKEditor

Soporte y actualizaciones

La compra consiste en un pago único. Después del pago recibirá el componente por correo electrónico y su correo será añadido a una lista privada para comunicarle las futuras actualizaciones. Las futuras actualizaciones del componente están incluidas en precio de la licencia.

Si tiene alguna pregunta, por favor contacte con nosotros.

Historial de las actualizaciones

Version	Date	Comments
0.7.2	06-06-2016	First public version.
0.8	11-02-2019	Permitir pegar la URL de imágenes existentes en vez de usar el selector de imágenes (se usa configurando config.filebrowserSlickcarouselBrowseUrl = 'paste')