Во-первых, не манипулируйте DOM ProseMirror, как показано в примере JQuery. На самом деле вы, скорее всего, столкнетесь с проблемами DOM или контента. ProseMirror использует свой собственный узел DOM и схему разметки. Если вы хотите управлять DOM ProseMirror или добавить плагин, взгляните на разметку, плагин и Node Apis. Я приложил простой пример текста разметки кода разметки. Примечание: причина, по которой Grammarly и другие не имеют подключаемых модулей ProseMirror, заключается в подходе / моделях DOM. Я должен добавить, что ProseMirror очень хорош, но, честно говоря, это скорее продвинутое решение для разработчиков.
Кроме хороших новостей, проблемы у вас чисто CSS. ProseMirror удаляет все классы и сбрасывает DOM / CSS, так что если вы импортируете документ или вырезаете и вставляете все / большинство ваших классов пропадет. div и назначьте класс для div, затем добавьте стили и дочерние стили для этого класса. Причина этого заключается в том, что селекторы css, такие как img, p, h, et c, будут применяться только к тегам внутри класса редактора. Без этого вы получите очевидные конфликты CSS.
CSS
- Не используйте flexbox для встроенных изображений, поскольку flexbox не является сеткой система. На самом деле, если я вспомню, вы не можете встроить прямые дочерние элементы flex-контейнера.
- , встроенный в теги p, и img не будет переносить текст, и вы столкнетесь с проблемами, перечисленными выше.
- если вы хотите по-настоящему обернуть и удалить проблему с курсором, то вам нужно использовать поплавки, например
float: left; (рекомендуемый подход) - добавить небольшие или большие отступы и рамку для рамки, чтобы помочь с сворачивание краев, а также помогает с разделением изображения и текста
- проблема с курсором, которую вы испытываете, заключается в том, что когда вы внутри блока изображения, он вертикально выровнен по верху, который вы можете исправить с помощью
vertical-align: baseline;, но без поплавков вы будете все еще есть курсор, который соответствует высоте изображения, а не текста. Кроме того, если вы не используете поплавки, курсор будет удлинен, так как высота линии фактически равна высоте изображения. Синий цвет - просто селектор, который вы также можете изменить, используя 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>
Пример расширения узла
Пример расширения узла для выравнивания текста, которое можно добавить в качестве панели инструментов. Гораздо дольше публиковать, но даже если вы создали Node / плагин для изображений, вам придется иметь дело с тем, как он рендерит, то есть base64 против url и т. Д. c. что, кстати, вполне понятно, почему они это сделали, но просто добавьте сложности разработчикам, которые ищут SEO, и т. д. c.
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)
}
}