Angular 5 中的自定义工具栏

Question

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

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

我需要在 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
            });
        };
    }
}

Angular 5 中的自定义工具栏

Custom Toobar in Angular5

tinymce-4

angular5