Ngx-quill: Use left text align

[lvlohammadi]

Hi Bengt, Thank you for the service.
I'm using lef text-align style by adding 'left' into formats/align, something like this:
let Aligns = Quill.import('formats/align'); Aligns.whitelist = ['right', 'left', 'center', 'justify']; Quill.register(Aligns, true);

The problem
In quill view, i'm just setting the left value into select box.
<select class="ql-align"> <option selected value="right"></option> <option value="left"></option> <option value="center"></option> <option value="justify"></option> </select>
so, lets see the result.
Undefined instead left icon

So i thought it might be useful to inform you about it.
I would appreciate any idea to solve this problem.

[KillerCodeMonkey]

This seems to be more a Problem with quilljs and not with my angular
wrapper. In my default wrapper the icon is available:

https://killercodemonkey.github.io/ngx-quill-example/

Did you checked if the value is left? Maybe it is the default setting and
an empty string or no value?

Check the demo page and inspect the left text align Option element to get
the value.

Thanks.

Am 19.10.2017 21:06 schrieb "Ramin Mohammadi" [e-mail]:

Hi Bengt, Thank you for the service.
I'm using lef text-align style by adding 'left' into formats/align,
something like this:
let Aligns = Quill.import('formats/align'); Aligns.whitelist = ['right',
'left', 'center', 'justify']; Quill.register(Aligns, true);

The problem
In quill view, i'm just setting the left value into select box.
value="left"> value="justify">
so, lets see the result.
Undefined instead left icon
[image: screen shot 2017-10-19 at 22 26 40]
https://user-images.githubusercontent.com/5156411/31789027-91688470-b51d-11e7-960f-a0e5a241a59b.png

So i thought it might be useful to inform you about it.
I would appreciate any idea to solve this problem.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/69, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ACKOYIG2RB3YPvfkSxG75BIrggE1pY-oks5st52ogaJpZM4P_tfm
.

[lvlohammadi]

Thanks for your reply.
If i put <option value="left"></option>, I will encounter with undefined. and if i just put <option></option>, its will be ok BUT in this case, ql-align-left class will not added to the element and it will be in vain.

[lvlohammadi]

I'm using ngx-quill for a RTL project. So I need the ql-align-left class.

[KillerCodeMonkey]

okay this is definitely a quilljs problem and nothing with ngx-quill, but i think we can get it working.

so if you have rtl editor (i do not know how to configure that ^^) maybe you can override the default alignment, so ql-align-right is default and left is simply ql-align.

in the quill documentation you find a toolbar config option like that:
[{ 'direction': 'rtl' }]

so maybe you need no custom toolbar instead you can simply pass the toolbaroptions to ngx-quill:

search for "rtl" on https://quilljs.com/docs/modules/toolbar/#container

[KillerCodeMonkey]

@lvlohammadi did you get it working? if so feel free to close the issue :)

[lvlohammadi]

@KillerCodeMonkey you are right. its a bug in quilljs, and unfortunately there is no ql-align for left aligns.
I'm fixing this using css for now.
Thank you for your time.

[KillerCodeMonkey]

You are welcome :)

Am 19.10.2017 21:53 schrieb "Ramin Mohammadi" [e-mail]:

@KillerCodeMonkey https://github.com/killercodemonkey you are right.
its a bug in quilljs, and Unfortunately there is no ql-align for left
aligns.
I'm fixing this using css for now.
Thank you for your time.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/69#issuecomment-338018189,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYEtAqNpRLoheG3XO_SPtKxdne-PYks5st6ikgaJpZM4P_tfm
.

[robertheessels]

Just do it like this, and you'll get the icon:

<select class="ql-align">
  <option selected></option>
  <option value="right"></option>
  <option value="center"></option>
  <option value="justify"></option>
</select>

[ApplePie420]

@robertheessels well, that worked for me. Thanks a lot. Quill 1.3.6.