The Infomaniak Rich HTML Editor is an Android library designed to display HTML and easily modify it on the fly. It relies on
the power of the contenteditable HTML attribute inside a WebView.
Looking for an iOS or macOS equivalent? Check out the Swift version of this editor here: Infomaniak/swift-rich-html-editor
- HTML Content Editing: Full support for viewing and editing HTML content directly.
- Wide range of formatting commands: Many commands are available to format text, from simple commands like bold to more advanced ones like link creation.
- Useful API to control the editor: It lets you:
- Listen to format option's activated status when the cursor moves around the html content
- Add custom css to the editor
- Add custom scripts to the editor
Add this dependency to your project:
Using version catalog:
rich-html-editor = { module = "com.github.infomaniak:android-rich-html-editor", version.ref = "richHtmlEditorVersion" }Directly inside gradle dependencies:
dependencies {
implementation "com.github.Infomaniak:android-rich-html-editor:$richHtmlEditorVersion"
}The latest version is:
In your layout:
<com.infomaniak.lib.richhtmleditor.RichHtmlEditorWebView
android:id="@+id/editor"
android:layout_width="match_parent"
android:layout_height="match_parent"/>In your fragment:
val html = """
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
""".trimMargin()
editor.setHtml(html)Add a button to your xml:
<Button
android:id="@+id/boldButton"
android:text="Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />Set a click listener on the button to apply the associated format and modify the appearance of the button to report the status where the cursor is placed:
boldButton.setOnClickListener { editor.toggleBold() }
viewLifecycleOwner.lifecycleScope.launch {
editor.editorStatusesFlow.collect {
// Update your button's activation status how you prefer. If you have provided
// an activated state color for your button, you can do the following:
boldButton.isActivated = it.isBold
}
}Tip
If you want to listen to the status changes of a format, do not forget to subscribe to it as described in the following Subscribe to format states section.
You can subscribe only to the states that are relevant to you. This way, the flow will update its value only when at least one of your subscribed states changes.
editor.subscribeToStates(setOf(StatusCommand.BOLD, StatusCommand.ITALIC))Note
By default, when subscribeToStates() is never called, all available StatusCommand will be subscribed to.
You can subscribe to all possible states by passing in null
editor.subscribeToStates(null)You can add your own css to stylize your editor to your liking or you can add scripts to develop your own advanced functionalities. To do so, the editor exposes two easy to use methods.
editor.apply {
addCss("div { padding: 8px }")
addScript("document.body.style['background'] = '#00FFFF'")
}To safely use your own WebViewClient instance with the editor, you have to call the
RichHtmlEditorWebView's notifyPageHasLoaded() inside your custom WebViewClient's onPageFinished() callback.
Spellcheck is activated by default but if you don't want to have any spellcheck done on the editor content, you can do that by doing so.
editor.withSpellCheck(false)For more advanced features, take a look at the sample project or the Infomaniak Mail app that uses this rich html editor.
Useful methods and classes inside the project are documented with KDoc.
You can find a sample project in the sample folder.
Infomaniak Mail allows you to manage your Infomaniak addresses in a completely secure environment.