Angular5中的自定义Toobar

Question

我们是否可以在Angular代码中添加自定义工具栏？

https://www.tinymce.com/docs/demo/custom-toolbar-menu-button/ 这是自定义工具栏的链接。

我需要在Angular5中得到它。

Answer 1

您可以通过我们的组件将您自己的配置传递给编辑器，以便将TinyMCE集成到Angular中：

https://www.tinymce.com/docs/integrations/angular2/#usingthecomponentinyourtemplates

请特别参阅init参数。

Answer 2

Michael的答案是正确的，但我发现必须在适当的范围内定义按钮的回调函数。我已经在环境中定义了配置，如上所述。按钮功能在组件的构造函数中初始化，因此我可以完全访问我的组件变量和方法。

在environment.ts：

    tinyMceOptions: {
    toolbar: 'repo'
},

在Component.ts：

export class MyComponent implements OnInit{
    tinymceOptions = environment.tinyMceOptions;

    constructor() {
        let component = this;
        this.tinymceOptions["setup"] = function setup(editor: any) {

            function repo() {
                component.myfunction()
            }

            editor.addButton('repo', {
                icon: 'browse',
                tooltip: "Browse Document Repository",
                onclick: repo
            });
        };
    }
}