search

wordpress-mobile / WordPress-Editor-Android

⛔️ [DEPRECATED] A reusable Android rich text editor component.
GNU General Public License v2.0
188 stars 50 forks source link

Add color and h1-h6 support. Need some directions on where to look. #455

Closed liuzhen2008 closed 7 years ago

liuzhen2008 commented 7 years ago

I want to add some customization on the format_bar so that we can change text color and font size and stuff.

I see that we are basically using a "ZSSEditor" in a webview. But googling around, I do not see any documentation on this editor. But the included js library kind of suggests that color/font size support is already there.

I am wondering where can I find the API for that library? Can any developer point me on where to look?

Thanks a lot!

maxme commented 7 years ago

Hi @liuzhen2008 headings is already supported by the editor, but the toolbar is missing the buttons to edit h1, h2, h3, normal text, etc.

You might have a look at this other editor https://github.com/wordpress-mobile/WordPress-Aztec-Android - the toolbar has been updated there and have the headings button. It would be awesome to port it back here.

liuzhen2008 commented 7 years ago

So color is not supported by the library out of the box? I was thinking of launching some color picker dialog, and then maybe I can just insert <span color=''/> around....?

liuzhen2008 commented 7 years ago

OK. So for headings we could use

ZSSEditor.setHeading("h1-h5") Color can probbaly go with ZSSEditor.setColor(color)

maxme commented 7 years ago

<span color=''/> is one solution but it doesn't allow style change easily. I guess that depends why you want to implement this. I'd probably go with a predefined style solution like: <span class="text-color-1">. <span class="text-color-2">, etc.

liuzhen2008 commented 7 years ago

Do you know if there are built in helper functions in the ZSSEditor that can tell when the selection class has changed? I want to do that in the ZSSEditor. so that my android UI can respond to what the user is focusing on.

For example, say i set some text to <span class="text-color-1"> some text </span>, when my cursor clicks onto "some text", how do I tell the JS listener what the current className of the selected text is?

It seems this is the spot i should attempt to grab the current class name? But per Mozilla doc, it seems to me that e.target is always document. So how is the code following that ever supposed to work?

liuzhen2008 commented 7 years ago

It seems that fontSize and foreColor is what i should be using.

In the ZSSEditor, i could simply do queryCommandValue("foreColor/fontSize")