如何通过JxBrowser将富文本编辑器嵌入到 Java 桌面应用程序中？

本文链接：https://blog.csdn.net/qq_36129733/article/details/144770293

JxBrowser（试用下载）是一个跨平台的 JVM 库，它允许您将基于 Chromium 的 Browser 控件集成到 Compose、Swing、JavaFX、SWT 应用程序中，并使用 Chromium 的数百种功能。

所有桌面工具包都提供文本编辑控件，从最基本的选项到更高级的选项。但是富文本编辑呢？是否有允许用户格式化文本和添加图片的控件？是否有可以在 Java 应用程序中使用的所见即所得编辑器？

在本文中，我们将探讨如何通过使用 JxBrowser 和 Quill.js 将现代富文本编辑器嵌入到 Java 桌面应用程序中来解决此问题。

Java 内置所见即所得编辑器

Swing 和 JavaFX 中的内置编辑器功能有限，无法提供文本格式、样式和多媒体支持等高级功能。在处理大量数据或复杂文本结构时，它们的效率也很差。同时，SWT 根本不提供富文本编辑器。

适用于 Java 的第三方所见即所得编辑器

在 Swing

在 Swing 中，目前有两个可用的文本编辑器：JRichTextEditor 和 TinyMCE。JRichTextEditor 已经九年没有更新了，最后一次在 GitHub 上提交也是在那时，而且它的文档已经过时了。另一方面，TinyMCE 是一个商业付费编辑器，默认情况下是基于云的。对于寻求免费替代方案的开发人员来说，像 Quill 或类似的解决方案可能是一个可行的选择，它们可以完全控制您的数据，而无需依赖外部服务器。

在 JavaFX 中

JavaFX 提供了两种富文本编辑器选项：RichTextFX 和 RichTextArea，这两种都是现代且维护良好的。它们是功能强大的工具包，可让您构建富文本编辑器，但需要相当多的 DIY 工作才能启动和运行。

在 SWT 中

SWT 依赖于操作系统提供的 UI 小部件，并且它没有内置的富文本编辑器，因为操作系统不提供此类小部件。Nebula RichText 提供了一种替代方案，但它作为嵌入 CKEditor 的浏览器组件而不是独立的编辑器。

虽然 Nebula RichText 是一种方法，但它使用内置浏览器组件，可能不适合专业用例。更灵活、更强大的选项是使用 JxBrowser，它允许您在 SWT 应用程序中嵌入浏览器，从而实现任何基于 Web 的所见即所得编辑器的顺利集成。

JxBrowser 支持的编辑器

JxBrowser 支持集成现代基于 Web 的编辑器，从而克服了内置编辑器的局限性。在以下情况下，请选择 JxBrowser：

内置编辑器功能不够强大。
您想要自定义所见即所得编辑器的外观和行为。
您有一个跨平台应用程序。
您想避免对第三方云的依赖。

JxBrowser 嵌入 Web 应用程序的能力确保了 Quill 等工具的有效集成，提供强大的文本编辑功能、完全自定义以及跨 Swing、JavaFX 和 SWT 的兼容性。这种组合可在所有主要操作系统上运行，从而保持一致的用户体验。

在 JxBrowser 中加载了所见即所得编辑器的 Java 应用程序。

将 JxBrowser 添加到项目中

在这篇博文中，我们将把 JxBrowser 添加到 Gradle 项目中。如果您使用的是其他构建系统，则可以使用我们的Maven 工件，将 JAR 文件添加到类路径，甚至创建独立的 Eclipse 插件。

要将 JxBrowser 添加到项目中，请应用 JxBrowser 插件并添加必要的依赖项：

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

jxbrowser {
   version = "8.2.1"
}

dependencies {

   // Add the dependency to JxBrowser integration with Swing.
   //
   // Also, available: jxbrowser.swt, jxbrowser.javafx, jxbrowser.compose.
   implementation(jxbrowser.swing)

   // Add the dependency to Chromium binaries for the current platform.
   implementation(jxbrowser.currentPlatform)
}

向 Java 应用程序添加富文本编辑器

在建议的方法中，实际的文本编辑器是网页上的 JavaScript 小部件。让我们创建此页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Make sure to use the latest verion of the library. -->
    <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>

之后，我们可以将页面连同 JavaScript 和 CSS 资产一起复制到项目的资源中。

然后，让我们创建浏览器并显示编辑器：

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

访问格式化的文本

要从 Quill 读取文本，请执行一个简单的 JavaScript 代码：

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

将内容添加回页面也需要一段 JavaScript 代码：

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

实用建议

上面的示例演示了使用 JxBrowser 作为富文本编辑器主机的一个非常简单的案例。对于生产中的应用程序，请考虑以下提示：

重复使用Engine实例以优化性能。启动和停止引擎涉及启动和关闭主 Chromium 进程，这会占用大量资源。为了避免这种开销，我们建议创建一次引擎并在整个过程中重复使用它。
利用配置文件进行隔离。在多用户环境中，数据必须保持隔离，配置文件是实现此目的的工具。Profile为每个隔离上下文创建一个新的配置文件。

class Application {

    private static Engine engine;

    public static void main(String[] args) {
        if (engine == null) {
            // Create the browser engine only once.
            engine = Engine.newInstance(OFF_SCREEN);
        }

        // Create a separate profile for each user.
        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();
        ...
    }
}