Ckeditor
<TextField id=”standard-basic” label=”Standard” variant=”standard” />Presione Enter para empezar a editarForm propsSe admiten atributos de formulario estándar, por ejemplo, requerido, desactivado, tipo, etc., así como un helperText que se utiliza para dar contexto sobre la entrada de un campo, por ejemplo, cómo se utilizará la entrada.
Luego, depende del usuario utilizar el componente subyacente que se muestra en la siguiente demo. Aún así, puedes usar inputProps (y las propiedades InputProps, InputLabelProps) si quieres evitar algo de boilerplate.
Helper textLa prop helper text afecta a la altura del campo de texto. Si se colocan dos campos de texto uno al lado del otro, uno con texto de ayuda y otro sin él, tendrán alturas diferentes. Por ejemplo:
Editor Wysiwyg en línea
Si usted proporciona un editor de celdas, es posible que desee desactivar algunas de las cuadrículas de navegación por teclado. Por ejemplo, si está proporcionando un editor de texto simple, puede que desee que la cuadrícula no haga nada cuando pulse las flechas derecha e izquierda (por defecto, la cuadrícula se moverá a la celda siguiente / anterior), ya que puede que desee que las flechas derecha e izquierda muevan el cursor dentro de su editor. En otros editores de celdas, puede que desee que la rejilla se comporte de forma normal.
Si implementas colDef.suppressKeyboardEvent(), puedes decirle a la rejilla qué eventos quieres que procese y cuáles no. La ventaja de este método sobre el anterior es que saca la responsabilidad del editor de celdas y la traslada a la definición de la columna. Así que si estás utilizando un editor de celdas reutilizable, o de terceros, y el editor no tiene esta lógica en él, puedes añadir la lógica a través de la configuración.
Después de que la rejilla haya creado una instancia de un editor de celdas para una celda, es posible acceder a esa instancia. Esto es útil si desea llamar a un método que usted proporciona en el editor de celdas que no tiene nada que ver con el funcionamiento de la rejilla. Para acceder a los editores de celdas se utiliza la API getCellEditorInstances(params).
Froala
Por lo tanto, si quisiéramos eliminar la opción para TextColor, necesitaríamos eliminar esta entrada en la definición. Esto se puede hacer reemplazando el archivo ckconfig.jsp con un custom-jsp hook. Si no sabe cómo implementar un gancho jsp personalizado, puede consultar esta página wiki.
De forma similar al procedimiento anterior, puede añadir una nueva barra de herramientas personalizada añadiendo una definición de barra de herramientas al archivo ckconfig.jsp con un custom-jsp hook. Vamos a crear una llamada “slimmed” que no es más que un simple editor con la opción de poner el texto en negrita, cursiva y subrayado. También vamos a añadir la opción de insertar enlaces:
Editor de texto enriquecido
Los editores de texto tienen botones de acción incorporados que permiten a los usuarios abrir un menú desplegable, aumentar, disminuir o anular el valor y realizar otras acciones. Para añadir botones de acción personalizados para diferentes escenarios, utilice la matriz buttons[].
Cada objeto de la matriz buttons[] debe tener el campo name, el identificador del botón. Además, especifique la ubicación del botón en relación con el campo de texto de entrada y las opciones del componente Button utilizado como botón de acción.
La matriz buttons[] también acepta valores de cadena: los nombres de los botones incorporados. Declárelos en el orden que deben tener los botones en el componente. Se pueden utilizar declaraciones de cadenas y de objetos en la misma matriz.