kolkov / angular-editor

A simple native WYSIWYG editor component for Angular 6 -14+
https://angular-editor.kolkov.ru
MIT License
672 stars 355 forks source link

Hiding Buttons not possible for version @kolkov/angular-editor@0.18.8 #221

Open AjeetRE opened 4 years ago

AjeetRE commented 4 years ago

When I do this

config: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: "15rem",
    minHeight: "5rem",
    placeholder: "Enter text here...",
    translate: "no",
    defaultParagraphSeparator: "p",
    defaultFontName: "Arial",
    toolbarHiddenButtons: [["bold"]]
  };

It throws error

'toolbarHiddenButtons' does not exist in type 'AngularEditorConfig'

here is AngularEditorConfig interface

config.d.ts

export interface AngularEditorConfig {
    editable?: boolean;
    spellcheck?: boolean;
    height?: 'auto' | string;
    minHeight?: '0' | string;
    maxHeight?: 'auto' | string;
    width?: 'auto' | string;
    minWidth?: '0' | string;
    translate?: 'yes' | 'now' | string;
    enableToolbar?: boolean;
    showToolbar?: boolean;
    placeholder?: string;
    defaultParagraphSeparator?: string;
    defaultFontName?: string;
    defaultFontSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | string;
    uploadUrl?: string;
    fonts?: Font[];
    customClasses?: CustomClass[];
    sanitize?: boolean;
    toolbarPosition?: 'top' | 'bottom';
}

Is it necessary to use version 1.0.0 and above to get hiding buttons working? as I'm working on Angular 7.

sjmamani commented 4 years ago

Unfortunately you have to upgrade to Angular 8 or more to get work this funcionality. toolbarHiddenButtons is only for version 1.0.0

sjmamani commented 4 years ago

Unfortunately you have to upgrade to Angular 8 or more to get work this funcionality. toolbarHiddenButtons is only for version 1.0.0

Here is what i'm using to hide buttons. In your component style file:

/deep/ .angular-editor-toolbar-set {
  .block-label {
    display: none;
  }
}

/deep/ .angular-editor-button[title='Subscript'],
/deep/ .angular-editor-button[title='Insert Link'],
/deep/ .angular-editor-button[title='Superscript'],
/deep/ .angular-editor-button[title='Text Color'],
/deep/ .angular-editor-button[title='Insert Image'],
/deep/ .angular-editor-button[title='Background Color'],
/deep/ .angular-editor-button[title='Custom Style'],
/deep/ .angular-editor-button[title='Insert Video'],
/deep/ .angular-editor-button[title='Horizontal Line'],
/deep/ .angular-editor-button[title='Clear Formatting'],
/deep/ .angular-editor-button[title='HTML Code'],
/deep/ .angular-editor-button[title='Font Name'],
/deep/ .angular-editor-button[title='Font Size'],
/deep/ #fontSizeSelector-,
/deep/ #fontSelector-,
/deep/ #heading-,
/deep/ #unlink-,
/deep/ #customClassSelector- {
  display: none;
}
fahimehahmadi94 commented 1 month ago

Please go and see this page

https://github.com/kolkov/angular-editor/issues/544