Todos os kits de ferramentas desktop fornecem controles para edição de texto, desde os mais básicos até às opções mais avançadas. Mas e a edição de texto rico? Existem controles que permitam aos usuários formatar o texto e adicionar imagens? Existe algum editor WYSIWYG que possa ser utilizado numa aplicação Java?

Neste artigo, vamos explorar a forma de resolver este problema utilizando o JxBrowser e o Quill.js para incorporar editores de texto rico modernos em aplicações desktop Java.

Editores WYSIWYG incorporados em Java 

Os editores incorporados em Swing e JavaFX têm uma funcionalidade limitada e ficam aquém no fornecimento de capacidades avançadas, como formatação de texto, estilo e suporte multimídia. Também se debatem com a eficiência quando lidam com grandes volumes de dados ou estruturas de texto complexas. Entretanto, o SWT não fornece um editor de texto rico.

Editores WYSIWYG de terceiros para Java 

Em Swing 

No Swing, existem atualmente dois editores de texto disponíveis: JRichTextEditor e TinyMCE. O JRichTextEditor não é atualizado há nove anos, sendo que o seu último commit no GitHub data dessa altura, e a sua documentação está desatualizada. O TinyMCE, por outro lado, é um editor comercial pago e é baseado em nuvem por padrão. Para os programadores que procuram alternativas gratuitas, como o Quill ou soluções semelhantes, podem ser uma opção viável, oferecendo controle total sobre os seus dados sem depender de servidores externos.

Em JavaFX 

O JavaFX oferece duas opções de editor de texto rico: RichTextFX e RichTextArea, ambos modernos e com manutenção ativa. São kits capazes que lhe permitem construir um editor de texto rico , mas requerem uma boa dose de esforço DIY para pôr a funcionar.

Em SWT 

O SWT depende de widgets da interface do usuário fornecidos pelo sistema operacional e não tem um editor de texto rico incorporado, uma vez que os sistemas operacionais não fornecem tais widgets. O Nebula RichText oferece uma alternativa, mas funciona como um componente do navegador que incorpora o CKEditor e não como um editor autônomo.

Embora o Nebula RichText seja uma abordagem, utiliza um componente de navegador incorporado que pode não ser adequado para casos de utilização profissional. Uma opção mais flexível e poderosa é utilizar o JxBrowser, que permite incorporar um navegador na sua aplicação SWT, permitindo uma integração suave de qualquer editor WYSIWYG baseado na Web. Leia mais sobre como escolher o navegador para aplicações SWT e Eclipse.

Editores ativados pelo JxBrowser 

O JxBrowser permite a integração de editores modernos baseados na Web, ultrapassando as limitações dos editores incorporados. Escolha JxBrowser quando:

  • Os editores incorporados não são suficientemente funcionais.
  • Pretende personalizar o aspecto e o comportamento de um editor WYSIWYG.
  • Tem uma aplicação multiplataforma.
  • Pretende evitar dependências de nuvens de terceiros.

A capacidade do JxBrowser para incorporar aplicações Web assegura a integração eficaz de ferramentas como o Quill, fornecendo poderosas capacidades de edição de texto, personalização total e compatibilidade com Swing, JavaFX e SWT. Esta combinação funciona em todos os principais sistemas operacionais, mantendo uma experiência consistente para o usuário.

Aplicação Java com um editor WYSIWYG carregado no JxBrowser

Aplicação Java com um editor WYSIWYG carregado no JxBrowser.

Adicionar o JxBrowser ao projeto 

Nesta postagem do blog, adicionaremos o JxBrowser a um projeto Gradle. Se você estiver utilizando outro sistema de compilação, você pode utilizar os nossos artefatos Maven, adicionar os arquivos JAR ao classpath , ou mesmo criar um plug-in Eclipse autônomo.

Para adicionar o JxBrowser ao projeto, aplique o plug-in JxBrowser e adicione as dependências necessárias:

plugins {
   id("com.teamdev.jxbrowser") version "1.2.1"
}

jxbrowser {
   version = "8.2.1"
}

dependencies {

   // Adicione a dependência para a integração do JxBrowser com o Swing.
   //
   // Também, disponível: jxbrowser.swt, jxbrowser.javafx, jxbrowser.compose.
   implementation(jxbrowser.swing)

   // Adicione a dependência para binários Chromium para a plataforma atual.
   implementation(jxbrowser.currentPlatform)
}

Adicionar um editor de texto rico à aplicação Java 

Na abordagem sugerida, o editor de texto real é um widget JavaScript em a página Web. Vamos criar esta página:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Certifique-se de utilizar a última versão da biblioteca. -->
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
</head>
<body>
    <div id="editor"></div>
    <script>
        window.quill = new Quill('#editor', {
            theme: 'snow'
        });
    </script>
</body>
</html>

Depois disso, podemos copiar a página juntamente com os ativos JavaScript e CSS para os recursos do projeto.

Em seguida, vamos criar o browser e mostrar o editor:

private void addTextEditor(JPanel container) {
    var engine = Engine.newInstance(OFF_SCREEN);
    var browser = engine.newBrowser();
    var url = this.getClass().getClassLoader().getResource("editor.html");
    browser.navigation().loadUrl(url.toString());

    SwingUtilities.invokeLater(() -> {
        var view = BrowserView.newInstance(browser);
        container.add(view);        
    });
}

Acessar o texto formatado 

Para ler o texto da Quill, execute um código JavaScript simples:

String getFormattedText(Browser browser) {
    var frame = browser.mainFrame();
    if (frame.isPresent()) {
        return frame.get().executeJavaScript("quill.getSemanticHTML()");
    } else {
        throw new IllegalStateException("Couldn't obtain the text");
    }
}

A adição de conteúdo de volta à página também requer um único código JavaScript:

void setText(Browser browser, String text) {
    browser.mainFrame().ifPresent(frame -> {
        frame.executeJavaScript("quill.setText(\"%s\")".formatted(text));
    });
}

Conselhos práticos 

O exemplo acima demonstra um caso muito simples de utilização do JxBrowser como host para o editor de texto rico. Para as aplicações em produção, considere estas dicas:

  1. Reutilizar a instância Engine para otimizar o desempenho. Iniciar e parar o engine envolve a inicialização e o encerramento do processo principal do Chromium, que consome muitos recursos. Para evitar esta sobrecarga, recomendamos que crie o engine uma vez e o reutilize durante todo o processo.
  2. Aproveitar-se de profiles para isolamento. No ambiente multiusuário, os dados devem permanecer isolados e os perfis são a ferramenta para o conseguir. Criar um novo Profile para cada contexto de isolamento.
class Application {

    private static Engine engine;

    public static void main(String[] args) {
        if (engine == null) {
            // Criar o engine do navegador apenas uma vez.
            engine = Engine.newInstance(OFF_SCREEN);
        }

        // Criar um perfil separado para cada usuário.
        var bobProfile = engine.profiles().newIncognitoProfile("Bob");
        var browserOne = bobProfile.newBrowser();
        var browserTwo = bobProfile.newBrowser();

        var aliceProfile = engine.profiles().newIncognitoProfile("Alice");
        var browserThree = aliceProfile.newBrowser();
        var browserFour = aliceProfile.newBrowser();
        ...
    }
}

Conclusão 

Neste artigo, demonstramos como integrar editores de texto modernos e ricos em HTML em aplicações desktop Java utilizando o JxBrowser e o Quill.js. Esta abordagem ultrapassa as limitações dos editores incorporados em Swing, JavaFX e SWT, fornecendo funcionalidades avançadas e controle total sobre a edição de texto.

Enviando…

Desculpe, o envio foi interrompido

Tente novamente. Se o problema persistir, contate-nos através do endereço info@teamdev.com.

Leia e aceite os termos para continuar.

A sua chave de avaliação pessoal de JxBrowser e o guia de início rápido chegarão à sua caixa de entrada de e-mail dentro de alguns minutos.