2012-01-06 47 views
10

Tôi nghĩ sẽ thú vị khi cuộn trình soạn thảo văn bản của riêng tôi thành một tài liệu Google Docs, hoàn toàn là sự tò mò của khóa học (không liên quan đến việc phát minh lại bánh xe). Tôi đã tự hỏi cách các ứng dụng như Documents và Zoho Writer có thể có bố cục nâng cao như tách văn bản trên các trang khác nhau hoặc giữ các tiêu đề cùng với nội dung của chúng, bạn biết đấy, các trình chỉnh sửa như TinyMCE hoặc nicedit sẽ không hoạt động. Tôi biết sử dụng designMode và có thể chỉnh sửa được, và tôi đã nghe mọi người sử dụng canvas, nhưng có cách nào tốt hơn không? Các bộ ứng dụng văn phòng như MS hay LibreOffice quản lý như thế nào? Đặc biệt tách nội dung thành các trang rời rạc trong khi chúng đang được chỉnh sửa?Trình soạn thảo/biên tập viên Javascript (hoặc, kiến ​​trúc Google Documents)

Một lưu ý phụ, bất kỳ ai biết về cách Google Documents mới hoạt động? Nó dường như không sử dụng contenteditable (Zoho sử dụng designMode), cũng không canvas. Từ những gì tôi tìm thấy, nó chỉ là một phân cấp rất sâu của <div> s.

+1

Tôi sẽ không ngạc nhiên nếu họ chỉ bắt đầu vào bàn phím/chuột với JavaScript và thay đổi DOM cho phù hợp. Điều đó nói rằng, tôi đoán không có gì để ủng hộ tôi và tôi quá lười biếng để nhìn vào nó. –

+2

Google không bao giờ ngừng làm tôi ngạc nhiên với những cách sáng tạo mà họ có để lồng thẻ để tạo tất cả hoạt ảnh và trình chỉnh sửa của họ. –

+1

Tikkon, tôi đã nghĩ về điều đó. Dường như một sự phiền toái lớn như vậy khi đi qua việc bắt giữ mọi khóa chữ số, cộng với các công cụ sửa đổi. Tôi tự hỏi liệu điều đó có gây ra bất kỳ loại hình phạt hiệu suất nào không. Trên một lưu ý phụ, sau khi thu thập thông tin DOM tôi nghi ngờ rằng dấu mũ trong Tài liệu thực sự là một yếu tố DOM nhấp nháy. Tâm trí bị thổi bay, bất cứ ai? – Art

Trả lời

3

'câu hỏi' của bạn là một chút rộng, nhưng tôi sẽ cố gắng giúp bạn ra ngoài một chút:

Google Docs đang sử dụng một ẩn iframe (không display:none, chỉ là người dùng có thể không thực sự thấy nó) với nội dung có nội dung có thể chỉnh sửa (.docs-texteventtarget-iframe); khi bạn thấy dấu nháy mắt nghĩa là nội dung có thể chỉnh sửa được tập trung và mọi thứ bạn viết ở đó được chèn vào DOM (sau khi khử trùng các ký tự HTML đặc biệt)

Google Documents, như tôi đã nói, đang sử dụng sửa đổi DOM (không phải canvas hoặc svg); ngay cả dấu mũ là một chút div nhấp nháy.

TinyMCE sử dụng một kỹ thuật tương tự nhưng với một lĩnh vực đầu vào (thay vì một cơ thể nội dung có thể chỉnh sửa)

+0

Điểm chụp - Tôi đã làm rõ câu hỏi. Đó là một giải pháp khá thanh lịch - tôi cho rằng các phím bấm được chụp và dựa trên một máy trạng thái hữu hạn, các hành động được thực hiện như áp dụng các định dạng hoặc chèn các ký tự? – Art

+0

Sự kiện này không thực sự bị bắt theo nghĩa kỹ thuật, mọi thứ được viết trên cơ thể (hoặc nhập vào TinyMCE) và ngay sau khi ký tự được sao chép vào "tài liệu" và nội dung/đầu vào bị xóa. Đó là vì việc nắm bắt sự kiện dẫn đến sự mâu thuẫn trong việc giải thích các mã phím (các trình duyệt/thiết lập khác nhau). –

+0

Tại sao một người không thích chỉnh sửa nội dung, nếu các sự kiện không bị bắt theo cách đó? – Art

Các vấn đề liên quan