CODEWITHSUNDEEP
angularrich-text-editorfont-familyrichtextkolkov-editor
boulaares khawla
boulaares khawla

Reputation: 31

Angular Editor rich text kolkov library font family issue

i'm using Angular Editor rich text for editing text styling... i have an issue with changing th font family, it's always disabled to select a choice from the list, the selected one is the as defaultFontName.

this is the configuration

config: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: '10rem',
minHeight: '5rem',
translate: 'no',
placeholder: 'Enter text here ....',
defaultFontName: 'Comic Sans MS',
defaultFontSize:'3',
defaultParagraphSeparator: 'p',
fonts: [
    {class: 'arial', name: 'Arial'},
    {class: 'times-new-roman', name: 'Times New Roman'},
    {class: 'calibri', name: 'Calibri'},
    {class: 'comic-sans-ms', name: 'Comic Sans MS'}
  ],
customClasses: [
  {
    name: 'Quote',
    class: 'quoteClass',
  },
  {
    name: 'Title Heading',
    class: 'titleHead',
    tag: 'h1',
  },
],
sanitize: false,
toolbarHiddenButtons:[
    ['insertImage'],
    ['insertVideo'],
    ['backgroundColor','customClasses'],
    ['insertOrderedList', 'insertUnorderedList'],
    ['link', 'unlink','toggleEditorMode']
]

anyone has any idea why is it always disabled and thank you.

Upvotes: 3

Views: 4297

Answers (4)

jackz_sparrow
jackz_sparrow

Reputation: 37

I was facing the same problem and solved it using following steps

Checked my style.scss, there I found the following

* {

font-family: 'poppins'

}

I removed it and applied the same on body and it worked.

Thanks to the following post https://github.com/kolkov/angular-editor/issues/217#issuecomment-820259174

Upvotes: 0

Muhammed Musthafa KP
Muhammed Musthafa KP

Reputation: 53

In this case Event you mapped in angular-editor is mouseup like (mouseup)="onPointerDown()" which typically corresponds to a mouse button being released so change mouseup to (click)="onPointerDown()"

this will solve the issue

Upvotes: 0

Mansi
Mansi

Reputation: 1

In my case the issue was in my same component I had 2 different editors , I removed other editor and I was able to select Font-Family.

Upvotes: 0

Joshna J.U
Joshna J.U

Reputation: 27

have to add one of the following in your angular.json,

"assets": [
              "src/favicon.gif",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@kolkov/angular-editor/assets/",
                "output": "./assets/fonts/"
              }
            ],

   "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@kolkov/angular-editor/assets/",
                "output": "./assets/fonts/"
              }
            ],

Upvotes: 0

Related Questions