Trình chỉnh sửa SoOn

SoOn Editor là trình soạn thảo văn bản đa dạng thức của SoOn. Nguồn của nó có thể được tìm thấy trong thư mục odoo-editor.

Hộp phát điện

Powerbox là một phần giao diện người dùng chứa commands được sắp xếp thành categories. Nó xuất hiện khi gõ / trong trình chỉnh sửa. Các lệnh có thể được lọc khi người dùng nhập văn bản và điều hướng bằng các phím mũi tên.

Powerbox mở sau khi gõ "/".

Sửa đổi hộp điện

Tại thời điểm đó, chỉ nên khởi tạo một Powerbox và công việc đó do chính người biên tập thực hiện. Phiên bản Powerbox của nó có thể được tìm thấy trong biến phiên bản powerbox của nó. Để thay đổi nội dung và tùy chọn của Powerbox, hãy thay đổi các tùy chọn được chuyển tới trình chỉnh sửa trước khi nó được khởi tạo.

Quan trọng

Không bao giờ tự mình khởi tạo Powerbox. Thay vào đó, hãy luôn sử dụng phiên bản riêng của trình soạn thảo hiện tại.

Example

Giả sử chúng ta muốn thêm lệnh mới Document vào Powerbox, chỉ dành cho mô-đun mass_mailing. Chúng tôi muốn thêm nó vào một danh mục mới gọi là Tài liệu và chúng tôi muốn nó ở đầu Powerbox.

mass_mailing mở rộng lớp Wysiwyg của web_editor <https:/ /github.com/odoo/odoo/blob/17.0/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js>`_, khởi tạo trình soạn thảo theo phương thức start của nó. Trước khi làm như vậy, nó gọi phương thức _getPowerboxOptions của riêng nó, phương thức này có thể được ghi đè một cách thuận tiện để thêm các lệnh mới của chúng ta.

mass_mailing đã ghi đè _getPowerboxOptions, nên hãy thêm lệnh mới của chúng ta vào đó:

_getPowerboxOptions: function () {
    const options = this._super();
    // (existing code before the return statement)
    options.categories.push({
        name: _t('Documentation'),
        priority: 300,
    });
    options.commands.push({
        name: _t('Document'),
        category: _t('Documentation'),
        description: _t("Add this text to your mailing's documentation"),
        fontawesome: 'fa-book',
        priority: 1, // This is the only command in its category anyway.
    });
    return options;
}

Quan trọng

Để cho phép dịch tên và mô tả của các lệnh và danh mục của bạn, hãy đảm bảo gói chúng trong hàm _t.

Mẹo

Để tránh leo thang ngoài tầm kiểm soát, đừng sử dụng các số ngẫu nhiên cho mức độ ưu tiên của bạn: hãy xem những mức độ ưu tiên nào khác đã tồn tại và chọn giá trị tương ứng (giống như bạn làm với z-index).

Mở Powerbox tùy chỉnh

Có thể mở Powerbox bằng một bộ danh mục và lệnh tùy chỉnh, bỏ qua tất cả các danh mục và lệnh có sẵn. Để làm điều đó, hãy gọi phương thức open của Powerbox và truyền cho nó các lệnh và danh mục tùy chỉnh của bạn.

The Powerbox opened with custom categories and commands when pasting an image URL.

Example

Chúng tôi cần phiên bản hiện tại của Powerbox, có thể tìm thấy phiên bản này trong trình chỉnh sửa hiện tại. Trong Lớp Wysiwyg, bạn sẽ tìm thấy nó dưới dạng this.odooEditor .powerbox.

Bây giờ, hãy mở nó bằng lệnh "Tài liệu" tùy chỉnh của chúng tôi trong danh mục "Tài liệu" tùy chỉnh:

this.odooEditor.powerbox.open(
    [{
        name: _t('Document'),
        category: _t('Documentation'),
        description: _t("Add this text to your mailing's documentation"),
        fontawesome: 'fa-book',
        priority: 1, // This is the only command in its category anyway.
    }],
    [{
        name: _t('Documentation'),
        priority: 300,
    }]
);

Lệnh lọc

Có ba cách để lọc lệnh:

  1. Thông qua powerboxFilters Powerbox option.

  2. Thông qua mục nhập isDisabled của command.

  3. Người dùng có thể lọc các lệnh bằng cách chỉ cần gõ văn bản sau khi mở Powerbox. Nó sẽ khớp văn bản đó với tên của các danh mục và lệnh.

Powerbox với các lệnh được lọc bằng từ "head".

Thẩm quyền giải quyết

Loại

Tên

Kiểu

Sự miêu tả

tên

chuỗi

tên của danh mục

ưu tiên

số

dùng để sắp xếp danh mục: danh mục có mức độ ưu tiên cao hơn sẽ được hiển thị cao hơn trong Powerbox (các danh mục có cùng mức độ ưu tiên được sắp xếp theo thứ tự bảng chữ cái)

Ghi chú

Nếu có nhiều danh mục có cùng tên, chúng sẽ được nhóm thành một. Ưu tiên của nó sẽ được xác định trong phiên bản của danh mục được khai báo lần cuối.

Yêu cầu

Tên

Kiểu

Sự miêu tả

tên

chuỗi

tên của lệnh

danh mục

chuỗi

tên của danh mục mà lệnh thuộc về

tả

chuỗi

một đoạn văn ngắn để mô tả lệnh

phông chữ tuyệt vời

chuỗi

tên của Phông chữ tuyệt vời sẽ đóng vai trò là biểu tượng của lệnh

ưu tiên

số

dùng để sắp xếp lệnh: lệnh có mức độ ưu tiên cao hơn hiển thị cao hơn trong Powerbox (các lệnh có mức độ ưu tiên tương tự được sắp xếp theo thứ tự bảng chữ cái)

gọi lại

hàm (() => void)

chức năng thực thi khi lệnh được chọn (có thể không đồng bộ)

isDisabled (tùy chọn)

hàm (() => void)

một hàm được sử dụng để vô hiệu hóa lệnh trong một số điều kiện nhất định (khi nó trả về true, lệnh sẽ bị vô hiệu hóa)

Ghi chú

Nếu lệnh trỏ tới một danh mục chưa tồn tại thì danh mục đó sẽ được tạo và thêm vào cuối Powerbox.

Tùy chọn

Các tùy chọn sau có thể được chuyển tới SoOnEditor, sau đó sẽ được chuyển đến phiên bản của Powerbox:

Tên

Kiểu

Sự miêu tả

lệnh

mảng lệnh

các lệnh để thêm vào mặc định được xác định bởi trình soạn thảo

danh mục

mảng danh mục

các danh mục để thêm vào mặc định được xác định bởi trình soạn thảo

Bộ lọc hộp điện

mảng hàm (lệnh => lệnh)

hàm dùng để lọc lệnh hiển thị trong Powerbox

getContextFromParentRect

hàm (() => DOMRect)

một hàm trả về DOMRect của tổ tiên của trình soạn thảo (có thể hữu ích khi trình soạn thảo ở trong iframe)