Noticias de Uritec

Mailchimp

Tue, 02 Apr 2019 08:40:34 GMT

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

Soporte Online

Wed, 03 Aug 2016 09:58:08 GMT

Soporte Online

Para acceder al Soporte Online, siga los siguientes pasos.

Envíe un Email a info@uritec.es y solicite soporte online.
Haga clic en el botón Soporte Online:
Haga clic en Uritec.exe Dependiendo del navegador que usemos, "uritec.exe" aparece en un sitio (ver dónde).
Windows le pedirá permiso para ejecutar "uritec.exe"; responda “Sí” y en breve ya estará conectado al soporte.

Nota:
Si no consigue conectarte al soporte, es posible que su antivirus le impida la conexión.
En este caso tendrá que desactivar el antivirus unos minutos para poder ejecutar "uritec.exe".
(Pulsando con el botón derecho el icono del antivirus podrá acceder al menú para desactivarlo).

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:

Añadir un plugin en CKEditor

Wed, 20 Jul 2016 10:27:00 GMT

Cómo añadir un plugin en CKEditor

El proceso de añadir un plugin a CKEditor es bastante sencillo si usted conoce cómo está instalado CKEditor en su servidor, vamos a ver un ejemplo con el plugin ImageToolbar.

1. Copie los ficheros

Extraiga el contenido del zip en el directorio de plugins del CKEditor, de manera que quede como lo siguiente:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               imagetoolbar\
                       plugin.js
                       docs\
                       icons\
               ...
        skins\
        themes\

2. Añada el plugin al CKEditor

Utilice una de las siguientes opciones:

2.1. Configuración config.js

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

config.extraPlugins = 'imagetoolbar';

Si usted está usando otros plugins, deberá añadir este a la configuración existente separándolo por una coma:

config.extraPlugins = 'imagesfromserver,imagetoolbar';

2.2. Configuración en linea

Si en vez de modificar el config.js prefiere añadir el plugin durante la creación del editor, lo puede hacer especificando la propiedad extraPlugins del objeto de configuración inicial

CKEDITOR.replace( 'news', {
extraPlugins: 'imagetoolbar'
} );

2.3. Uso de cdn.ckeditor.com

En el caso de que esté utilizando la versión CDN de CKEditor en vez de haberla subido a su servidor, entonces tiene que indicar dónde ha añadido el contenido del plugin para que se pueda inicializar correctamente

// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'imagetoolbar', '/myplugins/imagetoolbar/', 'plugin.js' );

// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'imagetoolbar'
} );

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

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

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.

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:

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.