• Stars
    star
    698
  • Rank 64,841 (Top 2 %)
  • Language
    Kotlin
  • License
    Mozilla Public Li...
  • Created over 8 years ago
  • Updated 27 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A reusable native Android rich text editor component.

Aztec Logoย Aztec: Native HTML Editor for Android

CircleCI

Aztec (which extends EditText) is a rich-text editor component for writing HTML documents in Android.

Minimum Android Supported Version

You can check the minimum Android version supported by looking at the minSdkVersion configuration within build.gradle.

Visual Editor Visual Editor

Getting started

Declare the main components in your layout:

Visual editor

<org.wordpress.aztec.AztecText
    android:id="@+id/visual"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:imeOptions="flagNoExtractUi"
    aztec:historyEnable="false" />

Source editor

<org.wordpress.aztec.source.SourceViewEditText
    android:id="@+id/source"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:inputType="textNoSuggestions|textMultiLine"
    android:scrollbars="vertical"
    android:imeOptions="flagNoExtractUi"
    aztec:codeBackgroundColor="@android:color/transparent"
    aztec:codeTextColor="@android:color/white" />

Toolbar

<org.wordpress.aztec.toolbar.AztecToolbar
    android:id="@+id/formatting_toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/format_bar_height"
    android:layout_alignParentBottom="true" />

Inflate the views:

val visualEditor = findViewById<AztecText>(R.id.visual)
val sourceEditor = findViewById<SourceViewEditText>(R.id.source)
val toolbar = findViewById<AztecToolbar>(R.id.formatting_toolbar)

Configure Aztec with a provided image & video loaders:

Aztec.with(visualEditor, sourceEditor, toolbar, context)
    .setImageGetter(GlideImageLoader(context))
    .setVideoThumbnailGetter(GlideVideoThumbnailLoader(context))

For more options, such as edit history, listeners and plugins please refer to the demo app implementation.

Build and test

Build the library, build the example project and run unit tests:

$ ./gradlew build

Run unit tests only:

$ ./gradlew test

Before running instrumentation tests

Espresso advises disabling system animations on devices used for testing:

On your device, under Settings->Developer options disable the following 3 settings:

  • Window animation scale
  • Transition animation scale
  • Animator duration scale

One additional setup step is also required to handle an Espresso issue with clicks (see the caveats below):

On your device, under Settings -> Accessibility -> Touch & hold delay, set the delay to Long.

Run the instrumentation tests:

$ ./gradlew cAT

Integrating Aztec in your project

repositories {
    maven { url "https://a8c-libs.s3.amazonaws.com/android" }
}
dependencies {
    api "org.wordpress:aztec:v1.6.2"
}

Brave developers can either use the project as a source distribution or have fun with the latest snapshot at their own risk:

dependencies {
    api "org.wordpress:aztec:trunk-{commit_sha1}"
    // As an example, for '3f004c8c8cd4b53ab9748f42f373cf00a30e9d86' commit sha1, this would look like:
    // api "org.wordpress:aztec:trunk-3f004c8c8cd4b53ab9748f42f373cf00a30e9d86"
}

Modifications

You can use the API to modify Aztec behaviour.

Toolbar items

If you want to limit the functionality the Aztec library provides, you can change it calling the setToolbarItems method on AztecToolbar. The following example will enable only bold, plugins and list items in the given order.

aztecToolbar.setToolbarItems(ToolbarItems.BasicLayout(ToolbarAction.BOLD, ToolbarItems.PLUGINS, ToolbarAction.LIST))

You can set new items which are not enabled by default. ToolbarAction.CODE and ToolbarAction.PRE.

  • CODE represents inline HTML code
  • PRE represents a preformat block (including code block)

Task list

There is an optional list type you can enable in the editor. In addition to ordered and unordered lists you can use task list. A task list is an unordered list which shows and saves checkboxes instead of the bullets. Enable it by calling the following method.

aztecToolbar.enableTaskList()

Nested blocks

By default Aztec allows nested blocks. In certain cases this doesn't have to be the preferred behaviour. There is an option to disable nested blocks. When switched, this editor will always add media and horizontal rule after the currently selected block, not in the middle of it.

aztecText.addMediaAfterBlocks()

Placeholder API

Aztec now supports placeholders to draw views which are not natively supported by the EditText and Spannable API. The functionality creates a span in the visual editor and draws an Android view over it. The view is moved around when the user changes anything in the editor and allows you to draw things like video that can be played inline in the editor. In order to use the API you have to create an instance of PlaceholderManager and initialize it in your onCreate call like this:

private lateinit var placeholderManager: PlaceholderManager
override fun onCreate(savedInstanceState: Bundle?) {
    placeholderManager = PlaceholderManager(visualEditor, findViewById(R.id.container_frame_layout))
    aztec.addPlugin(placeholderManager)
    aztec.addOnMediaDeletedListener(placeholderManager)
}
override fun onDestroy() {
    placeholderManager.onDestroy()
}

You can create a custom PlaceholderAdapter to prepare and draw your view. You can check the sample ImageWithCaptionAdapter which draws a simple Android view with an image and a caption. However, you can implement things like YouTube view or Video view with playback controls. Don't forget to register your PlaceholderAdapter like this:

placeholderManager.registerAdapter(ImageWithCaptionAdapter())

Once you have initialized both the manager and the adapter, you can use the manager methods to insert or remove placeholders.

placeholderManager.insertItem(adapterType, attributes)
placeholderManager.removeItem(predicate)

Code formatting

We use ktlint for Kotlin linting. You can run ktlint using ./gradlew ktlint, and you can also run ./gradlew ktlintFormat for auto-formatting. There is no IDEA plugin (like Checkstyle's) at this time.

Reference

License

Aztec is an open source project covered by the Mozilla Public License Version 2.0.

More Repositories

1

WordPress-iOS

WordPress for iOS - Official repository
Swift
3,686
star
2

WordPress-Android

WordPress for Android
Kotlin
2,971
star
3

WordPress-Editor-iOS

โ›”๏ธ [DEPRECATED] A reusable iOS rich text editor component.
JavaScript
1,061
star
4

AztecEditor-iOS

A reusable native iOS visual HTML text editor component.
Swift
615
star
5

PasscodeLock-Android

Android Library that provides passcode lock to your app
Java
353
star
6

gutenberg-mobile

Mobile version of Gutenberg - native iOS and Android
JavaScript
254
star
7

WordPress-Editor-Android

โ›”๏ธ [DEPRECATED] A reusable Android rich text editor component.
Java
188
star
8

MediaPicker-iOS

WPMediaPicker is an iOS controller that allows capture and picking of media assets.
Objective-C
110
star
9

wpxmlrpc

A lightweight XML-RPC encoder/decoder for iOS, OS X, and tvOS
Objective-C
88
star
10

WordPress-API-iOS

A library to connect to WordPress sites using XML-RPC or the WordPress.com REST API
Objective-C
66
star
11

WordPress-FluxC-Android

WordPress Network and Persistence layer based on the Flux architecture
Kotlin
57
star
12

MediaEditor-iOS

Easy add image editing features to your iOS app! ๐Ÿ–ผ๏ธ
Swift
49
star
13

EmailChecker

Email checking library for Android and iOS
C++
46
star
14

WordPressKit-iOS

WordPressKit offers a clean and simple WordPress.com and WordPress.org network API.
Swift
42
star
15

swift-style-guide

Swift Style Guide
35
star
16

WordPress-Utils-Android

Common utilities used by WordPress-Android.
Java
33
star
17

release-toolkit

Shared tools used in release automation
Ruby
31
star
18

react-native-aztec

Wrapping Aztec Android and Aztec iOS in a React Native component
Java
29
star
19

cocoapods-repo-update

A CocoaPods plugin that updates your specs repos on pod install if needed.
Ruby
28
star
20

WordCamp-Android

WordCamp for Android
Java
24
star
21

WordPress-WindowsPhone

WordPress for WindowsPhone
C#
20
star
22

NSObject-SafeExpectations

No more crashes getting unexpected values from a NSDictionary
Objective-C
19
star
23

MediaPicker-Android

MediaPicker is an Android Fragment that allows capture and selection of media assets from a variety of sources.
Java
19
star
24

WordPress-iOS-Shared

Shared components used in building the WordPress iOS apps and other library components
Objective-C
18
star
25

WordPressAuthenticator-iOS

Swift
17
star
26

NSURL-IDN

Support for IDN (punycode) in NSURL
Objective-C
14
star
27

WordPress-Login-Flow-Android

Pluggable WordPress login flow for Android
Java
14
star
28

objective-c-style-guide

Objective-C Style Guide
12
star
29

test-cases

Test case repository for Gutenberg editor used in the WordPress mobile app
11
star
30

WordPressCom-Stats-iOS

โ›”๏ธ [DEPRECATED] Reusable component for displaying WordPress.com site stats in an iOS application
Objective-C
10
star
31

WordPressFlux-iOS

WordPressFlux
Swift
8
star
32

WordPressCom-Analytics-iOS

โ›”๏ธ [DEPRECATED] Library for handling Analytics tracking in WPiOS
Objective-C
8
star
33

WordPress-Networking-Android

Networking library used by WordPress-Android and other WordPress-*-Android components
Java
7
star
34

PersistentEditText-Android

Android EditText subclass with persistence
Java
7
star
35

WordPressUI-iOS

Swift
7
star
36

WordPress-BlackBerry-Legacy

WordPress for BlackBerry OS 7.1 and earlier.
Java
5
star
37

release-toolkit-gutenberg-mobile

Automation Scripts for Releasing Gutenberg-Mobile Updates to the WordPress Mobile Apps.
Go
5
star
38

circleci-orbs

The source code for some CircleCI orbs published by wordpress-mobile
Shell
5
star
39

GutenbergKit

Swift
5
star
40

WordPress-Analytics-Android

โ›”๏ธ [DEPRECATED] Library for handling Analytics tracking in WordPress Android.
Java
4
star
41

cocoapods-specs

Our internal CocoaPods spec repository for Automattic's internal pods
Ruby
4
star
42

WordPress-BlackBerry

WordPress for BlackBerry 10
C++
4
star
43

EmailChecker-Android

Email checking library for Android
Kotlin
3
star
44

WordCamp-iOS

WordCamp for iOS
3
star
45

WordPress-Editor-Common

Common code of Android and iOS rich text editor component.
JavaScript
3
star
46

WordPress-Android-Libraries-Gradle-Plugin

Gradle Plugin for WordPress Android library development setup
Groovy
3
star
47

test-case-reminder-bot

GitHub bot that drops a comment to the PR about what to test when a specific file changes in gutenberg repo. Test cases and configurations live in gutenberg-tests repo.
Ruby
3
star
48

WordPress-MediaPicker-Android

Kotlin
2
star
49

editor-test-ios

Objective-C
2
star
50

docker-glotpress-linter

A docker image that lints files before they're uploaded to GlotPress
PHP
2
star
51

WordPress-Ratings-iOS

Library for handling App Ratings Logic
Objective-C
2
star
52

WordPressMocks

Network mocking for testing the WordPress mobile apps
Java
2
star
53

app-secrets-management-ios

Files related to iOS application secrets management.
Shell
2
star
54

react-native-libraries-publisher

Shell
1
star
55

WordPress-Lint-Android

Pluggable lint module for WordPress-Android
Kotlin
1
star
56

automatization-scripts

Shell
1
star
57

docker-gb-mobile-image

Dockerfile
1
star
58

gutenberg-plugin-hello-world

JavaScript
1
star
59

WordPress-HealthCheck-iOS

Health check for common iOS problems
Shell
1
star
60

app-blocking-plugins

This repository contains a list of plugins that cause problems with WordPress Apps connecting correctly.
1
star
61

Pioupiou

Micro blogging app using your WordPress site as backend.
Java
1
star
62

WordPress-HealthCheck-Common

Health-Check cross-platform test cases
HTML
1
star