Cloning Medium like editor in angular using ngx-quill ?

[nikhilrajnair]

I need to implement a medium like editor using ngx-quill in my project ? is there any way to do as per this https://quilljs.com/guides/cloning-medium-with-parchment/ . ?

[KillerCodeMonkey]

You can do it. Use the CSS and Icon Fonts. You can create a custom toolbar with your own HTML See the readme Part about IT.

I will Not give You the solution Here ;).

Am Di., 13. Nov. 2018, 14:21 hat Nikhil Raj A notifications@github.com geschrieben:

I need to implement a medium like editor using ngx-quill in my project ? is there any way to do as per this https://quilljs.com/guides/cloning-medium-with-parchment/ . ?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/285, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYJ1aaCF2DzvpID88ekd1XXegxWbhks5uusdrgaJpZM4Ybo0u .

[KillerCodeMonkey]

Annnd Check Out quilljs themes and how to build a custom one

Am Di., 13. Nov. 2018, 14:26 hat Bengt Weiße bengtler@googlemail.com geschrieben:

You can do it. Use the CSS and Icon Fonts. You can create a custom toolbar with your own HTML See the readme Part about IT.

I will Not give You the solution Here ;).

Am Di., 13. Nov. 2018, 14:21 hat Nikhil Raj A notifications@github.com geschrieben:

I need to implement a medium like editor using ngx-quill in my project ? is there any way to do as per this https://quilljs.com/guides/cloning-medium-with-parchment/ . ?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/285, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYJ1aaCF2DzvpID88ekd1XXegxWbhks5uusdrgaJpZM4Ybo0u .

[nikhilrajnair]

can you please help me on it i'm a newbie in Angular @KillerCodeMonkey I can implement that theme based one using bubble theme but i need it like https://quilljs.com/guides/cloning-medium-with-parchment/ demo: https://codepen.io/quill/pen/qNJrYB

[nikhilrajnair]

i almost integrate it , but i can not pass the data into server ,because of the ([ngModel]) fails on it !

<div id="editor-container">
     <!-- <p>Tell your story...</p> -->
     <quill-editor name="description" [modules]="{}" data-placeholder="Tell your story" [(ngModel)]="description" theme="bubble"></quill-editor>
 </div>

this is my html , am doing anything wrong ?

[KillerCodeMonkey]

What is failing there? Check my example repo. There are examples and they are Working. How do You initialised your model?

Am Mi., 14. Nov. 2018, 14:13 hat Nikhil Raj A notifications@github.com geschrieben:

i almost integrate it , but i can not pass the data into server ,because of the ([ngModel]) fails on it !

this is my html , am doing anything wrong ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/285#issuecomment-438657242, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYLKvCEaANlQEC5k7jo0Ju5YI05MNks5uvBcVgaJpZM4Ybo0u .

[nikhilrajnair]

Model initialised as public description: any; , and while i am submitting the form the validation failed

[KillerCodeMonkey]

what validation?

[nikhilrajnair]

while sending to the server , that field is not passing the data, if i'm apply the ngMolde into editor-container div , Error: No value accessor for form control with name: 'description' message shows

[KillerCodeMonkey]

are you sure you are not mixing template driven and reactive forms in your project?

[nikhilrajnair]

My HTML file

<form>
    <div class="form-group">
        <input type="text" class="form-control title" name="heading" [(ngModel)]="heading" placeholder="Title">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="image" [(ngModel)]="image" placeholder="Title Image">
    </div>
    <div id="tooltip-controls">
        <button id="bold-button"><i class="fa fa-bold"></i></button>
        <button id="italic-button"><i class="fa fa-italic"></i></button>
        <button id="link-button"><i class="fa fa-link"></i></button>
        <button id="blockquote-button"><i class="fa fa-quote-right"></i></button>
        <button id="header-1-button"><i class="fa fa-header"><sub>1</sub></i></button>
        <button id="header-2-button"><i class="fa fa-header"><sub>2</sub></i></button>
    </div>
    <div id="sidebar-controls">
        <button id="show-controls"><i class="fa fa-plus"></i></button>
        <span class="controls">
            <button id="image-button"><i class="fa fa-camera"></i></button>
            <button id="video-button"><i class="fa fa-play"></i></button>
            <button id="tweet-button"><i class="fa fa-twitter"></i></button>
            <button id="divider-button"><i class="fa fa-minus"></i></button>
          </span>
    </div>
    <div class="form-group">
        <div id="editor-container">
            <p>Tell your story...</p>
            <quill-editor name="description" [modules]="{}" data-placeholder="Tell your story" theme="bubble"></quill-editor>
        </div>
    </div>
    <div class="clearfix">
        <button (click)="submitForm()" class="btn btn-success pull-right" color="accent">Create Blog</button>
    </div>
</form>

component.ts file

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { first } from 'rxjs/operators';
import { FormBuilder, Validators, FormArray, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { PostService } from '../../../services/post/post.service';
import { DatePicker } from 'angular2-datetimepicker';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
import { formatDate } from '@angular/common';
import Quill from 'quill';
declare var Quill: any;

@Component({
  selector: 'app-pcreate',
  templateUrl: './pcreate.component.html',
  styleUrls: ['./pcreate.component.css']
})
export class PcreateComponent implements OnInit {
  postresponse: any;
  public name: string;
  public rawdata: any;
  public description: any;
  public image: string;
  public added_on = '';
  public heading: string;
  today = new Date();
  jstoday = '';

  constructor(public fb: FormBuilder, private spinnerService: Ng4LoadingSpinnerService, private router: Router, private PostService: PostService, public http: HttpClient) {
    this.added_on = formatDate(this.today, 'dd-MM-yyyy hh:mm:ss a', 'en-US', '+0530');
  }

  ngOnInit() {
  }

  public submitForm() {
    if (true) {
      this.PostService.getData(this.name, this.heading, this.description, this.image, this.added_on)
        .subscribe(
          (data) => {
            this.postresponse = data;
          })
    }
    else {
    }
    setTimeout(() => {
      this.spinnerService.hide();
      this.router.navigate(['/createblog']);
    }, 1000);
  }
}

[KillerCodeMonkey]

you could try to initialise your editor model value with an empty string or array/object (depends on your format you are using, html, text, object, ...) instead of undefined.

check our the second editor on https://killercodemonkey.github.io/ngx-quill-example/ it is working with ngModel in a form it is working fine

[KillerCodeMonkey]

any updates?

[nikhilrajnair]

Nope , i can't send the form value into the server

[KillerCodeMonkey]

Could you share this in a demo repo? So I can install it on my machine?

Am 19.11.2018 um 10:23 schrieb Nikhil Raj A notifications@github.com:

Nope , i can't send the form value into the server

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/285#issuecomment-439825042, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYPZwL97PTaGzqf67cEN3R9GttB6Pks5uwniRgaJpZM4Ybo0u.

[nikhilrajnair]

can i share the gitlab project ?

[KillerCodeMonkey]

it would be better, if you only extract a minimal example and share it with me (on gitlab or github) 🙃

[nikhilrajnair]

This is a small project so can u share your gitlab mail-id

[KillerCodeMonkey]

öhhh just search for KillerCodeMonkey or my name "Bengt ..."

there should be the same avatar as it is here :)

[nikhilrajnair]

Check your gitlab , and the backend is done by PHP + Laravel framework

[KillerCodeMonkey]

Will check the frontend code later ;)

Am 19.11.2018 um 12:36 schrieb Nikhil Raj A notifications@github.com:

Check your gitlab , and the backend is done by PHP + Laravel framework

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/285#issuecomment-439864047, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYCMj2-PLzlU-KSjpqkrMjUOWErLLks5uwpe5gaJpZM4Ybo0u.

[nikhilrajnair]

I hope you know how to run the Laravel on your machine

[KillerCodeMonkey]

like i posted above you need to initialize your description model. in your example it is undefined ;).

in general i would use reactive forms, there you need init all your controls with a default value ;).

description = ''

and description will be set.

PS: no need for me to run laravel ;). i took only a look at the frontend code and removed auth guards.