Quill: How can i convert class to inline-style.

[skyetang]

hello:
I konw some class can convert to inline-style like this:

and i need more class can covert to inline-style.how can i do it?
eg:

<p class='ql-indent-1'>indent test</p>

covert to

<p style="text-indent:2em">123123123</p>

[dons20]

Not sure if this will help, but when creating a custom component, you usually have to create an embed var. The location where you import it from will determine if it's inline or block.

If you want it to be inline, use this var Embed = Quill.import('blots/embed');
If you want it to be a new block, change it to Quill.import('blots/block/embed')

Check this answer on Stack Overflow for some more help (assuming you're trying to do the same thing)

[ndraiman]

@dons20 this doesn't work for me.

I used the following for direction and align:

Quill.register(Quill.import('attributors/style/direction'), true);
Quill.register(Quill.import('attributors/style/align'), true);

But its not a perfect solution and doesn't work for indent.

Is there any way to force Quill to use only inline styles (instead of classes)?

[axu6705]

Hi @skyetang. You can export a style like IndentStyle.

import Quill from 'quill'
const Parchment = Quill.import('parchment')

class IndentAttributor extends Parchment.Attributor.Style {
  add (node, value) {
    if (value === 0) {
      this.remove(node)
      return true
    } else {
      return super.add(node, `${value}em`)
    }
  }
}

let IndentStyle = new IndentAttributor('indent', 'text-indent', {
  scope: Parchment.Scope.BLOCK,
  whitelist: ['1em', '2em', '3em', '4em', '5em', '6em', '7em', '8em', '9em']
})

export { IndentStyle }

and then call it from where needed

import { IndentStyle } from 'indent.js'
Quill.register(IndentStyle, true)

jsfiddle demo

[skyetang]

Hi:

Thank you very much for receiving your mail。

I’ll try it later.

在 2017年5月24日，下午1:13，Anson Xu [e-mail] 写道：

Hi @skyetang https://github.com/skyetang. You can export a style like IndentStyle.

import Quill from 'quill'
const Parchment = Quill.import('parchment')

class IndentAttributor extends Parchment.Attributor.Style {
add (node, value) {
if (value === 0) {
this.remove(node)
return true
} else {
return super.add(node, ${value}em)
}
}
}

let IndentStyle = new IndentAttributor('indent', 'text-indent', {
scope: Parchment.Scope.BLOCK,
whitelist: ['1em', '2em', '3em', '4em', '5em', '6em', '7em', '8em', '9em']
})

export { IndentStyle }
and then call it from where needed

import { IndentStyle } from 'indent.js'
Quill.register(IndentStyle, true)
jsfiddle demo https://jsfiddle.net/axu6705/zjrs2qje/
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/quilljs/quill/issues/1274#issuecomment-303619625, or mute the thread https://github.com/notifications/unsubscribe-auth/AL1KUUKiKzS7UEAzGF1UCphdx8XHUH9gks5r87xugaJpZM4LmwBS.

[quill-bot]

Closing inactive issue.

[qq15725]

If initialization data loses indentation

add value = parseInt(value)

class IndentAttributor extends Parchment.Attributor.Style {   
  add (node, value) {
    value = parseInt(value)
    if (value === 0) {
      this.remove(node)
      return true
    } else {
      return super.add(node, `${value}em`)
    }
  }
}

[dynothunder]

axu6705 where I use the code in angular2