日韩电影高清,欧美亚洲蜜桃成熟,亚洲视频网站

【實用技能】通過JxBrowser將富文本編輯器嵌入到 Java 桌面應用程序

翻譯|使用教程|編輯：吉煒煒|2024-12-27 11:19:45.570|閱讀 99 次

概述：在本文中，我們將探討如何通過使用 JxBrowser 和 Quill.js 將現代富文本編輯器嵌入到 Java 桌面應用程序中，來克服 Swing、JavaFX 和 SWT 中內置編輯器的局限性。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

JxBrowser是一個跨平臺的 JVM 庫，它允許您將基于 Chromium 的 Browser 控件集成到 Compose、Swing、JavaFX、SWT 應用程序中，并使用 Chromium 的數百種功能。

點擊下載最新版JxBrowser

所有桌面工具包都提供文本編輯控件，從最基本的選項到更高級的選項。但是富文本編輯呢？是否有允許用戶格式化文本和添加圖片的控件？是否有可以在 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="http://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <link  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();
        ...
    }
}