WYSIWYG

Topic: WYSIWYG

ATPIT free 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 free 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:

app.module.ts

<pre class="prettyprint"><code>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 { }
</code></pre>

styles.scss

<pre class="prettyprint"><code>@import '@fortawesome/fontawesome-free/css/all.css';
@import "mdb-angular-ui-kit/assets/scss/mdb.scss";
@import 'mdb-angular-wysiwyg/scss/wysiwyg.scss';
</code></pre>

I am not sure how else could I help you. Have you tried to follow our <a href="https://mdbootstrap.com/docs/angular/pro/plugins-installation/" target="_blank">offical plugins installation</a> docs?

Please insert min. 20 characters.

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

Rafał Seifert free 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 free 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 free 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 free 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 free commented 8 months ago

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

ATPIT free 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 free commented 8 months ago

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

ATPIT free 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

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

ForumUser: Free
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

0Support score
3Questions 0Answers 0Snippets