CODEWITHSUNDEEP
angularfroala
Ajith
Ajith

Reputation: 845

Why froala editor not appears?

I have included froala editor in my angular2 project it din't seems to appear on the screen and no errors. I have imported the required modules to app.module.ts and imported the jquery into main.ts and included the scripts and styles in the angular.cli.json

app.component.ts

<div [froalaEditor]>Hello, Froala!</div>

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { TinyEditorComponent } from './tiny-editor/tiny-editor.component';
 import { SortPipe } from "app/newpipe";
 import "froala-editor/js/froala_editor.pkgd.min.js";
 import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-
 wysiwyg';
 @NgModule({
  declarations: [
  AppComponent,
  TinyEditorComponent,
  SortPipe
  ],
  imports: [
  BrowserModule,
  FormsModule,
  FroalaEditorModule.forRoot(), FroalaViewModule.forRoot()
  ],
   providers: [SortPipe],
   bootstrap: [AppComponent]
  })
 export class AppModule { }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import * as $ from 'jquery';
window["$"] = $; 
window["jQuery"] = $;
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

The reason why didnt appears on the browser?

Upvotes: 0

Views: 1826

Answers (2)

VIKAS KOHLI
VIKAS KOHLI

Reputation: 8430

I found the same problem but somehow I able to found the solution

// app.module.ts file
import "froala-editor/js/froala_editor.pkgd.min.js";  
// just above:
import { FroalaEditorModule, FroalaViewModule } from 'angular2-froala-wysiwyg';

// and then in main.ts:
import * as $ from 'jquery'; window["$"] = $; window["jQuery"] = $;

Please refer this link for more info https://github.com/froala/angular-froala-wysiwyg/issues/17

Upvotes: 0

John Laugerman
John Laugerman

Reputation: 36

app.component.html

<!-- Include Editor style. -->
<link href="css/froala_editor.pkgd.min.css" rel="stylesheet" />
<link href="css/froala_style.min.css" rel="stylesheet" />
<!-- Include Editor JS files. -->
<script src="js/froala_editor.pkgd.min.js"></script>

<div id="froala-editor" [froalaEditor] [(froalaModel)]="content"></div>

app.component.ts

$('div#froala-editor').froalaEditor({ });

Upvotes: 1

Related Questions