How to resize the embeded video

[vibingopal]

Hi,

Thanks for the example. I tried with your approach and iam unable to resize the video using the approach. What exactly you mean by quill.root.quill = quill;

Iam getting compilation error when doing same . I don't have the option to add .quill after the root element. any suggestions ?

[lancetipton]

@vibingopal Any way you can show me an example? Do you have some example code?

[vibingopal]

Thanks for the response. I also followed the module approach here - but it is not working https://github.com/Y-WeCode/quill-video-resize-module

Do we need to configure anything extra in webpack-config.js in the same way like image resizer which explained below ?

https://stackoverflow.com/questions/46215559/quill-image-resize-for-angular-2-quill-module/48705388#48705388

[vibingopal]

As per your example, below is my configured code

/ Video Resize / import { Video } from "../../../assets/js/quill-video-resize.js"; require("../../../assets/css/quill-video-resize.css"); Quill.register({ "formats/video": Video });

and struck here

// Build the editor quill = new Quill(domElem, config); quill.root.quill = quill;

what is domElem here means - I have been embeding the video using the default editor. <quill-editor [style]="{height: '200px'}">

[lancetipton]

@vibingopal So, that's a different repo from this one, which is why your having issues. It seems you are trying to follow the directions for this, but your are using the code from here.

[vibingopal]

Initially i tried to use the other repo but not able to implement the feature. But now iam trying to integrate with what you have provided in the current Repo and not able to continue further after the below code.

/ Video Resize / import { Video } from "../../../assets/js/quill-video-resize.js"; require("../../../assets/css/quill-video-resize.css"); Quill.register({ "formats/video": Video });

and struck here

// Build the editor quill = new Quill(domElem, config); //What is dom element and config here quill.root.quill = quill;

I have created the quill tool using the below configuration <quill-editor [style]="{height: '200px'}">

Could you please suggest how to configure the statement - quill = new Quill(domElem, config) ?

[vibingopal]

Hi Lance,

Just to give more info, here is my below code how i configured my quill editor

> >  <quill-editor #editor [(ngModel)]="editorContent" name="editorContent" id="editor-container" [formControl]="form.controls['editor']"
>           [style]="{'height': '400px'}" [modules]="modules" placeholder="Add your Story Here... ">
>           <div quill-editor-toolbar id="toolbar-container" style="background-color:beige!important;">
>                <span class="ql-formats">
>               <button class="ql-image" [title]=" 'image' " >
>               </button>
>                <button class="ql-link" [title]=" 'link' " >
>               </button>
>             </span>
>             <span class="ql-formats">
>               <button class="ql-video" [title]=" 'video' " >
>               </button>
>             </span>
> </div>
> </quill-editor>
> 
> import Quill from 'quill';
> import ImageResize from 'quill-image-resize-module';
> Quill.register('modules/imageResize', ImageResize);
> 
> //Video Resize
> import { Video } from '../../../assets/js/quill-video-resize.js';
> require('../../../assets/css/quill-video-resize.css');
> Quill.register({ 'formats/video': Video });
> 
> this.modules = {
>       imageResize: {}
>          };
> 

Now once we click on the video link and paste the youtube link for example. Not sure where to set the configuration mentioned in your repo? quill = new Quill(domElem, config); //What is dom element and config here quill.root.quill = quill;

Could you please help here ?

[vibingopal]

Any update on this please ?

[lancetipton]

@vibingopal, I'm not really following what you are having issues with. If you send me a link to a repo with the code, I can take a look at it. Also you can take a look at this code => https://github.com/lancetipton/react-quill-experiment. Maybe that will help. It's an example using react.

[vibingopal]

Ok. I will try to create repo and share it here

[vibingopal]

Iam unable to create plunker as i need to bring the other dependencies.

May i know what exactly quill.root.quill = quill; Iam not getting any reference after quill.root to assign to quill global variable

I have assigned the global variable Quill to the editor before embed

  this.tempEditor = this.editor.quillEditor;
  this.tempEditor.root.quill = Quill;
this.tempEditor.insertEmbed(range.index, 'video', video.src, 'user');

But still unable to see the option to resize the video in editor. There are no errors as well.