Trình soạn thảo văn bản JavaScript

Shalabh Vyas là một Kỹ sư Front-End với kinh nghiệm làm việc trong toàn bộ vòng đời phát triển sản phẩm, khởi chạy các ứng dụng dựa trên web phong phú. … Thông tin thêm về Shalabh ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• 
  Danh sách kiểm tra thiết kế giao diện thông minh

• 
  Xem trực tiếp vào tháng 12. thứ 8

• 
  Đập tanConf Freiburg. Tất cả về Web. Ngày 4–6 tháng 9 năm 2023

• 
  Bắt đầu miễn phí

• 
  Giao diện người dùng SmashingConf 2023

• 
  Các mẫu thiết kế giao diện Đào tạo UX

Trong những năm gần đây, lĩnh vực Sáng tạo và Thể hiện Nội dung trên nền tảng Kỹ thuật số đã chứng kiến ​​một sự đột phá lớn. Sự thành công rộng rãi của các sản phẩm như Quip, Google Docs và Dropbox Paper đã cho thấy cách các công ty đang chạy đua để xây dựng trải nghiệm tốt nhất cho người tạo nội dung trong miền doanh nghiệp và cố gắng tìm ra những cách sáng tạo để phá vỡ khuôn mẫu truyền thống về cách chia sẻ và tiêu thụ nội dung. Tận dụng khả năng tiếp cận rộng rãi của các nền tảng truyền thông xã hội, có một làn sóng mới những người tạo nội dung độc lập sử dụng các nền tảng như Phương tiện để tạo nội dung và chia sẻ nội dung đó với khán giả của họ

Vì rất nhiều người từ các ngành nghề và nền tảng khác nhau cố gắng tạo nội dung trên các sản phẩm này nên điều quan trọng là các sản phẩm này phải cung cấp trải nghiệm sáng tạo nội dung hiệu quả và liền mạch, đồng thời có các nhóm nhà thiết kế và kỹ sư phát triển một số cấp độ chuyên môn về miền theo thời gian trong không gian này. Với bài viết này, chúng tôi cố gắng không chỉ đặt nền móng cho việc xây dựng một trình soạn thảo mà còn cung cấp cho người đọc cái nhìn thoáng qua về cách các chức năng nhỏ khi được kết hợp với nhau có thể tạo ra trải nghiệm người dùng tuyệt vời cho người tạo nội dung

Hiểu cấu trúc tài liệu

Trước khi chúng tôi đi sâu vào việc xây dựng trình chỉnh sửa, hãy xem cách tài liệu được cấu trúc cho Trình soạn thảo văn bản có định dạng và các loại cấu trúc dữ liệu khác nhau có liên quan là gì

Nút tài liệu

Các nút tài liệu được sử dụng để thể hiện nội dung của tài liệu. Các loại nút phổ biến mà tài liệu văn bản đa dạng thức có thể chứa là đoạn văn, tiêu đề, hình ảnh, video, khối mã và trích dẫn kéo. Một số trong số này có thể chứa các nút khác khi còn nhỏ bên trong chúng (e. g. Các nút đoạn chứa các nút văn bản bên trong chúng). Các nút cũng giữ bất kỳ thuộc tính cụ thể nào đối với đối tượng mà chúng đại diện cần thiết để hiển thị các nút đó bên trong trình chỉnh sửa. (e. g. Các nút hình ảnh chứa thuộc tính

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Phần lớn có hai loại nút đại diện cho cách chúng sẽ được hiển thị -

• Các nút khối (tương tự như khái niệm HTML về các phần tử cấp khối) được hiển thị trên một dòng mới và chiếm chiều rộng có sẵn. Các nút khối có thể chứa các nút khối khác hoặc các nút nội tuyến bên trong chúng. Một quan sát ở đây là các nút cấp cao nhất của tài liệu sẽ luôn là các nút khối
• Các nút nội tuyến (tương tự như khái niệm HTML về các phần tử nội tuyến) bắt đầu hiển thị trên cùng một dòng với nút trước đó. Có một số khác biệt về cách các phần tử nội tuyến được thể hiện trong các thư viện chỉnh sửa khác nhau. SlateJS cho phép các phần tử nội tuyến trở thành các nút. DraftJS, một thư viện Rich Text Editing phổ biến khác, cho phép bạn sử dụng khái niệm Thực thể để hiển thị các phần tử nội tuyến. Liên kết và Hình ảnh Nội tuyến là ví dụ về các nút Nội tuyến
• Các nút trống — SlateJS cũng cho phép loại nút thứ ba này mà chúng ta sẽ sử dụng sau trong bài viết này để kết xuất phương tiện

Nếu bạn muốn tìm hiểu thêm về các danh mục này, tài liệu về Nút của SlateJS là một nơi tốt để bắt đầu

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Các biểu mẫu web là trung tâm của mọi tương tác có ý nghĩa, vì vậy chúng đáng để xử lý chắc chắn. Làm quen với Mẫu thiết kế biểu mẫu của Adam Silver, một hướng dẫn thiết thực để thiết kế và xây dựng biểu mẫu cho web

Thuộc tính

Tương tự như khái niệm thuộc tính của HTML, các thuộc tính trong Tài liệu văn bản đa dạng thức được sử dụng để biểu thị các thuộc tính không phải nội dung của một nút hoặc nút con. Chẳng hạn, một nút văn bản có thể có các thuộc tính kiểu ký tự cho chúng ta biết liệu văn bản có được in đậm/nghiêng/gạch chân hay không, v.v. Mặc dù bài viết này biểu thị các tiêu đề dưới dạng các nút, nhưng một cách khác để biểu thị chúng có thể là các nút có các kiểu đoạn văn (

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Hình ảnh dưới đây đưa ra một ví dụ về cách cấu trúc của tài liệu (dưới dạng JSON) được mô tả ở mức chi tiết hơn bằng cách sử dụng các nút và thuộc tính làm nổi bật một số thành phần trong cấu trúc ở bên trái

Một số điều đáng gọi ở đây với cấu trúc là

• Các nút văn bản được biểu diễn dưới dạng

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  8
• Thuộc tính của các nút được lưu trữ trực tiếp trên nút (e. g.

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  9 cho liên kết và

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  0 cho hình ảnh)
• Biểu diễn các thuộc tính văn bản dành riêng cho SlateJS sẽ phá vỡ các nút văn bản thành các nút của chính chúng nếu kiểu ký tự thay đổi. Do đó, văn bản 'Duis aute irure dolor' là nút văn bản của riêng nó với

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  1 được đặt trên đó. Tương tự với văn bản kiểu chữ nghiêng, gạch dưới và kiểu mã trong tài liệu này

Vị trí và lựa chọn

Khi xây dựng trình soạn thảo văn bản đa dạng thức, điều quan trọng là phải hiểu cách phần chi tiết nhất của tài liệu (ví dụ một ký tự) có thể được biểu diễn bằng một số loại tọa độ. Điều này giúp chúng tôi điều hướng cấu trúc tài liệu trong thời gian chạy để hiểu chúng tôi đang ở đâu trong hệ thống phân cấp tài liệu. Quan trọng nhất, các đối tượng vị trí cung cấp cho chúng tôi một cách để thể hiện lựa chọn của người dùng, được sử dụng khá rộng rãi để điều chỉnh trải nghiệm người dùng của trình chỉnh sửa trong thời gian thực. Chúng tôi sẽ sử dụng lựa chọn để xây dựng thanh công cụ của chúng tôi sau trong bài viết này. Ví dụ về những điều này có thể là

• Con trỏ của người dùng hiện đang ở trong một liên kết, có lẽ chúng ta nên hiển thị cho họ một menu để chỉnh sửa/xóa liên kết?
• Người dùng đã chọn một hình ảnh chưa?
• Nếu người dùng chọn một số văn bản nhất định và nhấn nút XÓA, chúng tôi sẽ xác định văn bản mà người dùng đã chọn là gì và xóa văn bản đó khỏi tài liệu

Tài liệu của SlateJS về Vị trí giải thích rộng rãi các cấu trúc dữ liệu này nhưng chúng tôi sẽ nhanh chóng lướt qua chúng ở đây khi chúng tôi sử dụng các thuật ngữ này ở các trường hợp khác nhau trong bài viết và hiển thị một ví dụ trong sơ đồ sau

• Đường dẫn
  Được biểu thị bằng một dãy số, đường dẫn là cách để đến một nút trong tài liệu. Chẳng hạn, đường dẫn

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  2 đại diện cho nút con thứ 3 của nút thứ 2 trong tài liệu.
• Điểm
  Vị trí chi tiết hơn của nội dung được biểu thị bằng đường dẫn + độ lệch. Chẳng hạn, một điểm của

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  3 đại diện cho ký tự thứ 14 của nút con thứ 3 bên trong nút thứ 2 của tài liệu.
• Phạm vi
  Một cặp điểm (được gọi là

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  4 và

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  5) đại diện cho một phạm vi văn bản bên trong tài liệu. Khái niệm này xuất phát từ API Lựa chọn của Web trong đó

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  4 là nơi bắt đầu lựa chọn của người dùng và

  import { Editable, Slate, withReact } from "slate-react";
  
  import { createEditor } from "slate";
  import { useMemo } from "react";
  
  export default function Editor({ document, onChange }) {
    const editor = useMemo(() => withReact(createEditor()), []);
    return (
      <Slate editor={editor} value={document} onChange={onChange}>
        <Editable />
      </Slate>
    );
  }
  

  5 là nơi kết thúc. Một phạm vi/lựa chọn được thu gọn biểu thị nơi các điểm neo và tiêu điểm giống nhau (chẳng hạn như nghĩ về một con trỏ nhấp nháy trong một kiểu nhập văn bản).

Ví dụ: giả sử lựa chọn của người dùng trong ví dụ tài liệu trên của chúng tôi là

import { Editable, Slate, withReact } from "slate-react";

import { createEditor } from "slate";
import { useMemo } from "react";

export default function Editor({ document, onChange }) {
  const editor = useMemo(() => withReact(createEditor()), []);
  return (
    <Slate editor={editor} value={document} onChange={onChange}>
      <Editable />
    </Slate>
  );
}

import { Editable, Slate, withReact } from "slate-react";

import { createEditor } from "slate";
import { useMemo } from "react";

export default function Editor({ document, onChange }) {
  const editor = useMemo(() => withReact(createEditor()), []);
  return (
    <Slate editor={editor} value={document} onChange={onChange}>
      <Editable />
    </Slate>
  );
}

Lựa chọn của người dùng có thể được biểu diễn dưới dạng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Thiết lập Trình chỉnh sửa

Trong phần này, chúng ta sẽ thiết lập ứng dụng và có một trình soạn thảo văn bản đa dạng thức cơ bản với SlateJS. Ứng dụng soạn sẵn sẽ là

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Tạo một thư mục có tên là

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Sau đó, chúng tôi chuyển sang thêm các phụ thuộc SlateJS vào ứng dụng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Trước tiên, chúng tôi tạo một thư mục

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ chúng tôi thêm một thư mục có tên là

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

• Thêm thành phần React đầu tiên của chúng tôi

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  79 vào nó. Hiện tại nó chỉ trả về một

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  00
• Cập nhật thành phần

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  01 để giữ tài liệu ở trạng thái được khởi tạo thành

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  02 của chúng tôi ở trên
• Kết xuất Trình chỉnh sửa bên trong ứng dụng và chuyển trạng thái tài liệu và trình xử lý

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  03 xuống Trình chỉnh sửa để trạng thái tài liệu của chúng tôi được cập nhật khi người dùng cập nhật nó
• Chúng tôi cũng sử dụng các thành phần Nav của React bootstrap để thêm thanh điều hướng vào ứng dụng

Thành phần

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bên trong thành phần Trình chỉnh sửa, sau đó chúng tôi khởi tạo trình chỉnh sửa SlateJS và giữ nó bên trong một

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ, chúng tôi nhập và kết xuất các thành phần

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

import { Editable, Slate, withReact } from "slate-react";

import { createEditor } from "slate";
import { useMemo } from "react";

export default function Editor({ document, onChange }) {
  const editor = useMemo(() => withReact(createEditor()), []);
  return (
    <Slate editor={editor} value={document} onChange={onChange}>
      <Editable />
    </Slate>
  );
}

Tại thời điểm này, chúng tôi đã thêm các thành phần React cần thiết và trình chỉnh sửa được điền bằng một tài liệu mẫu. Trình chỉnh sửa của chúng tôi hiện đã được thiết lập cho phép chúng tôi nhập và thay đổi nội dung trong thời gian thực — như trong bản ghi màn hình bên dưới

Bây giờ, hãy chuyển sang phần tiếp theo, nơi chúng tôi định cấu hình trình chỉnh sửa để hiển thị kiểu ký tự và nút đoạn văn

KẾT XUẤT VĂN BẢN TÙY CHỈNH VÀ THANH CÔNG CỤ

Nút kiểu đoạn văn

Hiện tại, trình chỉnh sửa của chúng tôi sử dụng kết xuất mặc định của SlateJS cho bất kỳ loại nút mới nào mà chúng tôi có thể thêm vào tài liệu. Trong phần này, chúng tôi muốn có thể hiển thị các nút tiêu đề. Để có thể làm được điều đó, chúng tôi cung cấp một hàm

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  25
  SlateJS cụ thể phải được áp dụng cho phần tử DOM cấp cao nhất được trả về từ hàm này.

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  26
  Bản thân đối tượng nút khi nó tồn tại trong cấu trúc tài liệu

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  27
  Các phần tử con của nút này như được định nghĩa trong cấu trúc tài liệu.

Chúng tôi thêm triển khai

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Vì chức năng này cho phép chúng tôi truy cập vào

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ chúng tôi cập nhật thành phần Trình chỉnh sửa để sử dụng hook này như bên dưới

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Với hiển thị tùy chỉnh tại chỗ, chúng tôi cập nhật ExampleDocument để bao gồm các loại nút mới của chúng tôi và xác minh rằng chúng hiển thị chính xác bên trong trình chỉnh sửa

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Kiểu nhân vật

Tương tự như

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Một nhận xét quan trọng về cách thực hiện trên là nó cho phép chúng ta tôn trọng ngữ nghĩa HTML đối với các kiểu ký tự. Vì renderLeaf cho phép chúng tôi truy cập vào chính nút văn bản

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ, chúng tôi cập nhật thành phần Trình chỉnh sửa để sử dụng phần trên,

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Thêm Thanh công cụ

Hãy bắt đầu bằng cách thêm một thành phần mới

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Chúng tôi trừu tượng hóa các nút thành thành phần

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Dưới đây là ba chức năng chính mà chúng tôi cần thanh công cụ để hỗ trợ

1. Khi con trỏ của người dùng ở một vị trí nhất định trong tài liệu và họ nhấp vào một trong các nút kiểu ký tự, chúng ta cần chuyển đổi kiểu cho văn bản mà họ có thể nhập tiếp theo
2. Khi người dùng chọn một phạm vi văn bản và nhấp vào một trong các nút kiểu ký tự, chúng ta cần chuyển đổi kiểu cho phần cụ thể đó
3. Khi người dùng chọn một phạm vi văn bản, chúng tôi muốn cập nhật trình đơn thả xuống kiểu đoạn để phản ánh kiểu đoạn của lựa chọn. Nếu họ chọn một giá trị khác với lựa chọn, chúng tôi muốn cập nhật kiểu đoạn văn của toàn bộ lựa chọn thành những gì họ đã chọn

Hãy xem cách các chức năng này hoạt động trên Trình chỉnh sửa trước khi chúng tôi bắt đầu triển khai chúng

Nghe Tuyển Chọn

Điều quan trọng nhất mà Thanh công cụ cần để có thể thực hiện các chức năng trên là trạng thái Lựa chọn của tài liệu. Khi viết bài viết này, SlateJS không đưa ra phương pháp

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Chúng tôi sử dụng hook này bên trong thành phần

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Xem xét hiệu suất

Trong một ứng dụng mà chúng tôi có cơ sở mã Editor lớn hơn nhiều với nhiều chức năng hơn, điều quan trọng là lưu trữ và lắng nghe các thay đổi lựa chọn theo cách hiệu quả (như sử dụng một số thư viện quản lý trạng thái) vì các thành phần lắng nghe các thay đổi lựa chọn cũng có thể hiển thị . Một cách để làm điều này là có các bộ chọn được tối ưu hóa trên trạng thái Lựa chọn chứa thông tin lựa chọn cụ thể. Chẳng hạn, một trình chỉnh sửa có thể muốn hiển thị menu thay đổi kích thước hình ảnh khi một Hình ảnh được chọn. Trong trường hợp như vậy, có thể hữu ích khi có bộ chọn

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Chúng tôi không sử dụng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Chuyển đổi kiểu ký tự

Bây giờ chúng ta chuyển sang lấy các kiểu ký tự đang hoạt động là gì từ SlateJS và sử dụng các kiểu bên trong Trình chỉnh sửa. Hãy thêm một mô-đun JS mới

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Cả hai hàm đều lấy đối tượng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Người ta có thể thắc mắc tại sao chúng tôi sử dụng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

SlateJS cho phép chúng ta cấu hình event handlers trên Editor. Chúng tôi sử dụng điều đó để kết nối các phím tắt để chuyển đổi các kiểu ký tự. Để làm điều đó, chúng tôi thêm một đối tượng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Làm cho danh sách thả xuống kiểu đoạn văn hoạt động

Hãy chuyển sang làm cho trình đơn thả xuống Kiểu đoạn văn hoạt động. Tương tự như cách trình đơn thả xuống kiểu đoạn văn hoạt động trong các ứng dụng Xử lý văn bản phổ biến như MS Word hoặc Google Docs, chúng tôi muốn các kiểu khối cấp cao nhất trong lựa chọn của người dùng được phản ánh trong trình đơn thả xuống. Nếu có một kiểu nhất quán duy nhất trong toàn bộ lựa chọn, chúng tôi sẽ cập nhật giá trị thả xuống thành kiểu đó. Nếu có nhiều trong số đó, chúng tôi đặt giá trị thả xuống là 'Nhiều'. Hành vi này phải hoạt động cho cả hai — lựa chọn được thu gọn và mở rộng

Để thực hiện hành vi này, chúng tôi cần có khả năng tìm thấy các khối cấp cao nhất bao trùm lựa chọn của người dùng. Để làm như vậy, chúng tôi sử dụng Slate's

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Hàm trợ giúp lấy một đối tượng Editor và một đối tượng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  150
  Đây có thể là Đường dẫn/Điểm/Phạm vi mà hàm trợ giúp sẽ sử dụng để thu hẹp phạm vi duyệt cây xuống. Điều này mặc định là

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  151 nếu không được cung cấp. Chúng tôi cũng sử dụng giá trị mặc định cho trường hợp sử dụng bên dưới vì chúng tôi quan tâm đến các nút trong lựa chọn của người dùng.

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  152
  Đây là một hàm khớp mà người ta có thể cung cấp, được gọi trên mỗi nút và được bao gồm nếu nó khớp. Chúng tôi sử dụng tham số này trong quá trình triển khai bên dưới để chỉ lọc để chặn các phần tử.

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  153
  Hãy để các chức năng của trình trợ giúp biết liệu chúng tôi có quan tâm đến tất cả các nút cấp cao nhất hay cấp thấp nhất

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  150 vị trí đã cho phù hợp với chức năng

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  152. Tham số này (được đặt thành

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  156) giúp chúng tôi thoát khỏi việc cố gắng tự mình đi qua cây để tìm các nút cấp cao nhất.

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  157
  Gắn cờ để chọn giữa các nút phù hợp hoàn toàn hoặc một phần. (Vấn đề GitHub với đề xuất cho cờ này có một số ví dụ giải thích về nó)

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  158
  Nếu tìm kiếm nút phải theo hướng ngược lại với điểm bắt đầu và điểm kết thúc của vị trí được chuyển vào.
• ______2159
  Nếu tìm kiếm chỉ lọc để loại bỏ các phần tử.

SlateJS hiển thị rất nhiều hàm trợ giúp cho phép bạn truy vấn các nút theo nhiều cách khác nhau, duyệt qua cây, cập nhật các nút hoặc lựa chọn theo những cách phức tạp. Đáng để nghiên cứu một số giao diện này (được liệt kê ở cuối bài viết này) khi xây dựng các chức năng chỉnh sửa phức tạp trên Slate

Với nền tảng đó về chức năng của trình trợ giúp, bên dưới là triển khai của

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Xem xét hiệu suất

Việc triển khai hiện tại của

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Khi chúng tôi thêm nhiều chức năng hơn vào Trình soạn thảo WYSIWYG và cần duyệt qua cây tài liệu thường xuyên, điều quan trọng là phải suy nghĩ về những cách hiệu quả nhất để thực hiện điều đó cho trường hợp sử dụng hiện tại vì API có sẵn hoặc các phương thức trợ giúp có thể không phải lúc nào cũng tốt nhất

Khi chúng tôi đã triển khai

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Việc triển khai của

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Cuối cùng, chúng tôi cập nhật trình đơn thả xuống Kiểu đoạn văn để sử dụng các chức năng tiện ích này

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

LIÊN KẾT

Trong phần này, chúng tôi sẽ thêm hỗ trợ để hiển thị, thêm, xóa và thay đổi liên kết. Chúng tôi cũng sẽ thêm chức năng Trình phát hiện liên kết — khá giống với cách Google Tài liệu hoặc MS Word quét văn bản do người dùng nhập và kiểm tra xem có liên kết nào trong đó không. Nếu có, chúng sẽ được chuyển đổi thành các đối tượng liên kết để người dùng không phải sử dụng các nút trên thanh công cụ để tự làm điều đó

Kết xuất liên kết

Trong trình chỉnh sửa của chúng tôi, chúng tôi sẽ triển khai các liên kết dưới dạng các nút nội tuyến với SlateJS. Chúng tôi cập nhật cấu hình trình chỉnh sửa của mình để gắn cờ các liên kết dưới dạng các nút nội tuyến cho SlateJS và cũng cung cấp một thành phần để kết xuất để Slate biết cách kết xuất các nút liên kết

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Sau đó, chúng tôi thêm nút liên kết vào

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Thêm nút liên kết vào thanh công cụ

Hãy thêm Nút liên kết vào thanh công cụ cho phép người dùng thực hiện các thao tác sau

• Chọn một số văn bản và nhấp vào nút sẽ chuyển đổi văn bản đó thành một liên kết
• Có một con trỏ nhấp nháy (lựa chọn thu gọn) và nhấp vào nút sẽ chèn một liên kết mới vào đó
• Nếu lựa chọn của người dùng nằm trong một liên kết, thì việc nhấp vào nút sẽ chuyển đổi liên kết - nghĩa là chuyển liên kết trở lại thành văn bản

Để xây dựng các chức năng này, chúng tôi cần một cách trên thanh công cụ để biết liệu lựa chọn của người dùng có nằm trong nút liên kết hay không. Chúng tôi thêm một hàm tiện ích đi qua các mức theo hướng đi lên từ lựa chọn của người dùng để tìm nút liên kết nếu có, sử dụng hàm trợ giúp

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ, hãy thêm một nút vào thanh công cụ đang ở trạng thái hoạt động nếu lựa chọn của người dùng nằm trong nút liên kết

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Để chuyển đổi các liên kết trong trình chỉnh sửa, chúng tôi thêm một chức năng sử dụng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Nếu chúng tôi phải tự làm điều này, chúng tôi sẽ phải tìm ra phạm vi lựa chọn và tạo ba nút mới (văn bản, liên kết, văn bản) thay thế nút văn bản gốc. SlateJS có một hàm trợ giúp có tên là

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Nếu lựa chọn bị thu gọn, chúng tôi sẽ chèn một nút mới vào đó với

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Trình chỉnh sửa liên kết

Cho đến nay, trình chỉnh sửa của chúng tôi có một cách để thêm và xóa các liên kết nhưng chúng tôi không có cách nào để cập nhật các URL được liên kết với các liên kết này. Chúng ta có thể mở rộng trải nghiệm người dùng để cho phép người dùng chỉnh sửa dễ dàng bằng menu ngữ cảnh không? . Hãy bắt đầu với việc xây dựng một thành phần

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Vì chúng tôi đang hiển thị

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

SlateJS duy trì nội bộ bản đồ của các nút tới các phần tử DOM tương ứng của chúng. Chúng tôi truy cập bản đồ đó và tìm phần tử DOM của liên kết bằng cách sử dụng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Như đã thấy trong video ở trên, khi một liên kết được chèn vào và không có URL, vì vùng chọn nằm bên trong liên kết, nó sẽ mở trình chỉnh sửa liên kết, do đó cung cấp cho người dùng cách nhập URL cho liên kết mới được chèn và

Bây giờ chúng tôi thêm một yếu tố đầu vào và một nút vào

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Với các phần tử biểu mẫu được kết nối, hãy xem trình chỉnh sửa liên kết có hoạt động như mong đợi không

Như chúng ta thấy ở đây trong video, khi người dùng cố gắng nhấp vào đầu vào, trình chỉnh sửa liên kết sẽ biến mất. Điều này là do khi chúng tôi kết xuất trình chỉnh sửa liên kết bên ngoài thành phần

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Sau đó, chúng tôi cập nhật logic trong thành phần

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Sau đó, chúng tôi cập nhật

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Phát hiện liên kết trong văn bản

Hầu hết các ứng dụng xử lý văn bản xác định và chuyển đổi các liên kết bên trong văn bản thành các đối tượng liên kết. Hãy xem nó sẽ hoạt động như thế nào trong trình chỉnh sửa trước khi chúng ta bắt đầu xây dựng nó

Các bước logic để kích hoạt hành vi này sẽ là

1. Khi tài liệu thay đổi khi người dùng nhập, hãy tìm ký tự cuối cùng do người dùng chèn vào. Nếu ký tự đó là một khoảng trắng, chúng tôi biết phải có một từ có thể xuất hiện trước nó
2. Nếu ký tự cuối cùng là khoảng trắng, chúng tôi đánh dấu đó là ranh giới cuối của từ đứng trước nó. Sau đó, chúng tôi duyệt lại từng ký tự bên trong nút văn bản để tìm từ đó bắt đầu từ đâu. Trong quá trình truyền tải này, chúng ta phải cẩn thận để không đi qua cạnh của nút bắt đầu vào nút trước đó
3. Khi chúng tôi đã tìm thấy ranh giới bắt đầu và kết thúc của từ trước đó, chúng tôi kiểm tra chuỗi của từ và xem đó có phải là URL không. Nếu đúng như vậy, chúng tôi chuyển đổi nó thành một nút liên kết

Logic của chúng ta nằm trong một hàm tiện ích

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Đây là

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Có hai hàm trợ giúp SlateJS giúp mọi thứ trở nên dễ dàng ở đây

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  201 — Cung cấp cho chúng tôi điểm trước một vị trí nhất định. Nó lấy

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  202 làm tham số để chúng tôi có thể yêu cầu ký tự/từ/khối, v.v. trước khi

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  203 được chuyển vào

• // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  204 — Lấy chuỗi bên trong một phạm vi

Ví dụ, sơ đồ bên dưới giải thích giá trị của các biến này là gì khi người dùng chèn một ký tự 'E' và con trỏ của họ đang ở sau ký tự đó

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Nếu văn bản 'ABCDE' là nút văn bản đầu tiên của đoạn đầu tiên trong tài liệu, thì các giá trị điểm của chúng tôi sẽ là -

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Nếu ký tự cuối cùng là một khoảng trắng, chúng tôi biết nó bắt đầu từ đâu —

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Đây là một sơ đồ cho thấy những điểm khác nhau này trỏ đến đâu khi chúng ta tìm thấy từ cuối cùng được nhập là

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Lưu ý rằng

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Chúng tôi ghi giá trị của

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ chúng tôi đã suy ra từ cuối cùng mà người dùng đã nhập, chúng tôi xác minh rằng đó thực sự là một URL và chuyển đổi phạm vi đó thành một đối tượng liên kết. Chuyển đổi này tương tự như cách nút liên kết thanh công cụ chuyển đổi văn bản đã chọn của người dùng thành liên kết

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Hãy xem logic kết hợp với nhau trong hành động. Chúng tôi xác minh xem chúng tôi có chèn liên kết ở cuối, ở giữa hoặc đầu nút văn bản hay không

Cùng với đó, chúng tôi đã tổng hợp các chức năng cho các liên kết trên trình chỉnh sửa và chuyển sang Hình ảnh

Xử lý hình ảnh

Trong phần này, chúng tôi tập trung vào việc thêm hỗ trợ để kết xuất các nút hình ảnh, thêm hình ảnh mới và cập nhật chú thích hình ảnh. Hình ảnh, trong cấu trúc tài liệu của chúng tôi, sẽ được biểu diễn dưới dạng các nút Void. Các nút trống trong SlateJS (tương tự như các phần tử Void trong thông số HTML) sao cho nội dung của chúng không phải là văn bản có thể chỉnh sửa. Điều đó cho phép chúng tôi hiển thị hình ảnh dưới dạng khoảng trống. Do tính linh hoạt của Slate với kết xuất, chúng tôi vẫn có thể kết xuất các phần tử có thể chỉnh sửa của riêng mình bên trong các phần tử Void — điều mà chúng tôi sẽ thực hiện để chỉnh sửa chú thích hình ảnh. SlateJS có một ví dụ minh họa cách bạn có thể nhúng toàn bộ Trình soạn thảo văn bản đa dạng thức vào bên trong phần tử Void

Để hiển thị hình ảnh, chúng tôi định cấu hình trình chỉnh sửa để coi hình ảnh là phần tử Void và cung cấp triển khai kết xuất về cách hình ảnh sẽ được hiển thị. Chúng tôi thêm một hình ảnh vào ExampleDocument của mình và xác minh rằng hình ảnh đó hiển thị chính xác với chú thích

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Hai điều cần nhớ khi cố gắng kết xuất các nút trống với SlateJS

• Phần tử DOM gốc phải có

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  219 được đặt trên đó để SlateJS xử lý nội dung của nó sao cho. Không có điều này, khi bạn tương tác với phần tử void, SlateJS có thể cố gắng tính toán các lựa chọn, v.v. và kết quả là phá vỡ
• Ngay cả khi các nút Void không có bất kỳ nút con nào (ví dụ như nút hình ảnh của chúng tôi), chúng tôi vẫn cần hiển thị

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  27 và cung cấp một nút văn bản trống khi còn nhỏ (xem

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  02 bên dưới) được coi là điểm lựa chọn của Void

Bây giờ, chúng tôi cập nhật

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ hãy tập trung vào chỉnh sửa phụ đề. Cách chúng tôi muốn điều này trở thành trải nghiệm liền mạch cho người dùng là khi họ nhấp vào chú thích, chúng tôi sẽ hiển thị kiểu nhập văn bản để họ có thể chỉnh sửa chú thích. Nếu họ nhấp vào bên ngoài đầu vào hoặc nhấn phím RETURN, chúng tôi coi đó là xác nhận để áp dụng chú thích. Sau đó, chúng tôi cập nhật chú thích trên nút hình ảnh và chuyển chú thích trở lại chế độ đọc. Hãy xem nó hoạt động để chúng tôi có ý tưởng về những gì chúng tôi đang xây dựng

Hãy cập nhật thành phần Hình ảnh của chúng ta để có trạng thái cho chế độ đọc-chỉnh sửa phụ đề. Chúng tôi cập nhật trạng thái phụ đề cục bộ khi người dùng cập nhật nó và khi họ nhấp ra (

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Như vậy là xong chức năng chỉnh sửa phụ đề. Bây giờ chúng tôi chuyển sang thêm một cách để người dùng tải hình ảnh lên trình chỉnh sửa. Hãy thêm một nút trên thanh công cụ cho phép người dùng chọn và tải lên một hình ảnh

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Khi chúng tôi làm việc với việc tải lên hình ảnh, mã có thể phát triển thêm một chút, vì vậy chúng tôi chuyển phần xử lý tải lên hình ảnh sang một hook

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Trước khi chúng tôi triển khai

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Sau đó, chúng tôi thêm tập lệnh

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Bây giờ chúng tôi đã thiết lập máy chủ, chúng tôi có thể tập trung vào việc xử lý tải lên hình ảnh. Khi người dùng tải lên một hình ảnh, có thể mất vài giây trước khi hình ảnh được tải lên và chúng tôi có một URL cho hình ảnh đó. Tuy nhiên, chúng tôi làm những gì để cung cấp cho người dùng phản hồi ngay lập tức rằng quá trình tải lên hình ảnh đang diễn ra để họ biết rằng hình ảnh đang được chèn vào trình chỉnh sửa. Dưới đây là các bước chúng tôi thực hiện để làm cho hành vi này hoạt động -

1. Sau khi người dùng chọn một hình ảnh, chúng tôi sẽ chèn một nút hình ảnh vào vị trí con trỏ của người dùng với cờ

   // dependencies imported as below.
   import { withReact } from "slate-react";
   import { createEditor } from "slate";
   
   const editor = useMemo(() => withReact(createEditor()), []);
   

   232 được đặt trên đó để chúng tôi có thể hiển thị cho người dùng trạng thái tải
2. Chúng tôi gửi yêu cầu đến máy chủ để tải hình ảnh lên
3. Sau khi yêu cầu hoàn tất và chúng tôi có URL hình ảnh, chúng tôi sẽ đặt URL đó trên hình ảnh và xóa trạng thái tải

Hãy bắt đầu với bước đầu tiên, nơi chúng tôi chèn nút hình ảnh. Bây giờ, phần phức tạp ở đây là chúng ta gặp vấn đề tương tự với lựa chọn như với nút liên kết trên thanh công cụ. Ngay khi người dùng nhấp vào nút Hình ảnh trên thanh công cụ, trình chỉnh sửa sẽ mất tiêu điểm và lựa chọn trở thành

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Khi chúng tôi chèn nút hình ảnh mới, chúng tôi cũng gán cho nó một mã định danh

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Như vậy là hoàn thành việc thực hiện bước 1. Hãy xác minh rằng chúng tôi có thể chọn một hình ảnh để tải lên, xem nút hình ảnh được chèn với chỉ báo tải ở nơi nó được chèn vào tài liệu

Sang Bước (2) chúng ta sẽ sử dụng thư viện axios để gửi request lên server

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Chúng tôi xác minh rằng hình ảnh tải lên hoạt động và hình ảnh hiển thị trong thư mục

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

• Chúng ta không thể sử dụng

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  151 vì vùng chọn phải nằm trên nút hình ảnh mới được chèn sao?
• Làm thế nào về việc sử dụng

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  139 mà chúng tôi đã sử dụng để chèn nút hình ảnh ở vị trí đầu tiên?
• SlateJS có một mô-đun Lịch sử theo dõi tất cả các thay đổi xảy ra với tài liệu. Chúng tôi có thể sử dụng mô-đun này để tìm kiếm lịch sử và tìm nút hình ảnh được chèn cuối cùng. Điều này cũng không hoàn toàn đáng tin cậy nếu hình ảnh tải lên mất nhiều thời gian hơn và người dùng đã chèn nhiều hình ảnh hơn vào các phần khác nhau của tài liệu trước khi quá trình tải lên đầu tiên hoàn tất
• Hiện tại, API của

  // dependencies imported as below.
  import { withReact } from "slate-react";
  import { createEditor } from "slate";
  
  const editor = useMemo(() => withReact(createEditor()), []);
  

  244 không trả về bất kỳ thông tin nào về các nút được chèn. Nếu nó có thể trả về đường dẫn đến các nút được chèn, chúng tôi có thể sử dụng nó để tìm nút hình ảnh chính xác mà chúng tôi nên cập nhật

Vì không có phương pháp nào ở trên hoạt động, chúng tôi áp dụng một

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

// dependencies imported as below.
import { withReact } from "slate-react";
import { createEditor } from "slate";

const editor = useMemo(() => withReact(createEditor()), []);

Với việc thực hiện hoàn tất cả ba bước, chúng tôi đã sẵn sàng để kiểm tra việc tải lên hình ảnh từ đầu đến cuối

Cùng với đó, chúng tôi đã hoàn thành Hình ảnh cho trình chỉnh sửa của mình. Hiện tại, chúng tôi hiển thị trạng thái tải có cùng kích thước bất kể hình ảnh. Đây có thể là một trải nghiệm khó chịu cho người dùng nếu trạng thái tải được thay thế bằng một hình ảnh lớn hơn hoặc nhỏ hơn nhiều khi quá trình tải lên hoàn tất. Một cách tốt để theo dõi trải nghiệm tải lên là lấy kích thước hình ảnh trước khi tải lên và hiển thị trình giữ chỗ có kích thước đó để quá trình chuyển đổi diễn ra liền mạch. Móc mà chúng tôi thêm ở trên có thể được mở rộng để hỗ trợ các loại phương tiện khác như video hoặc tài liệu và cũng hiển thị các loại nút đó

Sự kết luận

Trong bài viết này, chúng tôi đã xây dựng Trình chỉnh sửa WYSIWYG có bộ chức năng cơ bản và một số trải nghiệm người dùng nhỏ như phát hiện liên kết, chỉnh sửa liên kết tại chỗ và chỉnh sửa chú thích hình ảnh giúp chúng tôi tìm hiểu sâu hơn về SlateJS và các khái niệm về Chỉnh sửa văn bản có định dạng trong . Nếu không gian vấn đề xung quanh Chỉnh sửa văn bản có định dạng hoặc Xử lý văn bản này khiến bạn quan tâm, thì một số vấn đề thú vị cần giải quyết có thể là

• Sự hợp tác
• Trải nghiệm chỉnh sửa văn bản phong phú hơn hỗ trợ sắp xếp văn bản, hình ảnh nội tuyến, sao chép-dán, thay đổi phông chữ và màu văn bản, v.v.
• Nhập từ các định dạng phổ biến như tài liệu Word và Markdown

Nếu bạn muốn tìm hiểu thêm về SlateJS, đây là một số liên kết có thể hữu ích

• Ví dụ về SlateJS
  Rất nhiều ví dụ vượt xa những điều cơ bản và xây dựng các chức năng thường thấy trong Trình chỉnh sửa như Tìm kiếm & Đánh dấu, Xem trước Markdown và Đề cập.
• Tài liệu API
  Tham chiếu đến rất nhiều chức năng của trình trợ giúp được SlateJS đưa ra mà người ta có thể muốn sử dụng khi cố gắng thực hiện các truy vấn/chuyển đổi phức tạp trên các đối tượng SlateJS.

Cuối cùng, Kênh Slack của SlateJS là một cộng đồng rất tích cực gồm các nhà phát triển web đang xây dựng các ứng dụng Chỉnh sửa văn bản đa dạng thức bằng SlateJS và là nơi tuyệt vời để tìm hiểu thêm về thư viện và nhận trợ giúp nếu cần

Tôi có thể viết JavaScript trong trình soạn thảo văn bản không?

Notepad ++ có tốt cho JavaScript không?

Tôi nên sử dụng trình soạn thảo nào cho JavaScript?

Trình chỉnh sửa JavaScript miễn phí tốt nhất là gì?