Quill: How to disable images when pasting?

[mscreenie]

I want to make sure no images are pasted inside the text area and pasting images seems to work. How can i prevent this?

[benbro]

Use the formats config to define a whiltelist of formats to allow in the editor. By default all formats are allowed.
List of supported formats.

For example, to allow all formats except for image and video:

var formats = [
  'background',
  'bold',
  'color',
  'font',
  'code',
  'italic',
  'link',
  'size',
  'strike',
  'script',
  'underline',
  'blockquote',
  'header',
  'indent',
  'list',
  'align',
  'direction',
  'code-block',
  'formula'
  // 'image'
  // 'video'
];
var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow',  // or 'bubble'
  formats: formats
});

[mscreenie]

Thanks! Great stuff. I noticed when changing the font family the editor attaches a class as opposed to a style or font tag like other editors. Is this behavior changeable, as in my case it is not desirable. I searched and it seems it possible for font sizes not sure about font family, or is it possible to specify your own markup when selecting a font e.g.

<span style="font-family:Roboto;" data-font-fetch="Roboto">Hello</span>

[benbro]

Explained in the guide.

var FontStyle = Quill.import('attributors/style/font');
Quill.register(FontStyle, true);

[mscreenie]

Any pointers on how to add an additional data-font-fetch when a font is selected / changed for text? Thank you.

data-font-fetch="Roboto"

[mscreenie]

shamefully requesting help here. @benbro would you be able to assist me in modifying the font selector to add a attribute like the above?

[kevinrichard31]

it doesn't work for me, when i copy paste an img, it is displayed on screen and in the Delta
https://i.stack.imgur.com/QyIUs.gif

[wethegreenpeople]

It took a minute but I was running into a similar issue as @kevinrichard31 where I would make sure that image tags weren't whitelisted, which worked perfectly if you were trying to copy/paste an image in, it wouldn't allow it. But if you dragged/dropped an image into the text editor it would still display it/make an image tag for it.

My solution ended up being to just continually make sure that if any img tags were being created we'd remove them:
editor.on('text-change', function (delta, oldDelta, source) { $('#editor img').remove(); });

[anivaliant]

It took a minute but I was running into a similar issue as @kevinrichard31 where I would make sure that image tags weren't whitelisted, which worked perfectly if you were trying to copy/paste an image in, it wouldn't allow it. But if you dragged/dropped an image into the text editor it would still display it/make an image tag for it.

My solution ended up being to just continually make sure that if any img tags were being created we'd remove them:
editor.on('text-change', function (delta, oldDelta, source) { $('#editor img').remove(); });

My solution : add editor div ondragover="return false;"

[mbareta]

It took a minute but I was running into a similar issue as @kevinrichard31 where I would make sure that image tags weren't whitelisted, which worked perfectly if you were trying to copy/paste an image in, it wouldn't allow it. But if you dragged/dropped an image into the text editor it would still display it/make an image tag for it.
My solution ended up being to just continually make sure that if any img tags were being created we'd remove them:
editor.on('text-change', function (delta, oldDelta, source) { $('#editor img').remove(); });

My solution : add editor div ondragover="return false;"

This won't help in case when someone copy-pastes the image from (for example) Google Docs. Those you can just copy-paste and it gets formatted as img with base64 source.