La idea básica de hacer un editor de bloques.
Consulte principalmente dos editores de bloques:
Editor Gutenberg para wordpress: https://wordpress.org/gutenberg/
editorjs: https://editorjs.io/
1. Arquitectura
Arquitectura MVVM
Capa M: json puro, consulte editorjs para este punto. La capa M de Gutenberg está fuertemente ligada al propio WordPress (anotaciones + códigos cortos) y no vale la pena hacer referencia a ella.
Capa V: el método de Gutenberg es más adecuado.
Capa de VM: Ninguna.
2. bloques
Todos los bloques tienen dos estados: mostrar y editar.
Al ver el contenido creado por el editor de bloques, se muestra el estado del bloque.
Cuando se utiliza el editor de bloques para editar contenido, el estado del bloque es editar.
La visualización de los dos estados se mantiene consistente, logrando "lo que ves es lo que obtienes".
El bloque de estado de edición se basa en el bloque básico.
3. bloque básico
Todos los bloques se basan en este bloque básico.
Las principales interacciones en el estado de edición del bloque están aquí.
4. Página del editor
La página principal del editor representa bloques basados en datos y cambios de datos.
5. renderizador de bloques
Al ver el contenido creado por el editor de bloques, debe analizar los datos json y representar los bloques en función de los datos json.