Trong bài đăng này, chúng tôi sẽ triển khai trình soạn thảo bảng ActionText cơ bản cho ứng dụng Rails của bạn. Chúng ta sẽ tìm hiểu cách:
- ActionText và Trix xử lý tệp đính kèm
- Để triển khai
Attachablecủa riêng chúng tôi gõ và tận dụng điều này để xây dựng trình soạn thảo bảng cơ bản - Khung Turbo có thể được sử dụng để chỉnh sửa bảng
- Turbo vừa hỗ trợ vừa cản trở
Bài viết này lấy cảm hứng từ bài đăng trên blog 'Thêm bảng vào ActionText với Stimulus.js' xuất sắc từ năm 2020. Tuy nhiên, bài viết này được viết trước khi Turbo ra đời, điều mà chúng ta có thể mong đợi sẽ đơn giản hóa vấn đề khá nhiều.
Hãy bắt đầu nào!
Tệp đính kèm ActionText trong Rails 101
Lưu ý :Phần trình diễn này đòi hỏi một số hiểu biết về Trix và Turbo Frames. Bạn có thể thấy bài đăng 'Bắt đầu với Hotwire trong ứng dụng Ruby on Rails' của chúng tôi hữu ích trong việc tìm hiểu kiến thức cơ bản về Hotwire và Turbo Frames.
Bạn có thể làm theo phần trình diễn mã bằng kho lưu trữ GitHub này.
Như được mô tả trong tài liệu ActionText:
Action Text mang nội dung văn bản phong phú và khả năng chỉnh sửa vào Rails. Nó bao gồm trình chỉnh sửa Trix xử lý mọi thứ từ định dạng, liên kết đến trích dẫn, danh sách cho đến hình ảnh và thư viện được nhúng.
Ở mức độ cao, các tệp đính kèm là một phần của mô hình tài liệu của ActionText. Họ hiển thị các mẫu tùy chỉnh cho mọi tài nguyên có thể phân giải được bằng ID toàn cầu đã ký (SGID). Nói cách khác, ActionText lưu trữ một tham chiếu đến một SGID nhất định dưới dạng <action-text-attachment> phần tử:
Bất cứ khi nào ActionText gặp một phần tử như vậy, nó sẽ gọi to_attachable_partial_path phương pháp trên tài nguyên tương ứng. Theo mặc định, phương thức này ủy quyền cho to_partial_path .
Vì vậy, dưới dạng bản xem trước, đây là cách Table của chúng tôi Sự thể hiện của trong ActionText sẽ hiển thị khi được hiển thị trở lại HTML:
Để tuân thủ API đính kèm ActionText, một lớp chỉ phải thực hiện hai việc:
- Triển khai
to_sgidbằng cách bao gồmGlobalID::Identification. Theo mặc định, tất cảActiveRecord::Basecon cháu đã làm điều này rồi. - Bao gồm
ActionText::Attachablemô-đun.
ActionText::Attachable mô-đun cung cấp các cách chính tắc để chuyển đổi bất kỳ mô hình nào sang và từ SGID thông qua attachable_sgid và from_attachable_sgid phương pháp. Chúng tôi sẽ sử dụng điều này sau.
Nó cũng cung cấp các trình truy cập thuận tiện cho siêu dữ liệu đính kèm, chẳng hạn như kích thước và tên tệp cũng như loại nội dung.
Cuối cùng, nó cung cấp các vị trí mặc định cho các phần được sử dụng để hiển thị tệp đính kèm trong trình chỉnh sửa và chế độ xem văn bản đa dạng thức.
Thêm mô hình bảng
Chúng tôi sẽ tận dụng API đính kèm của ActionText để triển khai giải pháp bảng của mình. Để làm được điều này, chúng ta phải tạo một mô hình tùy chỉnh thu thập dữ liệu của các bảng và bao gồm Attachable . Chúng ta sẽ sử dụng cột JSON(B) đơn giản để chứa mảng hai chiều cho dữ liệu bảng.
Để bắt đầu khám phá, hãy tạo một ứng dụng Rails mới có bật ActionText:
Vì hôm nay tôi không cảm thấy sáng tạo nên hãy bắt đầu Article mô hình có tiêu đề và nội dung văn bản đa dạng thức:
Hãy cẩn thận, đây là một điều đáng ngạc nhiên! Lệnh cài đặt ở trên đã tạo ra một CreateActionTextTables di chuyển, vì vậy chúng tôi cần đổi tên nó thành CreateActionTextTablesTable . Ngoài ra, chúng tôi sẽ đặt mặc định thành bảng 2x2 bằng cách sử dụng null: false, default: [["", ""], ["", ""]] .
Thêm bảng vào mô hình ActionText của Rails
Trước khi tiếp tục thêm bảng vào văn bản có định dạng, chúng ta cần vá thanh công cụ của Trix:
Ở đây, chúng tôi thêm một nút vào toolbarElement của Trix theo cách thủ công . Nối dây này tới trix-table Bộ điều khiển kích thích (mà chúng tôi chưa xây dựng) sẽ chèn một bảng vào tài liệu. Hãy cung cấp cho nút này một SVG đẹp mắt làm nội dung trong CSS và thiết lập một số kiểu bảng trong khi chúng ta thực hiện nó:
Như bạn có thể thấy, chúng tôi đã thêm thành công nó vào nhóm "file-tools":
Bây giờ chúng ta hãy quay lại việc thêm và thao tác với các bảng với sự trợ giúp của Turbo. Để làm được điều này, trước tiên chúng ta sẽ cần một bộ điều khiển có create hành động:
Hành động này ít nhiều có thể được mượn từ bài đăng trên blog 'On Rails' mà chúng tôi đã trích dẫn trong phần giới thiệu. Nó xây dựng JSON cần thiết để chèn tệp đính kèm ở phía máy khách:bao gồm SGID và content được kết xuất từ editor một phần, như chúng ta sẽ thấy sau.
Chúng tôi thêm các lộ trình bảng tài nguyên có liên quan vào cấu hình của chúng tôi:
Bây giờ đã đến lúc đi sâu vào vấn đề:chúng ta cần xây dựng mô hình bảng của mình. Đầu tiên, hãy bao gồm ActionText::Attachable và xác định các đường dẫn từng phần có liên quan:
Lưu ý rằng chúng ta chưa xác định cách lưu trữ nội dung của bảng. Vì chúng tôi đã khai báo nó dưới dạng cột JSON(B) trong cơ sở dữ liệu của mình nên chúng tôi có thể tự do chọn bất kỳ định dạng nào. Khác với bài đăng trên blog được trích dẫn một chút, hãy chuyển sang mảng hai chiều. Vì vậy, chúng ta có thể chỉ cần thực hiện một vòng lặp lồng nhau trên content như thế này:
Phần trên sẽ hiển thị bất cứ khi nào được yêu cầu bởi ActionView , chẳng hạn. Tiếp theo, chúng ta cũng phải nghĩ ra editor một phần được sử dụng nội tuyến trong Trix:
Sự khác biệt duy nhất, như bạn có thể đã nhận thấy, là giờ đây chúng tôi đã gói nó trong Turbo Frame, sử dụng SGID làm id DOM. Hơn nữa, chúng tôi cung cấp chỉ mục hàng và cột cho các khối phân cách và chuẩn bị chỉnh sửa nội dòng bằng cách tạo DIV contenteditable bên trong — chúng ta sẽ đề cập đến vấn đề đó sau.
Bây giờ chúng ta sẽ kết nối nút bảng trên thanh công cụ với hành động của bộ điều khiển phía máy chủ mà chúng ta vừa viết. Để làm được điều này, trước tiên chúng ta cần đưa thư viện request.js của Rails vào dự án. Thư viện này sẽ giúp chúng tôi quản lý post yêu cầu từ khách hàng, bao gồm cả mã thông báo CSRF thích hợp, v.v.:
Xây dựng bộ điều khiển kích thích bảng Trix mới
Bây giờ mọi thứ đã được thiết lập, hãy tạo một bảng ma trận mới Bộ điều khiển kích thích. Trong đó, chúng ta sẽ triển khai attachTable hành động được tham chiếu bởi nút thanh công cụ của chúng tôi:
Nó sẽ POST lên create của bảng định tuyến, chèn phản hồi JSON dưới dạng Tệp đính kèm Trix . Điều này một lần nữa mượn từ bài đăng trên blog OnRails, trao đổi rails-ujs không được dùng nữa yêu cầu request.js mới hơn thư viện.
Bây giờ chúng ta phải thực sự sử dụng bộ điều khiển này trong ứng dụng của mình bằng cách thêm nó vào phần đánh dấu của biểu mẫu:
Cái hay của Stimulus.js là chỉ thêm hai thuộc tính dữ liệu vào form phần tử đạt được kết quả mong muốn. Giờ đây, chúng tôi có thể thêm bảng vào nội dung bài viết của mình chỉ bằng một cú nhấp chuột:
Thao tác với bảng thông qua khung Turbo
Bây giờ chúng ta có thể tạo phần đính kèm bảng, hãy chuyển trọng tâm sang thao tác nội dung. Hóa ra, Turbo Frames gần như sự phù hợp tự nhiên ở đây.
Thêm và xóa hàng và cột trong bảng
Để thêm và xóa các hàng và cột trong bảng, chúng ta tạo một thanh công cụ nhỏ bao gồm bốn nút, một nút cho mỗi thao tác. Tận dụng button_to người trợ giúp và đặt URL thành update tuyến đường cho bảng tương ứng. Hãy thêm thao tác tương ứng mà chúng tôi muốn kích hoạt dưới dạng tham số bổ sung:
Đổi lại, chúng ta cũng cần thêm (các) hành động của bộ điều khiển tương ứng vào TablesController . Lưu ý rằng update hành động ủy quyền những hành động đó cho mô hình.
Sau khi các thay đổi về cấu trúc của bảng được lưu, chúng tôi sẽ chuyển hướng đến chế độ xem chỉnh sửa của bảng. Nó hiển thị cùng một editor một phần, có tác dụng phụ là đề cập đến cùng một Khung Turbo. Do đó Turbo có thể phát hiện khung phù hợp và thay thế khung này bằng khung khác.
Bây giờ chúng ta phải triển khai các lệnh còn thiếu trên Table người mẫu.
Đáng chú ý, do cấu trúc dữ liệu mảng hai chiều đơn giản của chúng tôi, add/remove<sub>column</sub>/row các phương thức chỉ là proxy để sửa đổi số lượng cột và hàng. Khi đã xong, chúng ta có thể thay đổi cấu trúc của bảng bằng cách nhấp vào nút:
Chỉnh sửa nội dung ô trong bảng
Ngoài việc thay đổi số cột, hàng chúng ta còn muốn chỉnh sửa nội dung ô. Để đạt được điều này, một lần nữa chúng tôi sẽ dựa chủ yếu vào bài đăng trên blog được trích dẫn và tạo bộ điều khiển soạn thảo bảng Kích thích.
updateCell phương thức sẽ đưa ra yêu cầu PATCH bất cứ khi nào một ô được chỉnh sửa, chuyển chỉ mục hàng và cột làm tham số. Bây giờ, tất cả những gì chúng ta phải làm là kết nối nó với DOM:
TablesController phía máy chủ , tất nhiên, bây giờ cần một cách để xử lý thao tác này. May mắn thay, điều này có thể dễ dàng thực hiện được trong bằng chứng khái niệm đơn giản hóa của chúng ta bằng cách thêm một nhánh khác vào điều kiện của chúng ta. Chúng tôi cũng đảm bảo rằng update hành động hiện có thể xử lý các yêu cầu kiểu JSON, ngay cả khi nó chỉ trả về một đối tượng trống ở đây.
Lưu ý rằng trong một ứng dụng sản xuất, tôi khuyên bạn nên chọn một chiến lược vệ sinh hoạt động khác với if/elsif/else điều kiện. Có lẽ tôi sẽ liên hệ với Người hòa giải hoặc Người được ủy quyền trong trường hợp này.
Hạn chế của Trix trong Ruby
Cho đến thời điểm này, tôi cho rằng câu chuyện này hoàn toàn hợp lý, nhưng tôi đã bỏ qua một chi tiết quan trọng. Mặc dù chúng tôi vẫn duy trì tốt mô hình cơ sở dữ liệu cơ bản nhưng chúng tôi không đồng bộ hóa nó với biểu diễn bóng bên trong của Trix. Đó là lý do tại sao bảng quay trở lại biểu diễn được lưu trữ trước đó khi chúng ta lấy tiêu điểm ra khỏi bảng:
Nếu chúng ta làm mới trang ngay bây giờ, nội dung được thêm sẽ xuất hiện vì tài liệu của Trix mới được khởi tạo.
Tôi đã ghim vấn đề này vào nơi Trix đồng bộ hóa tài liệu nội bộ của nó khi lựa chọn thay đổi. Nó chỉ mở ra từ phần tử bóng ở đây.
Tôi đã thử kết nối vào turbo:submit sự kiện và ngăn chặn việc đồng bộ hóa ngay khi làm mờ bảng, nhưng tất cả các giải pháp tôi nghĩ ra đều có vẻ rất phức tạp và phụ thuộc nhiều vào API nội bộ.
Tôi đoán, cách Turbo-esque nhất để giải quyết vấn đề này là bọc toàn bộ biểu mẫu trong một Turbo Frame được tải sẵn và yêu cầu nó tải lại bất cứ khi nào nội dung của Trix thay đổi.
Một cái gì đó như thế này sẽ có hiệu quả:
Nếu bạn gửi biểu mẫu của mình vào Khung Turbo mà bạn tải từ src :
Tuy nhiên, cách tiếp cận này chỉ hoạt động với các bản ghi cơ sở đã tồn tại lâu dài.
Lời cảnh báo cuối cùng về Trix
Bằng chứng về khái niệm mà chúng tôi đã xây dựng sử dụng HTML do máy chủ kết xuất để loại bỏ sự phức tạp tăng thêm của việc tuần tự hóa các bảng thành JSON và lắng nghe các sự kiện JavaScript. Nó có thể di chuyển tới bất kỳ cài đặt ActionText nào và có thể dễ dàng trích xuất thành đá quý.
Tuy nhiên, có một số nhược điểm, rõ ràng nhất là việc cần phải đồng bộ lại với mô hình tài liệu của Trix. Có thể có những tình huống trong đó giải pháp được đề xuất có thể thực hiện được và những tình huống khác thì không thể thực hiện được. Sẽ không có cách nào khác cho đến khi Trix có được giao diện tương thích với Turbo.
Điều đáng chú ý thứ hai là nó không sử dụng undo của Trix chức năng (nhưng điều đó đúng với bất kỳ tệp đính kèm Trix nào). Tương tự như vậy, sẽ là khôn ngoan nếu chờ đợi những thay đổi ngược dòng thay vì điều chỉnh API nội bộ.
Kết thúc
Trong bài đăng này, chúng tôi đã bắt đầu bằng cách xem nhanh thông tin cơ bản về Tệp đính kèm ActionText. Sau đó, chúng tôi đã thêm một bảng vào mô hình ActionText trước khi điều chỉnh nó bằng Turbo Frames. Cuối cùng, chúng tôi đã đề cập đến một số hạn chế khi sử dụng Trix.
Vì Trix v2 đang được tiến hành, bao gồm bản dịch từ CoffeeScript sang JavaScript hiện đại đơn giản, bây giờ sẽ là thời điểm tốt để giải quyết khả năng tương thích Turbo của nó. Hiện tại, phạm vi của một trình bao bọc như vậy có thể nằm ngoài khả năng của tôi, nhưng nó chắc chắn giống như một cơ hội.
Chúc bạn viết mã vui vẻ!
Tái bút. Nếu bạn muốn đọc các bài đăng của Ruby Magic ngay khi chúng được đăng tải, hãy đăng ký nhận bản tin Ruby Magic của chúng tôi và không bao giờ bỏ lỡ một bài đăng nào!