Estoy trabajando en una parte de mi aplicación Next.js y me encantaría crear una sección que permita a los usuarios escribir HTML y CSS simples y compilar los resultados, mostrándolos en el navegador. Similar a las páginas del editor en W3 .
No tengo mucho para continuar en términos de lo que he intentado, ya que este es un concepto completamente nuevo para mí, pero por lo poco que he visto en otras herramientas similares, puedes compilar el código en un Blob() y luego configure ese Blob() como el src para un iframe .
¿Cómo crear un compilador HTML en el navegador como este, preferiblemente fácilmente compatible con React/Next.js?
Puede lograrlo usando un iframe y un área de textarea . Se usará textarea como editor e iframe como sandbox para ver el resultado.
const Sandbox = () => { const textareaRef = useRef(null); const [code, setCode] = useState(""); const runCode = () => setCode(textAreaRef.current.value); return ( <div className="App"> <div> <textarea ref={textareaRef}></textarea> <button onClick={runCode}>Run</button> </div> <iframe src={"data:text/html," + encodeURIComponent(code)} title="sandbox" /> </div> ); } aquí creamos una ref para textarea al contenido del área de texto y un botón para ejecutar el fragmento ingresado por el usuario. luego pase ese código a un iframe usando el atributo src y luego mostrará el código ingresado como una página HTMl existente. mire aquí para obtener más información sobre cómo funciona.
ver el ejemplo de trabajo en codesandbox
Puede usar el atributo ref para obtener contenido de un área de texto. Para representar el contenido, puede definir el srcdoc de un iframe con el contenido respectivo.
Ya que está preguntando por un lugar para comenzar, aquí hay un tutorial simple que crea un editor html/css/js con reaccionar: https://www.youtube.com/watch?v=wcVxX7lu2d4
También encontré útil este artículo: https://medium.com/@nishantsaxena269/html-editor-using-react-98e6ab2183a5
Si desea representar la entrada html en reaccionar, puede hacerlo con esto a continuación
const App = () => { const data = 'lorem <b>ipsum</b>'; return ( <div dangerouslySetInnerHTML={{__html: data}} /> ); } export default App;Esto renderizará cualquier html que escribas.