Comments (14)
@deepakpapola this is my implementation:
EditorCreated(quill) {
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', this.imageHandler.bind(this));
this.editor = quill;
}
imageHandler() {
const Imageinput = document.createElement('input');
Imageinput.setAttribute('type', 'file');
Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
Imageinput.classList.add('ql-image');
Imageinput.addEventListener('change', () => {
const file = Imageinput.files[0];
if (Imageinput.files != null && Imageinput.files[0] != null) {
this._service.sendFileToServer(file).subscribe(res => {
this._returnedURL = res;
this.pushImageToEditor();
});
}
});
Imageinput.click();
}
pushImageToEditor() {
const range = this.editor.getSelection(true);
const index = range.index + range.length;
this.editor.insertEmbed(range.index, 'image', this._returnedURL);
}
from ngx-quill-editor.
image uploading is working properly
from ngx-quill-editor.
This is possible by creating your own ImageHandler. Use this for reference -
Adding Custom Handlers
In Angular 4, Edit the onEditorCreated function -
onEditorCreated(quill) {
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', this.imageHandler);
this.quill = quill;
}
imageHandler(value) {
/* Image Handler Code...
Ex. Trigger a file dialog, save to file input in a form, save multipart form data to the
server & finally retrieve the image url. */
let range = this.quill.getSelection(true);
let index = range.index + range.length;
this.quill.insertEmbed(range.index, 'image', imgUrl);
}
from ngx-quill-editor.
@faresayyad thanx men. did you use the image resize module also?
from ngx-quill-editor.
@nishadmenezes thank you man
from ngx-quill-editor.
@nishadmenezes @faresayyad can you explain bit more? still i cant upload image to server and the url provided by you is not valid
from ngx-quill-editor.
* Just copy and paste the URL into the address bar of your browser I don't know what's wrong
What I have done is create a custom image handler that opens up a file dialog on clicking the image upload icon. Then, after saving the uploaded image, I am embedding an image into the quill-editor with the URL of the image I just uploaded.
According to docs, I am adding this custom image handler function to the toolbar of the quill editor so that it is called when the image icon is clicked.
from ngx-quill-editor.
@nishadmenezes can you tell how to open file dialog on image icon click
thanks
from ngx-quill-editor.
Image resize module wasn't packaged as well as this module. I had problems getting it to work. Let me know if you manage that...
from ngx-quill-editor.
@deepakpapola your'e welcome man, not yet because i'm dealing with backend right now, but i will try to configure it ASAP.
If you can use the image resize, please don't forget to share it hear.
from ngx-quill-editor.
@faresayyad @nishadmenezes sure bros 👍
from ngx-quill-editor.
const index = range.index + range.length;
this.editor.insertEmbed(range.index, 'image', this._returnedURL);
Above code is not working for getting current cursor location.
My image is always inserted at top.
Please help.
from ngx-quill-editor.
Hey @faresayyad is ql-image your custom class?
from ngx-quill-editor.
@deepakpapola this is my implementation:
EditorCreated(quill) { const toolbar = quill.getModule('toolbar'); toolbar.addHandler('image', this.imageHandler.bind(this)); this.editor = quill; }
imageHandler() { const Imageinput = document.createElement('input'); Imageinput.setAttribute('type', 'file'); Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'); Imageinput.classList.add('ql-image'); Imageinput.addEventListener('change', () => { const file = Imageinput.files[0]; if (Imageinput.files != null && Imageinput.files[0] != null) { this._service.sendFileToServer(file).subscribe(res => { this._returnedURL = res; this.pushImageToEditor(); }); } }); Imageinput.click(); }
pushImageToEditor() { const range = this.editor.getSelection(true); const index = range.index + range.length; this.editor.insertEmbed(range.index, 'image', this._returnedURL); }
it is not working for me the server cannot recognize the post as image !
from ngx-quill-editor.
Related Issues (20)
- AOT issue HOT 1
- How to register a custom module? HOT 3
- Disable not available
- Angular 5 HOT 6
- Type 'null' is not assignable to type 'string'
- Angular 6 Package format compliance HOT 5
- Module build failed: ....is missing from the TypeScript compilation HOT 14
- Include HTML Input Tags and Bind with Angular
- can editor set fontsize in Number(13, 14, 15 ) not in these words (small normal large huge) ?I have not seen in configration
- Changing options.readOnly doesn't enable/disable quill HOT 1
- Italic functionlity not working
- Compatibility with Angular Universal HOT 1
- Css Class name is removed after converting the content
- Cannot change font color and background color HOT 1
- Type checking errors with Angular 7 HOT 2
- img can not bind to model
- cannot detect empty content when I use backspace
- Error running text editor, I just get white screen when serving my app
- I can't add Undo/Redo Buttons to quill-editor HOT 1
- "export 'DOCUMENT' was not found in '@angular/platform-browser' Fix for Angular 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-quill-editor.