Quilljs + Highlightjs trong NextJS

QuillJS là gì?

"Quill" là bút lông là một công cụ viết được làm từ lông vũ của một loài chim lớn. Bút lông đã được sử dụng để viết bằng mực trước khi phát minh ra bút nhúng, bút có ngòi kim loại, bút máy, bút bi. À không đó là quill, còn QuillJS là một thư viện js có tính năng soạn thảo văn bản có chứ nhiều nội dung ngoài `text`, còn gọi là rich text editor hay WYSIWYG (viết tắt của What You See Is What You Get). Các công cụ dùng giao diện này cho phép ta có thể thấy ngay những thay đổi mà người viết mã, hay một thiết kế viên web vừa thực hiện, nhằm tiết kiệm thời gian chỉnh sửa các lỗi hay những điểm không ưng ý một cách dễ dàng và nhanh chóng.

Mình có sử dụng vài cách để tích hợp Quilljs vào blog của mình với NextJS, sau khi sửa đi sửa lại cả chục lần mình quyết định gắn quilljs thuần thay vì import ReactQuill, vừa dễ dùng lại nhẹ phần code của mình, chỉ load khi cần.

Dùng như nào?

OK! bỏ qua mấy bước tạo file lằng nhằng, vào thẳng vấn để. Bắt đầu thôi.

Trong component muốn dùng quill, tạo 2 biến state để kiểm tra quá trình load code và một ref để gắn quill vào

const [isLoadQuill, setIsLoadQuill] = useState(false);
const [isLoadHighlight, setIsLoadHighlight] = useState(false);
const quillRef = useRef<any>(null);

Dùng thẻ Script của `next/script` để load quill và highlight một cách riêng biệt không cần quan tâm tới những phần khác, props `onReady` sẽ chạy mỗi khi thư viên sẵn sàng (mỗi lần component re-render onReady sẽ chạy lại)

Nhớ là load css trước nữa nhé.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css"/>

<Script  
 onReady={() => {
  (window as any).hljs.configure({
     languages: ['javascript', 'css', 'html', 'typescript']
   });setIsLoadHighlight(true);
  }
 }
 src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"
/>

<Script  
 id="quill"  
 onReady={() => {
   setIsLoadQuill(true)
 }}
 src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" 
/>

Khởi tạo element editor, phần này sẽ được dùng cho các thao tác edit

<div id="editor" dangerouslySetInnerHTML={{ __html: post.content }}></div>

Rồi vậy là đã load xong thành phần cần thiết, giời mình inject quill vào "#editor" là ok. `module` và `formats` là config của quill bạn có thể xem thêm ở đây

useEffect(() => {
  if (isLoadQuill && isLoadHighlight && post.uid) {
    quillRef.current =  new (window as any).Quill('#editor', {
     theme: 'snow',
     modules,
     formats
    });
  }
}, [isLoadHighlight, isLoadQuill]);

Vì quill tự quản lý data riêng của nó (tên là delta), nên bạn không cần phải dùng state hay value cho nó.

Vậy là đã xong 90%, ta đã có thể thao tác gõ văn bản và chỉnh sửa style bình thường

Get Data

Khi muốn lấy data thì chỉ cần dùng biến quillRef.current rồi sẽ dùng được những hàm cơ bản có sẵn của quill.

 quill.root.innerHTML

dùng lấy code HTML những gì bạn đang thấy.

 quill.getText()

chỉ lấy nội dung văn bản.

xem thêm ở đây

const onSave = function (mode: string) {
  const quill = quillRef.currentif (quill) {
    const updatePost  = {
      ...post,draffContent: quill.root.innerHTML,
      thumbText: quill.getText().slice(0, 100),
    }
    updatePost.isPublished = mode === 'publish' || post.isPublished;
    props.onSubmit(updatePost);
  }
}

Vậy là xong.

[Source]

Happy coding!

Quilljs + Highlightjs trong NextJS

QuillJS là gì?

Dùng như nào?

Get Data

Comments