Image Resize
scottfr opened this issue Β· 46 comments
It would be great if you could resize images in the editor. Drag and drop would be perfect, but a width/height dialog would also get the job done.
So Firefox actually implements a resizer thing out of the box. It looks something like:
Unfortunately it doesn't seem like any other web browsers provide something native like this, so a JS-based solution is probably still required π¦
IE has image resizing too - in fact you can't switch it off in IE11. But is this actually reflected in the data model? Otherwise the resizing seems fragile.
I would appreciate this feature as well.
+1
+1
Is their any plan on implementing it?
Expressing interest in this one as well :)
Quill is moving towards a simpler Medium and Dropbox Paper like image UI out of the box which does not have image resizing. If someone is willing to implement this and contribute it as a module feel free to open another issue and I would be happy to provide guidance.
Has anyone found a way to "fix" this? I would also really like to have a way to resize my images.
How are issues are being marked 'closed' without any solution? Still no one has solved image resizing and drag and drop feature!
@Masum06 the maintainers have decided to keep out of box Quill simple and stated that they are open to somebody writing a module for this specific feature. I think that is a reasonable approach considering the number of shared use cases Quill has. The core should definitely not get too complicated.
That said if there is anything inside of Quill that prevents a module from achieving something I am sure the maintainers would have an open ear.
I have to say I disagree with the decision on closing this.
I understand the goal of keeping Quill simple. However, it seems to me that the existing image import functionality (via the toolbar) is effectively broken if you can't resize the imported images (as it seems unlikely they will import at the exact size the user wants the vast majority of the time).
If the Quill toolbar is going to contain built-in support for image importing, I think there also needs to be some built-in mechanism to control the sizing of those imported images.
Well, if nobody is willing to work on this issue, it's unlikely to get done regardless of how good reasons there are :/
Still, about "keeping it simple" as @matthiasg mentions. The approach of not insisting on any particular mechanism for resizing and "do a plugin if you need" is certainly understandable yet IMHO it's good to think about the final user task. I was bumping into this issue several times over the last year and honestly I can hardly figure a use case when it is useful to add an image without resizing it.
Possibly an exact resizing mechanism should be beyond the scope of quill core, yet shouldn't quill core include an API for manipulating images (e.g. plugin dev could create a button that resizes image to a fixed icon-sized resolution) and shouldn't there be a reference resizing plugin (possibly an ugly one as that could be only a proof of concept to validate the API)?
@amarchen a reference plugin, maybe one in a different project or in an plugins area (maybe even officially supported) I would definitely like. I also would like to have such a plugin, but I respect the quilljs approach of trying to not overburden the core module with too many specific requirements.
// load quill to extend
let Embed = Quill.import ('blots/embed');
// set element
let element = false;
let childImg = false;
/**
* init Resize
*
* @param {Event} e
*/
let initResize = (e) => {
// add event listeners
window.addEventListener ('mousemove', resize, false);
window.addEventListener ('mouseup', stopResize, false);
}
/**
* init Resize
*
* @param {Event} e
*/
let resize = (e) => {
childImg.style.width = (e.clientX - childImg.offsetLeft) + 'px';
childImg.style.height = (e.clientY - childImg.offsetTop) + 'px';
}
/**
* stop Resize
*
* @param {Event} e
*/
let stopResize = (e) => {
// remove listeners
window.removeEventListener ('mousemove', resize, false);
window.removeEventListener ('mouseup', stopResize, false);
}
/**
* create image embed
*/
class ResizableImage extends Embed {
/**
* create method
*/
static create (value) {
// create
element = super.create (value);
// set className
element.className = 'resize-image'
// create image node
childImg = document.createElement ('img');
// give it some margin
childImg.setAttribute ('src', value.src);
// give it an identifier
if (value.id) childImg.setAttribute ('data-id', value.id);
// set resizer
let childResize = document.createElement ('span');
// set attributes
childResize.className = 'resize-control';
// append children
element.appendChild (childImg);
element.appendChild (childResize);
// add event listener
childResize.addEventListener ('mousedown', initResize, false);
// return node
return element;
}
}
// create tag
ResizableImage.tagName = 'span';
ResizableImage.blotName = 'image';
ResizableImage.className = 'image';
// register
Quill.register ({
'formats/image' : ResizableImage
});
Something like this would do for a plugin, though it still requires styling and testing.
Maybe someone else can take it from there.
quill.insertEmbed (0, 'image', {
'id' : 'IDENTIFIER',
'src' : 'SOURCE'
}, Quill.sources.USER);
Here is a demo of my image resizing plugin for Quill. If there is interest I can publish to npm or submit pull request to add to Quill core. Also demoed there is a plugin for image drag/drop and pasting.
@kensnyder Demo looks great and works well. Do you have plans to implement image repositioning?
@danielreed07 what do you have in mind?
@kensnyder demo looks and feels amazing yes! I cant seem to import/register it in my quill, how to import this module? Does it need recompiling/packing? I copied your js files into my /node_modules/quill/modules/ to no avail. The quill doc is also not clear if you have to register or import first, i mean import is first on the list but in the Register section underneath Import it says you can use Import to retrieve the module after registering? I am confused...
@dennisdebel in its current form, it requires webpack, or at least transpilation to ES5. If you look at the source on webpackbin, you'll see the imports and registration:
import { ImageImport } from './ImageImport.js';
import { ImageResize } from './ImageResize.js';
Quill.register('modules/imageImport', ImageImport);
Quill.register('modules/imageResize', ImageResize);Again, if there is interest I will get it into a form easily usable by all.
@kensnyder I think @danielreed07 meant the ability to drag and drop an image to a different location.
@kensnyder @matthiasg Right. It would be great if I could drag the image, and drop it in accordance to the new caret position.
@kensnyder thanks, good tip, ill look into it =) I'd vote for a more usable form =D
@danielreed07 @matthiasg When I run quill.getSelection() it reflects the last caret position, not the position of the drop. I can't remember if window.getSelection() is the same, but I couldn't figure out how to get the Quill index based on window.getSelection(). It may be possible but I couldn't figure it out.
@kensnyder This might be overkill, but rangy has a pretty good selection tool.
Thanks for your work and offer to put it out into open source @kensnyder. There definitely seems to be interest from others in using it. It would probably make more sense to put it on npm first as it would take me a bit of time to review and back and forth for adding to core. Also it would allow you to choose which browsers/platforms you want to support.
It looks like you have structured it as separate modules so something like a naming convention used is having quill prefixed and the type (module in this case) suffixed so something like quill-image-import-module and quill-image-resize-module for package names could work well. You may want to use a verb other than "import" (in quill-image-import-module) since import already has meaning in the programming context but up to you.
Let me know if you need any help.
@kensnyder For the image resizing plugin, if you'd be willing to either a) set up a public repo with commit access for me, or b) allow me to fork your demo code under a permissive license (MIT?), I've got an immediate need for a plugin like this and would be happy to throw a couple developer-days on fleshing it out.
@gbenson-wikia I've got the image drop/paste module on npm. I should have the resize module up this weekend. If it doesn't work exactly how you'd like, additional contribution is appreciated.
@gbenson-wikia Here is the resize module on npm. Contributions are welcome.
@kensnyder the link to github on your resize module goes 404 ?
@matthiasg The link should be working now.
@kensnyder thank you very much for these two packages, great work! Do you have any plans to get the positioning of the image within the editor working?
@StefanNeuser Aligning images left, center and right is currently working. See this demo and install from npm v3.0.0.
@kensnyder Thank you for this great plugin. But I find some compatible issue in your demo. Once pasted or switched fonts, text editor is scrolled to the top automatically. I think there may be some css conflicts.
@kensnyder does your module have a license so we may add to our project?
@DarnellSh You'll probably want to take a look at https://github.com/Fandom-OSS/quill-blot-formatter , which was originally forked from Ken's project and is actively maintained. It's licensed under the Apache 2.0 license.
Yes, per the package.json, the license is MIT. I will add LICENSE.md files to the repo when I can.
@kensnyder GREAT!!! It's an amazing project and as soon as that LICENSE.md file is added we can add it. Please keep me updated!
@kensnyder was there anything stopping adding the LICENSE.md file to the repo? I can add a PR if that would speed things along. It's a great plugin and really would like to use it!
@kensnyder totally understandable! Can you take a look please at the PR here? It's straight from the MIT Open Source website!
Why will the quill-image-resize-module plug-in be integrated in Vue and alert when the output is debugged by Google Browser?
I use the imageResize module for quill but it does not work on mobile devices, does anyone know how to solve this problem? @kensnyder @gbenson-wikia @GinYang @scottfr @jhchen
Here is a demo of my image resizing plugin for Quill. If there is interest I can publish to npm or submit pull request to add to Quill core. Also demoed there is a plugin for image drag/drop and pasting.
The link is not working.