WYSIWYG

Topic: WYSIWYG

ATPIT asked 8 months ago

I am using the WYSIWYG Editor plugin.

The Editor appears as expected and the buttons work by adding the desired effect.

My issue is with the dropdowns as the do not appear when clicked.

I have the following in my styles.scss: @import '@fortawesome/fontawesome-free/css/all.css'; @import 'mdb-angular-wysiwyg/scss/wysiwyg.scss';

I have the following in my app.module.ts:

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, } from '@angular/common/http';

import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { MsalRedirectComponent } from '@azure/msal-angular';
import { MsalConfigDynamicModule } from './msal-config-dynamic.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import localeDa from '@angular/common/locales/da';
import { registerLocaleData } from '@angular/common';

import { MdbDragAndDropModule } from 'mdb-angular-drag-and-drop';
import { MdbWysiwygModule } from 'mdb-angular-wysiwyg';
import { FormsModule } from '@angular/forms';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
registerLocaleData(localeDa);

  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    MsalConfigDynamicModule.forRoot('assets/configuration.json'),
    CoreModule,
    SharedModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MdbDragAndDropModule,
    MdbWysiwygModule,
    FormsModule,
    MdbDropdownModule,
    MdbTooltipModule
  ],

I have the following in my component.ts:

@ViewChild('wysiwyg') wysiwyg!: MdbWysiwygComponent;

And this in my component.html

<mdb-wysiwyg #wysiwyg [value]="htmlValue"></mdb-wysiwyg>

Add comment

Rafał Seifert answered 8 months ago

0 0 Best answer

Please try adding:

import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';

to your imports. Please let me know if that helped you.

ATPIT commented 8 months ago

I am guessing that they are to be added to my app.module.ts? I tried this but there are still no dropdowns.

Rafał Seifert commented 8 months ago

Yes, they should be added also into imports array in app.module Could you please edit your post and provide an exact or simpler example how you try to implement the dropdowns? Meaby you have some syntax error.

ATPIT commented 8 months ago

I have added code snippets from my component.ts and component.html with how I try to implement the Wysiwyg editor.

Rafał Seifert commented 8 months ago

Have you added @import "mdb-angular-ui-kit/assets/scss/mdb.scss"; to your styles.scss ?

ATPIT commented 8 months ago

I tried it, and it seemed to mess with a lot of my styling. However, it did not make the dropdowns appear.

Rafał Seifert commented 8 months ago

Did you import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; to your app? Do you get any console errors?

ATPIT commented 8 months ago

I have the BrowserAnimationsModule and there are no console errors.

To be completely clear, I have added all the imports in my post. Just to avoid any confusion.

Add comment

Rafał Seifert answered 8 months ago

0 0 Best answer

I have created a new angular 16 app and installed MDB 5.1.0 with wyswig plugin. Here's how my code looks. Wysiwyg works, tooltips and dropdowns too. Please try to copy my code and try this basic setup.

Template:

<mdb-wysiwyg></mdb-wysiwyg>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MdbWysiwygModule } from 'mdb-angular-wysiwyg';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MdbWysiwygModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.scss

@import '@fortawesome/fontawesome-free/css/all.css';
@import "mdb-angular-ui-kit/assets/scss/mdb.scss";
@import 'mdb-angular-wysiwyg/scss/wysiwyg.scss';

I am not sure how else could I help you. Have you tried to follow our offical plugins installation docs?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: MDB5 5.1.0
Device: PC
Browser: Edge
OS: Windows
Provided sample code: No
Provided link: No

ATPIT

Pro User

0Support score
3Questions 0Answers

0Snippets likes 0Snippets