自定义标题栏和工具栏

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

创建对象：

undefined
undefined

要自定义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