CODEWITHSUNDEEP
javascriptquill
Acorn
Acorn

Reputation: 1187

QuillJS keep HTML Font Format on paste

I'm attempting to paste some stylized font into a quillJS editor and keep the formatting. However, the formatting is removed whenever I paste it. I can create a clipboard matcher and have it set the font color manually, but I don't get to keep the original formatting. It's just replaced.

Here's my codepen: https://codepen.io/ashinyacorn/pen/wvvRoJp?editors=0011

And this is what I'm working with:

var Clipboard = Quill.import('modules/clipboard');
var Delta = Quill.import('delta');
var quill = new Quill('#editor');

quill.clipboard.addMatcher('B', function(node, delta) {
  console.log('How BOLD of you');
  return delta.compose(new Delta().retain(delta.length(), { bold: true }));
});

//Keep font formatting (size, color) ? 
quill.clipboard.addMatcher('FONT', function(node, delta) {
  console.log('HOW FONTY');
  return delta;
});

I would expect that if you were to paste in something that has a font styling, it would be kept. But it isn't, unless I override the delta and manually set the color myself. Is there anyway to tell the delta what the font color and style already is? Or a way to tell the clipboard to keep the styling?

Upvotes: 1

Views: 2590

Answers (1)

Apetrei Ionut
Apetrei Ionut

Reputation: 323

I have handled font size bug with a matcher also:

function preserveSizeFormat(node, delta) {
const match = node.className.match(/ql-size-(.*)/)
  const fontSize = node.style['font-size']
  // HACK: when className is not present, check style attribute
  const styleMatch = fontSize && fontSize !== '16px'
  if (match || styleMatch) {
    delta.map(function(op) {
      if (!op.attributes) op.attributes = {}
      // grab the size from `ql-size-{x}`
      if (match) {
        op.attributes.size = match[1]
      } else if (styleMatch) {
        const large = fontSize === '13px' || fontSize === '0.8125rem'
        op.attributes.size = large ? 'large' : 'huge'
      }
      return op
    })
  }
  return delta
}
quill.clipboard.addMatcher('span', preserveSizeFormat);
quill.clipboard.addMatcher('a', preserveSizeFormat);

I have found this solution here

Upvotes: 1

Related Questions