0
202
ViewsCómo agregar color de fondo para todo el texto que viene entre corchetes en reactjs
Estoy usando sunEditor-react para obtener archivos HTML en un editor de texto. Obtuve el valor HTML y lo mostré dentro del editor con éxito.
El propósito de esto es editar el archivo HTML en la interfaz. Pero cuando obtengo la plantilla HTML, hay algunos lugares que debo resaltar y mostrar.
Necesito resaltar el texto entre corchetes {} . ¿Puede alguien explicarme cómo puedo hacer esto usando CSS o una función para resaltar los valores dentro de {} ?
Esta es mi clase actual.
import { useState } from 'react'; import SunEditor from 'suneditor-react'; import { useLocale } from 'hooks/useLocale/useLocale'; import { Button, Heading, Loader, Typography } from 'ui/atoms'; import 'suneditor/dist/css/suneditor.min.css'; import { useStyles } from './Edit.styles'; import { EditProps } from './Edit.types'; import { EditWarning } from './editWarning/EditWarning'; export const EMAIL_EDIT_WARNING_COOKIE_KEY = 'emailEditWarning'; export const Edit = ({ title, defaultTemplate }: EditProps) => { const classes = useStyles(); const { formatMessage } = useLocale(); const [htmlData, setHtmlData] = useState(defaultTemplate?.html); if (!defaultTemplate) { return <Loader className={classes.loader} />; } function reset() { setHtmlData(defaultTemplate?.html); } return ( <> <div className={classes.button}> <Button type="button" onClick={reset}> {formatMessage({ id: 'event.emails.edit.reset' })} </Button> </div> <div className={classes.container}> <Heading variant="h4" bold className={classes.title}> {formatMessage({ id: 'event.emails.edit.title' })} </Heading> <Typography variant="h5" className={classes.subtitle}> {title} </Typography> <EditWarning name={EMAIL_EDIT_WARNING_COOKIE_KEY}> <div>{formatMessage({ id: 'event.emails.edit.warning_message' })}</div> <div>{formatMessage({ id: 'event.emails.edit.warning_note' })}</div> </EditWarning> </div> <SunEditor width="100%" height="100%" autoFocus={true} setContents={htmlData} /> </> ); };Necesito agregar css para resaltar todos los valores dentro de llaves {}.
Esta es la interfaz de usuario actual. 
Aquí debo resaltar {{FULL_NAME}} y {{{event_name}}} . ¿Cómo puedo hacer esto usando CSS o cualquier función en reaccionar?
¿Alguien puede dar una solución para esto? ¿Estoy intentando esto más de una semana para obtener una solución?
2 answers
Answer question0
Sé que con React regular, agregar un estilo en línea como este style={{ color: "blue" }} a cualquier etiqueta sería suficiente. (Tenga en cuenta que los corchetes dobles son necesarios para JSX).
Pero no estoy tan familiarizado con sunEditor. Si le permite usar una hoja de estilo CSS personalizada, puede intentar agregar una identificación o un nombre de clase y cambiar el color con !important para intentar anular el marco Atom ui que está usando.
0
Si está recibiendo los datos HTML como una cadena, puede usar el método de cadena replaceAll para reemplazar las llaves con elementos de intervalo y luego analizar la cadena en DOM. Luego, puede agregar estilo para abarcar elementos en su hoja de estilo como desee.
const [htmlData, setHtmlData] = useState(defaultTemplate?.html); const htmlWithTags = htmlData.replaceAll('{{','<span>').replaceAll('}}','</span>') //Replace curly braces with HTML elements. const domHTML = new DOMParser().parseFromString(htmlWithTags, "text/xml"); //Parse string to actual DOM. A continuación, puede utilizar los datos de la variable domHTML para representar su contenido HTML.
En tu hoja de estilo:
span{ color:red; //Change the color and weight accordingly, or add more customisations as required. font-weight:bold; }