Download AztecEditor Android - Download do código -fonte AztecEditor Android

AztecEditor Android

Outros recursos

v2.1.4

Baixar

AZTEC: Editor de HTML nativo para Android

O Aztec (que estende o EditText) é um componente editor de texto rico para escrever documentos HTML no Android.

Versão mínima suportada pelo Android

Você pode verificar a versão mínima do Android suportada analisando a configuração minSdkVersion no Build.gradle.

Editor visual

Começando

Declare os principais componentes do seu layout:

Editor visual

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

Editor de origem

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

Barra de ferramentas

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

Inflar as vistas:

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

Configure astec com uma imagem fornecida e carregadores de vídeo:

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

Para obter mais opções, como histórico de edição, ouvintes e plugins, consulte a implementação do aplicativo de demonstração.

Construir e testar

Crie a biblioteca, crie o projeto de exemplo e execute testes de unidade:

$ ./gradlew build

Execute testes de unidade apenas:

$ ./gradlew test

Antes de executar testes de instrumentação

Espresso aconselha as animações do sistema desativado sobre dispositivos usados para testar:

No seu dispositivo, em Configurações-> Opções do desenvolvedor Desativar as três configurações a seguir:
Escala de animação de janelas
Escala de animação de transição
Escala de duração do animador

Uma etapa de configuração adicional também é necessária para lidar com um problema de café expresso com cliques (consulte as advertências abaixo):

No seu dispositivo, em Configurações -> Acessibilidade -> Toque e mantenha atrasado, defina o atraso como Long .

Execute os testes de instrumentação:

$ ./gradlew cAT

Integração do asteca em seu projeto

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

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

Desenvolvedores corajosos podem usar o projeto como distribuição de origem ou se divertir com o instantâneo mais recente por seu próprio risco:

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

Modificações

Você pode usar a API para modificar o comportamento asteca.

Itens da barra de ferramentas

Se você deseja limitar a funcionalidade que a biblioteca asteca fornece, poderá alterá -la chamando o método setToolbarItems no AztecToolbar . O exemplo a seguir permitirá apenas itens bold , plugins e list no pedido especificado.

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

Você pode definir novos itens que não estão ativados por padrão. ToolbarAction.CODE e ToolbarAction.PRE .

CODE representa o código HTML embutido
PRE representa um bloco de pré -formato (incluindo bloco de código)

Lista de tarefas

Existe um tipo de lista opcional que você pode ativar no editor. Além de listas ordenadas e não ordenadas, você pode usar task list . Uma lista de tarefas é uma lista não ordenada que mostra e salva caixas de seleção em vez das balas. Ative -o chamando o seguinte método.

aztecToolbar.enableTaskList()

Blocos aninhados

Por padrão, asteca permite blocos aninhados. Em certos casos, isso não precisa ser o comportamento preferido. Há uma opção para desativar blocos aninhados. Quando trocado, este editor sempre adicionará mídia e regra horizontal após o bloco atualmente selecionado, não no meio dela.

aztecText.addMediaAfterBlocks()

API de espaço reservado

O Aztec agora suporta os espaços reservados para desenhar visões que não são apoiadas nativamente pela API EdittExt e Snapanable. A funcionalidade cria uma extensão no editor visual e desenha uma visão do Android sobre ela. A visualização é movida quando o usuário altera qualquer coisa no editor e permite desenhar coisas como vídeo que podem ser reproduzidas em linha no editor. Para usar a API, você deve criar uma instância do PlaceholderManager e inicializá -la em sua chamada onCreate assim:

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

Você pode criar um PlaceholderAdapter personalizado para preparar e desenhar sua visão. Você pode verificar a amostra ImageWithCaptionAdapter , que desenha uma visão simples do Android com uma imagem e uma legenda. No entanto, você pode implementar coisas como a visualização YouTube ou Video com controles de reprodução. Não se esqueça de registrar seu PlaceholderAdapter como este:

placeholderManager.registerAdapter( ImageWithCaptionAdapter ())

Depois de inicializar o gerente e o adaptador, você pode usar os métodos do gerente para inserir ou remover os espaços reservados.

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

Formatação de código

Usamos o KTLINT para Kotlin Lining. Você pode executar o ktlint usando ./gradlew ktlint e também pode executar ./gradlew ktlintFormat para formatação automática. Não há idéia do plug -in (como o Checkstyle's) neste momento.