Primero, no manipule el DOM de ProseMirror como se muestra en el ejemplo de JQuery. De hecho, lo más probable es que te encuentres con DOM o problemas de contenido. ProseMirror usa su propio nodo DOM y esquema de marcado. Si desea manipular el DOM de ProseMirror o agregar un complemento, eche un vistazo a las Apis de marcado, complemento y nodo. He adjuntado un ejemplo simple de texto alinear código de marcado. Nota al margen, la razón por la que Grammarly y otros no tienen complementos de ProseMirror se debe al enfoque / modelos DOM. Debo agregar que ProseMirror es muy bueno, pero para ser honesto, es más una solución de desarrollador avanzada.
Aparte de eso, la buena noticia son los problemas que tiene un CSS puro. ProseMirror elimina todas las clases y restablece el DOM / CSS, por lo que si importa un documento o corta y pega todas / la mayoría de sus clases desaparecerán.
El enfoque más simple para resolver es envolver el editor en un div y asignar una clase al div y luego agregar estilos y estilos secundarios a esa clase. La razón para envolverlo es que los selectores css como img, p, h, etc. solo se aplicarán a las etiquetas dentro de la clase del editor. Sin eso, terminas con obvios enfrentamientos CSS.
CSS
- No use flexbox para imágenes en línea ya que flexbox no es un sistema de cuadrícula. De hecho, si recuerdo no se pueden alinear hijos directos del contenedor flexible.
- en línea en las etiquetas p e img no ajustará el texto y terminará con los problemas enumerados anteriormente.
- si realmente quiere envolver y eliminar el problema del cursor que tiene, entonces necesita usar flotadores, por ejemplo
float: left;(enfoque recomendado)
- agregue relleno pequeño o grande y recuadro de borde para ayudar a contraer los bordes y también ayuda con la separación de imagen y texto
- el problema con el cursor que está experimentando es porque cuando dentro de la imagen la bloquea alineada verticalmente con la parte superior, lo que puede solucionar
vertical-align: baseline;pero sin flotadores todavía tendrá un cursor que coincida con la altura de la imagen y no con el texto. Además, si no utiliza flotantes, el cursor se alargará ya que la altura de la línea es efectivamente la misma altura que la imagen. El color azul es solo un selector, que también puedes cambiar usando CSS.
<html>
<div class="editor">
<!-- <editor></editor>-->
</div>
</html>
<style>
.editor {
position: relative;
display: block;
padding: 10px;
}
.editor p {
font-weight: 400;
font-size: 1rem;
font-family: Roboto, Arial, serif;
color: #777777;
display: inline;
vertical-align: baseline;
}
.editor img {
width: 50px;
float: left;
padding: 20px;
}
</style>
Ejemplo de extensión de nodo
Ejemplo de extensión de nodo para alinear texto que se puede agregar como barra de herramientas. Publicación mucho más larga, pero incluso si creó un Nodo / complemento para imágenes, tiene que lidiar con la forma en que se procesa, es decir, base64 versus url, etc., por cierto, tiene mucho sentido por qué lo hicieron, pero solo agregue complejidad para desarrolladores que buscan SEO, etc.
export default class Paragraph extends Node {
get name() {
return 'paragraph';
}
get defaultOptions() {
return {
textAlign: ['left', 'center', 'right'],
}
}
inputRules({ type }) {
return [
markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
]
}
get schema() {
return {
attrs: {
textAlign: {
default: 'left'
}
},
content: 'inline*',
group: 'block',
draggable: false,
inclusive: false,
defining : true,
parseDOM: [
{
tag: 'p',
style: 'text-align',
getAttrs: value => value
}
],
toDOM: (node) => [ 'p', {
style: 'text-align:' + node.attrs.textAlign,
class: `type--base type--std text-` + node.attrs.textAlign
}, 0 ]
};
}
commands ({ type }) {
return (attrs) => updateMark(type, attrs)
}
}
<div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div>. Ahora, así es como lo hacen, actualmente no hay especificaciones en torno a eso, por lo que son bastante libres de hacer lo que consideran mejor. ¿Necesita absolutamente estas bibliotecas, o una solución en bruto es suficiente para usted?