import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { UEditorModule } from 'ngx-ueditor';

@NgModule({
  imports: [ 
    BrowserModule,
    FormsModule,
    UEditorModule.forRoot({
      js: [
        `./assets/ueditor/ueditor.config.js`,
        `./assets/ueditor/ueditor.all.min.js`,
      ],
      // 默认前端配置项
      options: {
        UEDITOR_HOME_URL: './assets/ueditor/'
      }
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

export class DemoComponent {
  @ViewChild('full') full: UEditorComponent;
  constructor(private el: ElementRef) {}

  getAllHtml() {
    // 通过 `this.full.Instance` 访问ueditor实例对象
    alert(this.full.Instance.getAllHtml())
  }
}

// 事件监听
this.full.addListener('focus', () => {
  this.focus = `fire focus in ${new Date().getTime()}`;
});
// 事件移除
this.full.removeListener('focus');

onPreReady(comp: UEditorComponent) {
  UE.registerUI('button', function(editor, uiName) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
      execCommand: function() {
        alert('execCommand:' + uiName)
      }
    });
    //创建一个button
    var btn = new UE.ui.Button({
      //按钮的名字
      name: uiName,
      //提示
      title: uiName,
      //添加额外样式，指定icon图标，这里默认使用一个重复的icon
      cssRules: 'background-position: -500px 0;',
      //点击时执行的命令
      onclick: function() {
        //这里可以不用执行命令,做你自己的操作也可
        editor.execCommand(uiName);
      }
    });
    //当点到编辑内容上时，按钮要做的状态反射
    editor.addListener('selectionchange', function() {
      var state = editor.queryCommandState(uiName);
      if (state == -1) {
        btn.setDisabled(true);
        btn.setChecked(false);
      } else {
        btn.setDisabled(false);
        btn.setChecked(state);
      }
    });
    //因为你是添加button,所以需要返回这个button
    return btn;
  }, 5, comp.id);
  // comp.id 是指当前UEditor实例Id
}

UEditorModule.forRoot({
    js: [
      `./assets/ueditor/ueditor.config.js`,
      `./assets/ueditor/ueditor.all.min.js`,
    ],
    // 默认前端配置项
    options: {
      UEDITOR_HOME_URL: './assets/ueditor/'
    },
    hook: (UE: any): void => {
      // button 自定义按钮将在所有实例中有效。
      UE.registerUI('button', function(editor, uiName) {
        //注册按钮执行时的command命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function() {
            alert('execCommand:' + uiName)
          }
        });
        //创建一个button
        var btn = new UE.ui.Button({
          //按钮的名字
          name: uiName,
          //提示
          title: uiName,
          //添加额外样式，指定icon图标，这里默认使用一个重复的icon
          cssRules: 'background-position: -500px 0;',
          //点击时执行的命令
          onclick: function() {
            //这里可以不用执行命令,做你自己的操作也可
            editor.execCommand(uiName);
          }
        });
        //当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function() {
          var state = editor.queryCommandState(uiName);
          if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
          } else {
            btn.setDisabled(false);
            btn.setChecked(state);
          }
        });
        //因为你是添加button,所以需要返回这个button
        return btn;
      });
    }
})