¿Puedo preguntarle cómo cambiar el tamaño de fuente predeterminado en el borrador de reacción wysiwyg https://github.com/jpuri/react-draft-wysiwyg#readme ? Barra de herramientas de definición de clase:
export const toolbar = { options: ['inline', 'textAlign', 'list', 'link', 'fontSize', 'colorPicker', 'emoji'], inline: { inDropdown: false, className: undefined, component: undefined, dropdownClassName: undefined, options: ['bold', 'italic'], }, list: { inDropdown: false, className: undefined, component: undefined, dropdownClassName: undefined, options: ['unordered'], }, textAlign: { inDropdown: false, className: undefined, component: undefined, dropdownClassName: undefined, options: ['left', 'center', 'right'] }, link: { inDropdown: false, className: undefined, component: undefined, popupClassName: undefined, dropdownClassName: undefined, showOpenOptionOnHover: true, defaultTargetOption: '_self', options: ['link'], linkCallback: undefined }, fontSize: { options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96], className: undefined, component: undefined, dropdownClassName: undefined, }, colorPicker: { className: undefined, component: undefined, popupClassName: undefined, }, emoji: { inDropdown: true, className: undefined, component: undefined, popupClassName: undefined, }, }El tamaño de fuente 14 es el predeterminado ahora. no sé por qué Busqué 14 en todo el código fuente y no lo encontré por ningún lado. Cuando la opción 14 no está presente en la lista, no se selecciona por defecto ningún tamaño de fuente. Quería preseleccionar la opción tamaño de fuente = 24. Gracias por responder.
¡Tenía la misma pregunta y luché con ella incluso un día de trabajo!
Es una pena que no haya una solución oficial en la documentación... Encontré 2 soluciones:
.DraftEditor-root { font-size: 24px; } Esto aplicaría size=24px a todos los elementos react-draft-wysiwyg en la página/
Encontré esto en el código fuente de la biblioteca:
https://github.com/jpuri/react-draft-wysiwyg/blob/f59ee8419cdbd45aab3bdfdf1995f112b09bbb6a/src/controls/FontSize/Component/index.js#L30
react-draft-wysiwyg usa esta biblioteca en sí) import { toggleCustomInlineStyle, getSelectionCustomInlineStyle, } from 'draftjs-utils';En segundo lugar, en cada render (!?) Deberías ejecutar:
const fontSize = getSelectionCustomInlineStyle(editorState, ['FONTSIZE',]).FONTSIZE if (!fontSize) { setEditorState(toggleCustomInlineStyle(editorState, 'fontSize', 24)) } ¿Por qué en cada render y no en la creación de EditorState?
No sé.
Pero este estilo personalizado se restablece a vacío (por lo tanto, al valor predeterminado) cuando se enfoca el editor, por lo que tengo que forzarlo cada vez.
Espero que la primera solución sea suficiente para mí y para usted, ¡porque la segunda parece una solución alternativa y una mala práctica!