首先，不要像 JQuery 示例中所示操作 ProseMirror DOM。事实上，您很可能会遇到 DOM 或内容问题。ProseMirror 使用自己的 DOM 节点和标记模式。如果您想操作 ProseMirror DOM 或添加插件，请查看标记、插件和节点 API。我附上了一个文本对齐标记代码的简单示例。旁注，Grammarly 和其他人没有 ProseMirror 插件的原因是因为 DOM 方法/模型。我应该补充一下 ProseMirror 非常好，但老实说它更像是一个高级开发人员解决方案。
除此之外，好消息是你有一个纯 CSS 的问题。ProseMirror 删除所有类并重置 DOM / CSS，因此如果您导入文档或剪切和粘贴所有/大多数类，您的类将消失。
解决这个问题的最简单方法是将编辑器包装在 div 中并为 div 分配一个类，然后向该类添加样式和子样式。包装它的原因是诸如 img、p、h 等 css 选择器将仅适用于编辑器类内部的标签。否则，您最终会出现明显的 CSS 冲突。
CSS
- 不要将 flexbox 用于内联图像，因为 flexbox 不是网格系统。事实上，如果我记得你不能内联 flex 容器的直接子级。
- p 标签和 img 上的 inline 不会换行文本，您最终会遇到上面列出的问题。
- 如果您想真正包装并删除您拥有的光标问题，那么您需要使用浮点数，例如
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>
节点扩展示例
可以添加为工具栏的文本对齐节点扩展示例。更长的帖子，但即使你确实为图像创建了一个节点/插件，你也必须处理它的呈现方式，即 base64 与 url 等。顺便说一句，这对于他们为什么这样做是很有意义的，但只需添加对寻找 SEO 等的开发人员的复杂性。
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)
}
}
