ng-2 ckeditor中的“自定义图像属性”对话框

时间:2018-11-21 06:19:54

标签: javascript angular ckeditor frontend

我在我的angular 6项目上使用ng-2 ckeditor,并且想要自定义“图像属性”对话框。

enter image description here

从上图中,我想隐藏“链接”和“高级”选项卡,也想隐藏URL和“替代文本”输入字段。

我找到了完成工作的方法,但是它仅适用于CK Editor4。

以下是代码:

CKEDITOR.on( 'dialogDefinition', function( ev ) {
      on('dialogDefinition', function(ev) {
      var dialogName = ev.data.name;
      var dialogDefinition = ev.data.definition;

      if (dialogName == 'image') {
          var infoTab = dialogDefinition.getContents( 'info' );
          infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
          infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
          infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
          infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
          infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info

          //Remove tab Link
          dialogDefinition.removeContents( 'Link' );
      }
    });
  }

我也尝试在有角度的地方使用它

这是我的代码:

let editor = this.ckeditor.instance;


    editor.instance.document.on('dialogDefinition', function(ev) {
      var dialogName = ev.data.name;
      var dialogDefinition = ev.data.definition;

      if (dialogName == 'image') {
          var infoTab = dialogDefinition.getContents( 'info' );
          infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
          infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
          infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
          infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
          infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info

          //Remove tab Link
          dialogDefinition.removeContents( 'Link' );
      }
    });

在ng-2 ckeditor中是否有任何方法可用于自定义此“图像属性”对话框。

0 个答案:

没有答案