How to integrate into a angular 4 project

[sushmithakumar]

I have followed the steps but the example sample ones weren't sufficient to understand the integration to angular 4 project .Please help with this solution

[ShiruJan]

I can help you, I have integrated the project with Angular 5, what is the doubt you have?

[sushmithakumar]

Hello thanks for contacting me for the help! I had previously installed ng quill it worked in a sample angular 4 project,even I tried first by installing prime faces and then ng quill when integrated to my actual project it didn't work.

Then tried with ngx quill as it supports higher version s 2 and above.

I'm using webpack..not systemjs.. followed the same steps from the git but didn't work..

I have installed (npm install ngx editor --save)

Then in app.module.ts I have included import statement and decaltef in imports too.

In .ts file I have copied only

<quill-editor [(ngModel)]="editorContent" [options]="editorOptions" (blur)="onEditorBlured($event)" (focus)="onEditorFocused($event)" (ready)="onEditorCreated($event)" (change)="onContentChanged($event)"> That's it.After this I was confused where to insert where..

On Mar 21, 2018 9:44 PM, "ShiruJan" notifications@github.com wrote:

I can help you, I have integrated the project with Angular 5, what is the doubt you have?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/surmon-china/ngx-quill-editor/issues/47#issuecomment-374998917, or mute the thread https://github.com/notifications/unsubscribe-auth/AS9NWsBqaLO9wHvVJctuuLfMIyd9la7iks5tgnxvgaJpZM4SovsM .

[ShiruJan]

OK, I'll explain my case: I install: npm ngx-quill-editor --save

in app.module.ts:

import { QuillEditorModule } from 'ngx-quill-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QuillEditorModule,
  ], ...

Then, on the project:,

TS page: public my_string: string;

HTML page: <quill-editor name="detailEditTxt" [(ngModel)]="my_string"></quill-editor> This will place all the text, images and links to videos that you write in the variable "my_string". To see the result, just place a button that will run console.log (this.my_string).

Try it and tell me. In case of any error, please share it here.

Regards!

[sushmithakumar]

Ok.<quill-editor name="detailEditTxt" [(ngModel)]="my_string"></ quill-editor> In the place of my_string it should be something like this image ,bold ,italic is it? .I need to add snow.css style so should I place it in angular.cli.json file..to fetch it from there.

On Mar 21, 2018 11:46 PM, "ShiruJan" notifications@github.com wrote:

OK, I'll explain my case: I install: npm ngx-quill-editor --save

in pp.module.ts:

import { QuillEditorModule } from 'ngx-quill-editor';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, QuillEditorModule, ], ...

Then, on the project:,

TS page: public my_string: string;

HTML page: <quill-editor name="detailEditTxt" [(ngModel)]="my_string"> This will place all the text, images and links to videos that you write in the variable "my_string". To see the result, just place a button that will run console.log (this.my_string).

Try it and tell me. In case of any error, please share it here.

Regards!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/surmon-china/ngx-quill-editor/issues/47#issuecomment-375045361, or mute the thread https://github.com/notifications/unsubscribe-auth/AS9NWiusYwPwokv4tX74LVO8QOeRP39Tks5tgpjygaJpZM4SovsM .

[ShiruJan]

Hi! The variable "my_string" is the data model, this can be a simple string variable or an attribute of a data model. in this example, i use the variable "v_text":

Within the attribute or variable, all the content that is being introduced in the quill control will be stored, text with format, images (these are automatically converted to base64), links to videos, etc. Everything is stored in HTML format.

Into DataBase This would show the content inside the variable "v_text":

All that html text, you store it in database, you send it by mail, etc.

If you want to add a style sheet, what you comment is correct, your snow.css style sheet can be placed in the angular-cli.json file, in the "styles" section, example:

"styles": [          "styles.css",          "assets / styles / sidenav.css", ]

I hope I have helped you, if you have more questions, please write them here, to help you.

regards!

[sushmithakumar]

Thanks a lot it worked..Earlier had tried with ng quill worked for angular 2 project but not angular 4.With ngx quill it worked for angular 4 project when your way..Thanks a lot shiru and Charly.But I need only few tools like bold italic underline image and link with snow.css style integrated .How do I implement that?

On Mar 23, 2018 3:59 AM, "Charly" notifications@github.com wrote:

Hi! The variable "my_string" is the data model, this can be a simple string variable or an attribute of a data model. [image: captura de pantalla 2018-03-22 a la s 16 24 50] https://user-images.githubusercontent.com/11635458/37801861-ced3a580-2ded-11e8-8da5-d324087e551a.png

[image: captura de pantalla 2018-03-22 a la s 16 23 29] https://user-images.githubusercontent.com/11635458/37801880-db0acb12-2ded-11e8-9ee4-27fb332cca4d.png

Within the attribute or variable, all the content that is being introduced in the quill control will be stored, text with format, images (these are automatically converted to base64), links to videos, etc. Everything is stored in HTML format.

[image: captura de pantalla 2018-03-22 a la s 16 28 02] https://user-images.githubusercontent.com/11635458/37801922-09b23644-2dee-11e8-859c-7d04da51736e.png

[image: captura de pantalla 2018-03-22 a la s 16 25 58] https://user-images.githubusercontent.com/11635458/37801882-df2ac79c-2ded-11e8-81e0-0fdb5c6ce679.png

If you want to add a style sheet, what you comment is correct, your snow.css style sheet can be placed in the angular-cli.json file, in the "styles" section, example:

"styles": [ "styles.css", "assets / styles / sidenav.css", ]

I hope I have helped you, if you have more questions, please write them here, to help you.

regards!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/surmon-china/ngx-quill-editor/issues/47#issuecomment-375478527, or mute the thread https://github.com/notifications/unsubscribe-auth/AS9NWlqwmGKuzD-QdvrntOJdBj1kEwa4ks5thCXLgaJpZM4SovsM .

[ShiruJan]

haa ok!, In this web it will help you to personalize the editor: https://quilljs.com/docs/modules/toolbar/

ngx-quill-editor is developed based on quilljs.

Regards!

[sushmithakumar]

I have tried using this way but it didn't work as it had JavaScript in it.

On Mar 26, 2018 2:05 AM, "Charly" notifications@github.com wrote:

haa ok!, In this web it will help you to personalize the editor more: https://quilljs.com/docs/modules/toolbar/

ngx-quill-editor is developed based on quilljs.

Regards!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/surmon-china/ngx-quill-editor/issues/47#issuecomment-376001325, or mute the thread https://github.com/notifications/unsubscribe-auth/AS9NWh4XQh9nd9lcgYFpe1Xid2XgoKWkks5th_-egaJpZM4SovsM .

[ShiruJan]

Do not worry, you can use it in the same way, I'll show you an example:

HTML CODE

<quill-editor id="detailEditTxt" name="detailEditTxt" [(ngModel)]="var_detailString"
                    [options]="editorOptions">
                </quill-editor>

TYPE SCRIPT CODE

// Configurations
    // Specific options for toolbox
    public toolbarOptions = [['bold', 'italic'], ['link', 'image']];

    // Set options
    public editorOptions = {
        placeholder: 'Write your text here ...'
        , modules: {
            toolbar: this.toolbarOptions
          }
    };

[sushmithakumar]

I have tried with the options soon after that used ng serve command ,I got this as an error ..

On Mar 26, 2018 11:58 PM, "Charly" notifications@github.com wrote:

Do not worry, you can use it in the same way, I'll show you an example:

<quill-editor id="detailEditTxt" name="detailEditTxt" [(ngModel)]="e_ticket.detail" [options]="editorOptions">

// Configurations public toolbarOptions = [['bold', 'italic'], ['link', 'image']];

public editorOptions = {
    placeholder: 'Write your text here ...'
    , modules: {
        toolbar: this.toolbarOptions
      }
};

public toolbarOptions = [['bold', 'italic'], ['link', 'image']];

public editorOptions = {
    placeholder: 'Write your text here ...'
    , modules: {
        toolbar: this.toolbarOptions
      }
};

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/surmon-china/ngx-quill-editor/issues/47#issuecomment-376265440, or mute the thread https://github.com/notifications/unsubscribe-auth/AS9NWgqjROJmQLICPq4ydK_LAhYo2Vk3ks5tiTM_gaJpZM4SovsM .

[ShiruJan]

What is the error?

[sushmithakumar]

This is the error when used ng serve

[sushmithakumar]

Attached an error image

On Thu, Mar 29, 2018 at 9:19 PM, Charly notifications@github.com wrote:

What is the error?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/surmon-china/ngx-quill-editor/issues/47#issuecomment-377280363, or mute the thread https://github.com/notifications/unsubscribe-auth/AS9NWgCN7KtLelZwlXb46QMyhoXZERN4ks5tjQKXgaJpZM4SovsM .

[ShiruJan]

Please, attach too your code please.

[sushmithakumar]

npm ngx-quill-editor --save So 2.2.4 version got installed . In app.module.ts file import { QuillEditorModule } from 'ngx-quill-editor';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, QuillEditorModule, ], ... TS page: public my_string: string;

HTML page: <quill-editor name="detailEditTxt" [(ngModel)]="my_string">

Till here it was fine It appeared with all the tools in it. After that to customize where I needed only bold italic underline image and link For that I used Configurations // Specific options for toolbox public toolbarOptions = [['bold', 'italic'], ['link', 'image']];

// Set options
public editorOptions = {
    placeholder: 'Write your text here ...'
    , modules: {
        toolbar: this.toolbarOptions
      }
};

Initially it was working though it had one error.. For the semi-colon in the above piece of code. Then after doing some alterations with the comma and semicolon.It gave me this error when I tried to clean build the file ng build as initially with editor options I was getting one error but rendered on chrome later when used ng build and ng serve got webpack compile failed and the lines of error above attached.

[sushmithakumar]

After adding it started giving error as ngx quill editor not found..Then I changed this line import { QuillEditorModule } from 'ngx-quill-editor'; to import { QuillEditorModule } from './node_modules/ngx-quill-editor';

I'm using angular cli

[sushmithakumar]

1.5.0 and angular/compiler-cli version 5.0.0

[ShiruJan]

mmm ok, update the version to "ngx-quill-editor": "2.2.2" and you start again from the beginng.

When it works again, add the controls configuration.