AztecEditor Android Download - AztecEditor Android Code source Télécharger

AztecEditor Android

Autres ressources

v2.1.4

Télécharger

Aztec: éditeur HTML natif pour Android

Aztec (qui étend EditText) est un composant d'éditeur de texte riche pour écrire des documents HTML dans Android.

Version minimale prise en charge Android

Vous pouvez vérifier la version Android minimale prise en charge en regardant la configuration minSdkVersion dans build.gradle.

Éditeur visuel

Commencer

Déclarez les principaux composants de votre disposition:

Éditeur visuel

< 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 " />

Rédacteur en chef

< 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 " />

Barre d'outils

< 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 " />

Gonflez les vues:

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

Configurez Aztec avec un chargeur d'image et vidéo fourni:

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

Pour plus d'options, telles que Modifier l'historique, les auditeurs et les plugins, veuillez vous référer à l'implémentation de l'application de démonstration.

Construire et tester

Construisez la bibliothèque, créez l'exemple de projet et exécutez des tests unitaires:

$ ./gradlew build

Exécutez les tests unitaires uniquement:

$ ./gradlew test

Avant d'exécuter des tests d'instrumentation

Espresso conseille les animations du système de désactivation sur les appareils utilisés pour les tests:

Sur votre appareil, sous Paramètres-> Options du développeur Désactivez les 3 paramètres suivants:
Échelle d'animation de fenêtre
Échelle d'animation de transition
Échelle de durée de l'animateur

Une étape de configuration supplémentaire est également nécessaire pour gérer un problème d'espresso en clics (voir les mises en garde ci-dessous):

Sur votre appareil, sous Paramètres -> Accessibilité -> Touchez et maintenez-vous, définissez le retard sur Long .

Exécutez les tests d'instrumentation:

$ ./gradlew cAT

Intégration de l'aztec dans votre projet

 repositories {
    maven { url " https://a8c-libs.s3.amazonaws.com/android " }
}

 dependencies {
    api " org.wordpress:aztec:v1.6.2 "
}

Les développeurs courageux peuvent soit utiliser le projet comme distribution de source ou s'amuser avec le dernier instantané à leurs propres risques:

 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

Vous pouvez utiliser l'API pour modifier le comportement aztec.

Éléments de la barre d'outils

Si vous souhaitez limiter les fonctionnalités fournies par la bibliothèque Aztec, vous pouvez le modifier en appelant la méthode setToolbarItems sur AztecToolbar . L'exemple suivant permettra uniquement les éléments bold , plugins et list des éléments dans l'ordre donné.

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

Vous pouvez définir de nouveaux éléments qui ne sont pas activés par défaut. ToolbarAction.CODE et ToolbarAction.PRE .

CODE représente le code HTML en ligne
PRE représente un bloc de préformat (y compris le bloc de code)

Liste de tâches

Il existe un type de liste facultatif que vous pouvez activer dans l'éditeur. En plus des listes commandées et non ordonnées, vous pouvez utiliser task list . Une liste de tâches est une liste non ordonnée qui affiche et enregistre des cases à cocher au lieu des balles. Activez-le en appelant la méthode suivante.

aztecToolbar.enableTaskList()

Blocs imbriqués

Par défaut, Aztec autorise les blocs imbriqués. Dans certains cas, cela ne doit pas être le comportement préféré. Il existe une option pour désactiver les blocs imbriqués. Lorsqu'il est commuté, cet éditeur ajoutera toujours des médias et une règle horizontale après le bloc actuellement sélectionné, pas au milieu de celui-ci.

aztecText.addMediaAfterBlocks()

API d'espace réservé

Aztec prend désormais en charge les espaces réservés pour dessiner des vues qui ne sont pas soutenues nativement par l'API EditText et spannable. La fonctionnalité crée une portée dans l'éditeur visuel et dessine une vue Android dessus. La vue est déplacée lorsque l'utilisateur change quoi que ce soit dans l'éditeur et vous permet de dessiner des choses comme une vidéo qui peut être lu en ligne dans l'éditeur. Afin d'utiliser l'API, vous devez créer une instance de PlaceholderManager et l'initialiser dans votre appel onCreate comme ceci:

 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()
}

Vous pouvez créer un PlaceholderAdapter personnalisé pour préparer et dessiner votre vue. Vous pouvez vérifier l'échantillon ImageWithCaptionAdapter qui dessine une vue Android simple avec une image et une légende. Cependant, vous pouvez implémenter des choses comme la vue YouTube ou la vue Video avec des contrôles de lecture. N'oubliez pas d'enregistrer votre PlaceholderAdapter à ceci:

placeholderManager.registerAdapter( ImageWithCaptionAdapter ())

Une fois que vous avez initialisé le gestionnaire et l'adaptateur, vous pouvez utiliser les méthodes de gestionnaire pour insérer ou supprimer les espaces réservés.

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

Formatage de code

Nous utilisons KTLINT pour la lie de Kotlin. Vous pouvez exécuter Ktlint en utilisant ./gradlew ktlint , et vous pouvez également exécuter ./gradlew ktlintFormat pour le format automatique. Il n'y a aucune idée du plugin (comme Checkstyle) pour le moment.