亚洲免费自拍视频,成人动漫在线播放,日韩丝袜在线观看

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

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

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

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

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

點擊下載最新版JxBrowser

所有桌面工具包都提供文本編輯控件，從最基本的選項到更高級的選項。但是富文本編輯呢？是否有允許用戶格式化文本和添加圖片的控件？是否有可以在 Java 應(yīng)用程序中使用的所見即所得編輯器？

在本文中，我們將探討如何通過使用 JxBrowser 和 Quill.js 將現(xiàn)代富文本編輯器嵌入到 Java 桌面應(yīng)用程序中來解決此問題。

Java 內(nèi)置所見即所得編輯器

Swing 和 JavaFX 中的內(nèi)置編輯器功能有限，無法提供文本格式、樣式和多媒體支持等高級功能。在處理大量數(shù)據(jù)或復雜文本結(jié)構(gòu)時，它們的效率也很差。同時，SWT 根本不提供富文本編輯器。

適用于 Java 的第三方所見即所得編輯器

在 Swing

在 Swing 中，目前有兩個可用的文本編輯器：JRichTextEditor 和 TinyMCE。JRichTextEditor 已經(jīng)九年沒有更新了，最后一次在 GitHub 上提交也是在那時，而且它的文檔已經(jīng)過時了。另一方面，TinyMCE 是一個商業(yè)付費編輯器，默認情況下是基于云的。對于尋求免費替代方案的開發(fā)人員來說，像 Quill 或類似的解決方案可能是一個可行的選擇，它們可以完全控制您的數(shù)據(jù)，而無需依賴外部服務(wù)器。

在 JavaFX 中

JavaFX 提供了兩種富文本編輯器選項：RichTextFX 和 RichTextArea，這兩種都是現(xiàn)代且維護良好的。它們是功能強大的工具包，可讓您構(gòu)建富文本編輯器，但需要相當多的 DIY 工作才能啟動和運行。

在 SWT 中

SWT 依賴于操作系統(tǒng)提供的 UI 小部件，并且它沒有內(nèi)置的富文本編輯器，因為操作系統(tǒng)不提供此類小部件。Nebula RichText 提供了一種替代方案，但它作為嵌入 CKEditor 的瀏覽器組件而不是獨立的編輯器。

雖然 Nebula RichText 是一種方法，但它使用內(nèi)置瀏覽器組件，可能不適合專業(yè)用例。更靈活、更強大的選項是使用 JxBrowser，它允許您在 SWT 應(yīng)用程序中嵌入瀏覽器，從而實現(xiàn)任何基于 Web 的所見即所得編輯器的順利集成。

JxBrowser 支持的編輯器

JxBrowser 支持集成現(xiàn)代基于 Web 的編輯器，從而克服了內(nèi)置編輯器的局限性。在以下情況下，請選擇 JxBrowser：

內(nèi)置編輯器功能不夠強大。
您想要自定義所見即所得編輯器的外觀和行為。
您有一個跨平臺應(yīng)用程序。
您想避免對第三方云的依賴。

JxBrowser 嵌入 Web 應(yīng)用程序的能力確保了 Quill 等工具的有效集成，提供強大的文本編輯功能、完全自定義以及跨 Swing、JavaFX 和 SWT 的兼容性。這種組合可在所有主要操作系統(tǒng)上運行，從而保持一致的用戶體驗。

在 JxBrowser 中加載了所見即所得編輯器的 Java 應(yīng)用程序。

將 JxBrowser 添加到項目中

在這篇博文中，我們將把 JxBrowser 添加到 Gradle 項目中。如果您使用的是其他構(gòu)建系統(tǒng)，則可以使用我們的Maven 工件，將 JAR 文件添加到類路徑，甚至創(chuàng)建獨立的 Eclipse 插件。

要將 JxBrowser 添加到項目中，請應(yīng)用 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 應(yīng)用程序添加富文本編輯器

在建議的方法中，實際的文本編輯器是網(wǎng)頁上的 JavaScript 小部件。讓我們創(chuàng)建此頁面：

<!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 資產(chǎn)一起復制到項目的資源中。

然后，讓我們創(chuàng)建瀏覽器并顯示編輯器：

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 讀取文本，請執(zhí)行一個簡單的 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");
    }
}

將內(nèi)容添加回頁面也需要一段 JavaScript 代碼：

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

實用建議

上面的示例演示了使用 JxBrowser 作為富文本編輯器主機的一個非常簡單的案例。對于生產(chǎn)中的應(yīng)用程序，請考慮以下提示：

重復使用Engine實例以優(yōu)化性能。啟動和停止引擎涉及啟動和關(guān)閉主 Chromium 進程，這會占用大量資源。為了避免這種開銷，我們建議創(chuàng)建一次引擎并在整個過程中重復使用它。
利用配置文件進行隔離。在多用戶環(huán)境中，數(shù)據(jù)必須保持隔離，配置文件是實現(xiàn)此目的的工具。Profile為每個隔離上下文創(chuàng)建一個新的配置文件。

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