从 jquery summernote 调用父组件函数

Posted 2023-03-22

【中文标题】从 jquery summernote 调用父组件函数

【英文标题】：calling parent component function from jquery summernote

【发布时间】：2021-08-11 18:52:48

【问题描述】：

我正在尝试调用我添加到 ngx-summernote 工具栏的自定义按钮组件之外的函数。我当前的代码如下。这无法编译，但我尝试过的所有其他编译方法都会给我一个错误，即它找不到函数。角 8。

test() 
    console.log('oh hai');
  


  customButton() 
    const ui = $.summernote.ui;
    const button = ui.button(
        contents: '<i class="note-icon-magic"></i> hello',
        tooltip: 'custom button',
        container: '.note-editor',
        className: 'note-btn',
        click: function() => 
          this.test()
        
      );
    return button.render();
  


  //summernote config
  config: any = 
    placeholder: 'Enter a description. You can #define up to 5 #hashtags.',
    height: "200px",
    uploadImagePath: "/api/upload",
    disableDragAndDrop: true,
    tabDisable: true,
    toolbar: [
      [
        "font",
        [
          "bold",
          "italic",
          "underline",
          "strikethrough",
          "superscript",
          "subscript",
          "color",
          "testBtn",
        ],
      ],
    ],
    buttons: 
      'testBtn' : this.customButton
    
  ;

【问题讨论】：

如果有效，请接受我的回答。

【参考方案1】：

在导入语句下方的顶部声明一个变量-

let thisContext;

在 ngOnInit 中用这个对象初始化它 -

ngOnInit() 
    thisContext = this;

在组件类中保留测试方法-

使用该变量调用 test() 函数 -

import  Component, OnInit  from '@angular/core';
import  FormControl, FormGroup, Validators  from '@angular/forms';
import  DomSanitizer  from '@angular/platform-browser';
import  codeBlockButton  from 'ngx-summernote';

declare var $;
let thisContext;
@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
 
  constructor(private sanitizer: DomSanitizer) 

  ngOnInit() 
    thisContext = this;
  

  
  test()
    console.log("hi");
  


function customButton(context) 
  const ui = $.summernote.ui;
  const button = ui.button(
    contents: '<i class="note-icon-magic"></i> Hello',
    tooltip: 'Custom button',
    container: '.note-editor',
    className: 'note-btn',
    click: function() 
      context.invoke('editor.insertText', 'Hello from test btn!!!');
      thisContext.test();
    
  );
  return button.render();

【讨论】：

@Daniel 你能提供一个 stackblitz 链接吗？只看代码很难调试。

@Daniel 尝试将自定义函数放入 Angular 组件中，然后尝试，忽略消毒剂

嗨，我也在与 Angular 集成。你能分享一下集成部分吗？