Implementing a rich text editor in Android?

Question

I am wondering if there are any good options to implement a rich text editor in Android. Please note I am talking about a rich text editor that can be used in an Android application, not the one embedded in a web page using HTML and Javascript.

My requirements are:

• Basic formatting (color, fonts, highlight, bold, italic, underline, etc.)
• Hyperlinks
• Inline images
• Bullet lists and numbered lists
• Inline table (only the contents inside a cell is editable, not the table structure)

As you can see, this is pretty much something quite similar to a typical RichEdit control on Windows.

Here are some efforts (investigation & prototyping) I have made so far:

Using WebView

I have tried using a WebView control to load an HTML fragment with one . The content becomes editable and as it is HTML, I suppose it can meet most of my requirements. But it has several issues:

• (deadly) No text caret. The user will have no idea where his/her typed characters will be inserted.
• The on-screen soft keyboard is not visible by default. There is a trick that the user has to long-press the Menu button to bring up the keyboard. But I think this is a very bad user experience. Besides, the screen layout is not properly rearranged and the text inserting point sometimes will be covered by the keyboard.

---

Using EditText

I have tried using the EditText control. It seems to support some level of rich text editing (color, fonts, bold, italic, underline, inline images, bullet lists). But I still cannot figure out how I can implement the following requirements:

• Control the appereance of the bullet symbol (dot, circle, dash, arrow, star, etc.)
• Numbered list (1., 2., 3., etc.)
• Table

BTW, I have seen there are several *Span classes out there but I am not sure if they can be any help... And the http://developer.android.com does not provide much useful information about them.

---

So, how on earth can I implement a rich text editor on Android? Can I extends the EditText and add my new functionalities? Or should I do something from scratch - extends the View and implement everything by myself? For later option (extending View), I actually even don't know how to show a text caret and blink it, not mentionging moving the caret with user typing.

I am desperate now... Any hints?

Thanks!

-Tony

---

(EDIT)

After some further investigation, it looks like extending EditText would be my best bet. I somehow figured out how to use those Span classes and guess I should be able to do most of the tricks by using (extending) them.

For example, extending the BulletSpan and overriding drawLeadingMargin should give me the control of the bullet appereances. Extending the LeadingMarginSpan should help me on the numbered list.

As to the table, my initial plan is to extend the LineBackgroundSpan and draw all the table borders in the drawBackground override. However, I still need to figure out how to layout all the text in the table cells and properly handle the caret movement and selection. Suggestions?

Burmese

I'd look at commonsguy's Edit-A-Rama demo as a starting point. It makes use of another component from his own github repo - RichEditText. – Subtitle

Check this new library that i just uploaded, hope it's helps! – Guile

how to add some data that is in html format to this richeditor view and i want to edit the same date how it is possible – Conner

Answer 1

I just published my rich text editor component under the Apache 2.0 license:

https://github.com/1gravity/Android-RTEditor

Cosgrove

How can i hide the icons ? i tried to do that in "rte_toolbar_character " which is the generated source file which will be re-generated. So there's no way i can hide them ? – Despumate

Hiding as in removing from the layout. You don't need to use any of the included layouts (rte_toolbar, rte_toolbar_character or rte_toolbar_paragraph). Just copy it to your app, remove whatever you want to remove and use it in your layout.The three included layouts are only demo layouts, you can use anything you want instead. There's also no need to fork the app, use the gradle depenency and the layout of your choosing. – Cosgrove

Answer 2

You can make use of any of the following libraries:-

https://github.com/commonsguy/cwac-richedit

https://github.com/chinalwb/Android-Rich-text-Editor

https://github.com/wasabeef/richeditor-android

https://github.com/irshuLx/Android-WYSIWYG-Editor

Susurrus

Answer 3

Can you do the following:

1. Manually hold the contents in the EditText as your own model (ie by seperating and maintaing the content document and the view attributes as seperate entities).
2. Override the render (or draw method) to do custom layout on parts of the content document (part of your model) that handle non text characters (say bullets with particular attribute).

To me seems like if you have to muck about with the layout, are you better off writing it from scratch on your own. From what I remember the Edit text (and the richt text editor) is great for anything where you the data is pure text.

Firstclass

Answer 4

I would probably extend both EditText and TableLayout or at least end up using most of their source if there were big enough changes I needed to make.

Lipchitz

Answer 5

There is an open source EditText rich text editor called android-richtexteditor but the code was inexplicably deleted in r5. The code is still there in r4; just use svn to check out r4 or earlier to access it. The code appears to support italics, underline, color picker, text size, and more.

Also answered in these questions: 1, 2

Ameline

Answer 6

Extend from EditText is a best choice for you, it support CharacterSpan and ParagraphSpan.

See my App on the Google Play: https://play.google.com/store/apps/details?id=com.hly.notes

Lifegiving

It would have been great if you could share the code for the richtext editor – Ammonic

Answer 7

Check this open source Wordpress mobile application for android.It has very promising Richtexteditor based on Edittext.

You can download the source from here

Thanks

Jody

This is GPL which makes it impossible for a lot of people to use, just thought I'd mention it to save anyone else the wasted time looking at it. – Herbal