Cách tuỳ chỉnh tinymce 6 theo ý muốn reactjs và nextjs

Setup tinymce chạy trên reactjs

Để cài đặt bạn sử dụng câu lệnh npm để cài đặt tinymce

 npm install --save @tinymce/tinymce-react

Cấu hình tinycme 

 import React, { useRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';

 export default function App() {
   const editorRef = useRef(null);
   const log = () => {
     if (editorRef.current) {
       console.log(editorRef.current.getContent());
     }
   };
   return (
     <>
       <Editor
         onInit={(evt, editor) => editorRef.current = editor}
         initialValue="<p>This is the initial content of the editor.</p>"
         init={{
           height: 500,
           menubar: false,
           plugins: [
             'advlist autolink lists link image charmap print preview anchor',
             'searchreplace visualblocks code fullscreen',
             'insertdatetime media table paste code help wordcount'
           ],
           toolbar: 'undo redo | formatselect | ' +
           'bold italic backcolor | alignleft aligncenter ' +
           'alignright alignjustify | bullist numlist outdent indent | ' +
           'removeformat | help',
           content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
         }}
       />
       <button onClick={log}>Log editor content</button>
     </>
   );
 }

Thêm button vào tinymce 6

Tinymce 6 cho dù có tốt đến mấy thì củng thiếu những chức năng bạn cần và tinymce biết đều đó nên họ đã cung cấp những api để giúp chúng ta có thể thêm những button mới với những tín năng tuỳ chỉnh như thêm ngày tháng, thêm một định dạng văn bản,...

Ở đây mình sử dụng tinymce để thêm button ngày giờ vào bài viết một cách nhanh chống, mong qua đoạn code này bạn sẽ hiểu và sáng tạo ra nhiều mẫu button khác:

Thêm toggle button vào tinymce 6

Nếu như button là thêm một đoạn văn bản, html sẵn vào editor thì toggle button sẽ giúp bạn làm những việc như định dạng văn bản, giống như bôi đen chữ, in nghiên chữ... chúng ta có thể bật tắt tuỳ thích, đó là công dụng của toggle button.

Đoạn code dưới đây sẽ thêm 2 toggle button, 1 button khi bấm rồi nó sẽ luôn ở chế độ bật (tức là active) cho dù bạn bấm vào đoạn text khác nó vẫn hiện, còn 1 button nó chỉ hiện bật tắt khi chọn đúng đoạn văn bản có sử dụng nó.

Xem xong đoạn code trên thì bạn sẽ đặt câu hỏi làm thế nào để tạo một formatter riêng? đừng quá nóng vọi vì mình sẽ chỉ nó cho bạn thông qua đoạn code dưới đây.

tinymce.init({
    selector: 'textarea#custom-toolbar-toggle-button',
    toolbar: 'customStrikethrough customToggleStrikethrough',
    formats: { //Thêm format với tên định dạng là zoneFormat
        zoneFormat: {
            block: "p", //Có thẻ là p và có class là zone
            classes: "zone"
        },
    },
    setup: (editor) => {
        //Đăng ký 1 thêm 1 toggle button có tên là zone
        editor.ui.registry.addToggleButton('zone', {
            text: 'Zone',//Tên hiển thị trên toolbar
            onAction: (api) => {
                //Khi bấm vào button zone thì sẽ thêm format tên là zoneFormat phí trên
                editor.execCommand('mceToggleFormat', false, 'zoneFormat')
            },
            onSetup: (api) => {
                //Xử lý ẩn hiện nút zone trên thanh toolbar
                api.setActive(editor.formatter.match('zoneFormat'));
                const changed = editor.formatter.formatChanged('zoneFormat', (state) => api.setActive(state));
                return () => changed.unbind();
            }
        },
            //Thêm từ khoá zone vào toolbar để nó xuất hiện
            toolbar: ' zone | undo redo visualblocks| formatselect | ' +
            'bold italic  backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
        'image media anchor | removeformat | code',
            //Thêm đoạn css xử lý phần zone nhớ là đoạn css này củng phải có ở phía client mới được nhé
            content_style: `.zone {
                background-color: #C7D2FE;
                padding: 1em;
                margin: 1em;
                border-radius: 0.3em;
              }`
});

Đây là phần zone mình đã tạo ra từ tinymce bằng cách sử dụng thể p và thêm class "zone", bây giờ việc cần làm là thêm đoạn css xử lý class zone mà chúng ta vừa tạo là chúng ta đã hoàn thành rồi.

Vậy những dữ liệu phức tạp hơn có thể hiển thị trên tinymce?

Việc thêm button hay toggleButton chỉ xử lý những tác vụ đơn giản, vậy làm thế nào để xứ lý những dữ liệu phức tạp hơn thì chúng ta cần kết hợp giữa việc thêm button và thêm window. Bài viết sắp tới mình sẽ hướng dẫn tiếp tục các bạn hãy đoán đọc nhé.