How to integrate into a angular 4 project about ngx-quill-editor

[sushmithakumar]

This is the error when used ng serve

[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
          }
    };

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

…

On Mar 21, 2018 9:44 PM, "ShiruJan" ***@***.***> 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 <#47 (comment)>, 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" ***@***.***> 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"></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! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#47 (comment)>, 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" ***@***.***> 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 <#47 (comment)>, 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" ***@***.***> 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 <#47 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS9NWh4XQh9nd9lcgYFpe1Xid2XgoKWkks5th_-egaJpZM4SovsM> .

[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" ***@***.***> 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"> </quill-editor> // 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 <#47 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS9NWgqjROJmQLICPq4ydK_LAhYo2Vk3ks5tiTM_gaJpZM4SovsM> .

[ShiruJan]

What is the error?

[sushmithakumar]

Attached an error image

…

On Thu, Mar 29, 2018 at 9:19 PM, Charly ***@***.***> wrote: What is the error? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#47 (comment)>, 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.