-
-
Notifications
You must be signed in to change notification settings - Fork 54
How to integrate into a angular 4 project #47
Comments
I can help you, I have integrated the project with Angular 5, what is the doubt you have? |
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>
.
|
OK, I'll explain my case: in app.module.ts:
Then, on the project:, TS page: HTML page: Try it and tell me. In case of any error, please share it here. Regards! |
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>
.
|
Hi! 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 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": [ I hope I have helped you, if you have more questions, please write them here, to help you. regards! |
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>
.
|
haa ok!, ngx-quill-editor is developed based on quilljs. Regards! |
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>
.
|
Do not worry, you can use it in the same way, I'll show you an example: HTML CODE
TYPE SCRIPT CODE
|
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>
.
|
What is the error? |
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>
.
|
Please, attach too your code please. |
npm ngx-quill-editor --save @NgModule({ HTML page: Till here it was fine
Initially it was working though it had one error.. |
After adding it started giving error as ngx quill editor not found..Then I changed this line I'm using angular cli |
1.5.0 and angular/compiler-cli version 5.0.0 |
mmm ok, When it works again, add the controls configuration. |
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
The text was updated successfully, but these errors were encountered: