自訂標題列和工具列

Last update: Thu Jul 18 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

使用者
管理員

若要自訂topbar和toolbar，我們將使用ID： topbar或toolbar，並遵循相同的檢視、控制器結構。

以下是工具列自訂的簡單範例。我們已移除「Insert Numbered List」按鈕，並使用自訂的點按處理常式將「Insert Paragraph」按鈕取代為我們自己的元件。

若要存取proxy物件下公開的功能，我們需要使用this.proxy.getValue存取它，以表示擷取值。

const toolbarExtend = {
    id: "toolbar",
    view: {
        items: [
            {
                component: "div",
                target: {
                    key:"title",value: "Insert Numbered List",
                    viewState: VIEW_STATE.REPLACE
                }
            },
            {
                {
                    "component": "button",
                    "icon": "textParagraph",
                    "variant": "action",
                    "quiet": true,
                    "title": "Insert Paragraph",
                    "on-click": "INSERT_P"
                },

                target: {
                    key:"title",value: "Insert Paragraph",
                    viewState: VIEW_STATE.REPLACE
                }
            },
        ]
    },
    controller: {
        init: function() {
            console.log(this.proxy.getValue("canUndo"))
            this.proxy.subscribeAppEvent({
              key: "editor.preview_rendered",
              next: async function (e) {
                console.log(this.proxy.getValue("canUndo"))
              }.bind(this)
            })
        },
        INSERT_P(){
            this.next("AUTHOR_INSERT_ELEMENT",  "p" )
        }
    }
}

recommendation-more-help

11125c99-e1a1-4369-b5d7-fb3098b9b178