Đầu tiên, đừng thao túng DOM ProseMirror như trong ví dụ JQuery. Trong thực tế, rất có thể bạn sẽ gặp vấn đề về DOM hoặc nội dung. ProseMirror sử dụng lược đồ đánh dấu và nút DOM riêng. Nếu bạn muốn thao tác với ProseMirror DOM hoặc thêm plugin thì hãy xem Markup, Plugin & Node Apis. Ive đính kèm một ví dụ đơn giản về căn chỉnh mã Markup. Lưu ý bên lề, lý do Grammarly và những người khác không có plugin ProseMirror là do cách tiếp cận / mô hình DOM. Tôi nên thêm ProseMirror là rất tốt, nhưng thành thật mà nói, nó là một giải pháp phát triển tiên tiến hơn.
Ngoài ra, tin tốt là các vấn đề bạn có CSS hoàn toàn. ProseMirror loại bỏ tất cả các lớp và đặt lại DOM / CSS để nếu bạn nhập tài liệu hoặc cắt và dán tất cả / hầu hết các lớp của bạn sẽ biến mất.
Cách tiếp cận đơn giản nhất để giải quyết đó là bọc trình soạn thảo trong div và gán một lớp cho div sau đó thêm kiểu và kiểu con vào lớp đó. Lý do để gói nó là các bộ chọn css như img, p, h, v.v. sẽ chỉ áp dụng cho các thẻ bên trong lớp trình soạn thảo. Không có điều đó, bạn kết thúc với các xung đột CSS rõ ràng.
CSS
- Không sử dụng flexbox cho hình ảnh nội tuyến vì flexbox không phải là một hệ thống lưới. Trong thực tế, nếu tôi nhớ bạn không thể nội tuyến trực tiếp con của container flex.
- nội tuyến trên thẻ p và img sẽ không bao bọc văn bản và bạn sẽ kết thúc với các vấn đề được liệt kê ở trên.
- nếu bạn muốn thực sự bao bọc và loại bỏ vấn đề con trỏ của bạn thì bạn cần sử dụng float, ví dụ
float: left;(phương pháp được khuyến nghị)
- thêm phần đệm nhỏ hoặc lớn và đóng hộp viền để giúp thu gọn các cạnh và cũng giúp phân tách hình ảnh và văn bản
- vấn đề con trỏ bạn gặp phải là vì khi bạn ở trong khối hình ảnh, nó được căn chỉnh theo chiều dọc lên trên cùng, mà bạn có thể khắc phục bằng
vertical-align: baseline; nhưng không có hình nổi, bạn vẫn sẽ có một con trỏ khớp với chiều cao của hình ảnh chứ không phải văn bản. Ngoài ra, nếu bạn không sử dụng float, con trỏ sẽ được kéo dài vì chiều cao của đường có hiệu quả tương đương với chiều cao của hình ảnh. Màu xanh chỉ là bộ chọn, bạn cũng thay đổi bằng 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>
Ví dụ mở rộng nút
Ví dụ về phần mở rộng Node cho căn chỉnh văn bản có thể được thêm dưới dạng thanh công cụ. Bài đăng dài hơn nhiều, nhưng ngay cả khi bạn đã tạo Node / plugin cho hình ảnh, bạn phải xử lý theo cách mà nó hiển thị, ví dụ như base64 so với url, v.v. btw, có ý nghĩa hoàn hảo về lý do tại sao họ làm vậy, nhưng chỉ cần thêm sự phức tạp đối với các nhà phát triển đang tìm kiếm SEO, v.v.
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>. Bây giờ, đó là cách họ làm điều đó, hiện tại không có thông số kỹ thuật nào xung quanh đó, vì vậy họ khá tự do để làm những gì họ nghĩ là tốt nhất. Bạn có thực sự cần những thư viện này, hoặc một giải pháp thô là đủ cho bạn?