surmon-china/ngx-quill-editor

How to integrate into a angular 4 project

sushmithakumar opened this issue · 18 comments

sushmithakumar commented

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 commented

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

sushmithakumar commented
ShiruJan commented

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 commented
ShiruJan commented

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":

captura de pantalla 2018-03-22 a la s 16 31 18

captura de pantalla 2018-03-22 a la s 16 23 29

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.

captura de pantalla 2018-03-22 a la s 16 28 02

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

captura de pantalla 2018-03-22 a la s 16 25 58

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 commented
ShiruJan commented

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 commented
ShiruJan commented

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
          }
    };
  • 👍1
sushmithakumar commented
ShiruJan commented

What is the error?

sushmithakumar commented

2018-03-28-18-42-38
This is the error when used ng serve

  • 👍2
sushmithakumar commented
ShiruJan commented

Please, attach too your code please.

sushmithakumar commented

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 commented

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 commented

1.5.0 and angular/compiler-cli version 5.0.0

ShiruJan commented

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.