Integrating ONLYOFFICE mobile web editors

    Please note that ONLYOFFICE mobile web editors are available only for commercial builds of Enterprise and editions.

    • iOS
    • Android

    In this section, we will look at the integration process via WKWebView using the mobile demo sample for iOS which is available on .

    This example demonstrates how to integrate ONLYOFFICE mobile web editors with the ONLYOFFICE .

    Opening ONLYOFFICE editors

    1. Download and install ONLYOFFICE Docs Enterprise or edition.
    2. Download the mobile demo sample for iOS from GitHub.
    3. Open the EditorWebViewDemo.xcodeproj project with to modify code fragments of this example for your DMS to work correctly.

    4. To display the main page of your DMS, specify the address of the Document Server web interface in the value of the DocumentServerURL property in the Info.plist file:

      where the documentserver is the name of the server with the ONLYOFFICE Document Server installed.

      If DocumentServerURL is specified, the DMS main page is loaded. Otherwise, an error occurs:

      2.     if documentServerUrlString.isEmpty {
      3.         showAlert(title: "Error", message: "You must specify the document server address, the \"DocumentServerURL\" value in the Info.plist file.")
      4.         return
      5.     }
      7.     guard let url = URL(string: documentServerUrlString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? "") else {
      8.         return
      9.     }
      11.     webView.load(URLRequest(url: url))
      12. }

      iOS error

      DocumentServerURL is not specified

      DocumentServerURL is specified

    5. Use the DocumentServerViewController controller to open the editors correctly on iOS devices. In this controller, define a function to open a document via WKWebView component. First, request an absolute URL and check if it contains the “/editor?” string. If so, add an additional query parameter (the mobile platform type) to the link:

      1. private var openDocumentMarker = "/editor?"
      2. private var additionalQueryParameters = ["type": "mobile"]
      4. func webView(_ webView: WKWebView,
      5.     decidePolicyFor navigationAction:
      6.     WKNavigationAction,
      7.     decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)
      8. {
      9.     guard let urlString = navigationAction.request.url?.absoluteString else {
      10.         decisionHandler(.cancel)
      11.         return
      12.     }
      14.     if urlString.contains(openDocumentMarker),
      15.        let redirectUrl = navigationAction.request.url?.appendingQueryParameters(additionalQueryParameters)
      16.     {
      17.         decisionHandler(.cancel)
      18.         navigator.navigate(to: .documentServerEditor(url: redirectUrl))
      19.     } else {
      20.         reloadItem.isEnabled = true
      21.         backItem.isEnabled = webView.canGoBack
      22.         forwardItem.isEnabled = webView.canGoForward
      24.         title = navigationAction.request.url?.host ?? ""
      26.         decisionHandler(.allow)
      27.     }
      29. }

    6. In the DocumentServerViewController controller, create the navigation actions available on the DMS main page. For example, in our test sample, they are specified with the interface elements such as the Reload, Back, and Forward buttons.

    7. For easy interaction with the editor, define the Activity Indicator and Progress View UI components.

      The full code for DocumentServerViewController can be found here.

      Activity indicator

      Activity Indicator

      Progress View

      Buttons

      Buttons

      1. private func configureView() {
      2.     let preferences = WKPreferences()
      3.     let configuration = WKWebViewConfiguration()
      4.     preferences.javaScriptEnabled = true
      5.     configuration.preferences = preferences
      7.     webView = WKWebView(frame: .zero, configuration: configuration)
      9.     view.addSubview(webView)
      10.     webView.translatesAutoresizingMaskIntoConstraints = false
      12.     webView.navigationDelegate = self
      13.     webView.uiDelegate = self
      15.     if let webViewSuperview = webView.superview {
      16.         webView.topAnchor.constraint(equalTo: webViewSuperview.topAnchor).isActive = true
      17.         webView.leadingAnchor.constraint(equalTo: webViewSuperview.leadingAnchor).isActive = true
      18.         webView.bottomAnchor.constraint(equalTo: webViewSuperview.bottomAnchor).isActive = true
      19.         webView.trailingAnchor.constraint(equalTo: webViewSuperview.trailingAnchor).isActive = true
      20.     }
      21. ...
      22. }

    9. In the Xcode toolbar, select a build scheme and a device where the app will be run. After that, choose Product -> Run, or click the Run button in the project toolbar to build and run your code.

    10. On the main screen of the application, select the Using DocumentServer option to demonstrate an example of integrating ONLYOFFICE mobile web editors with the ONLYOFFICE test or DMS sample.

    Closing ONLYOFFICE editors

    Use the DocumentServerEditorViewController controller to exit from the editor. For example, in the current test samples the Go back button is created to navigate to the previous screen:

    1. private let goBackUrl = Bundle.main.object(forInfoDictionaryKey: "DocumentServerURL") as? String ?? ""
    3. func webView(_ webView: WKWebView,
    4.     decidePolicyFor navigationAction: WKNavigationAction,
    5.     decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)
    6. {
    7.         decisionHandler(.cancel)
    8.         return
    9.     }
    11.     if urlString == goBackUrl {
    12.         decisionHandler(.cancel)
    13.         navigationController?.popViewController(animated: true)
    14.     } else {
    15.         decisionHandler(.allow)
    16.     }
    17. }

    Button to exit the editor

    The full code for DocumentServerEditorViewController can be found .

    This example demonstrates how to open the ONLYOFFICE editors via WKWebView using the editor configuration described in the and the configuration examples.

    iOS integration via api

    Opening ONLYOFFICE editors

    1. Download and install ONLYOFFICE Docs or Developer edition.
    2. Download the mobile demo sample for iOS from .
    3. Open the EditorWebViewDemo.xcodeproj project with Xcode to modify code fragments of this example for your DMS to work correctly.

    4. Create an empty html file. The demo project resource is used as a template.

    5. Add the div element as shown below:

      1. <div id="placeholder"></div>

    6. Specify your ONLYOFFICE Document Server link with the JavaScript API that will be used for your website:

      where the documentserver is the name of the server with the ONLYOFFICE Document Server installed.

    7. Add the script initializing the Document Editor for the div element with the configuration for the document you want to open:

      1. window.docEditor = new DocsAPI.DocEditor("placeholder",
      2.     {
      3.         {external_config},
      4.         "type": "mobile",
      5.         "events": {
      6.             "onAppReady": onAppReady,
      7.             "onDocumentReady": onDocumentReady,
      8.             "onDownloadAs": onDownloadAs,
      9.             "onError": onError,
      10.             "onInfo": onInfo,
      11.             "onRequestClose": onRequestClose,
      12.             "onRequestInsertImage": onRequestInsertImage,
      13.             "onRequestUsers": onRequestUsers,
      14.             "onWarning": onWarning,
      15.         }
      16.     });

    8. To start working with documents, display the ONLYOFFICE editor on your mobile device via the WKWebView component. To do this, specify the EditorViewController controller. Request the URL to the editor.html file, get its contents and replace the “{external_config}” parameter with a config from the samples.plist file where all the sample configurations are categorized according to API documentation Try page:

      1. private func load() {
      2.     guard let url = Bundle.main.url(forResource: "editor", withExtension: "html") else {
      3.         return
      4.     }
      6.     var html = ""
      8.     do {
      9.         html = try String(contentsOf: url)
      10.     } catch {
      11.         print(error)
      12.     }
      14.     html = html.replacingOccurrences(of: "{external_config}", with: config ?? "")
      15.     webView.loadHTMLString(html, baseURL: nil)
      16. }

      ONLYOFFICE Editor Samples

      The full code for EditorViewController can be found .

    9. In the Xcode toolbar, select a build scheme and a device where the app will be run. After that, choose Product -> Run, or click the Run button in the project toolbar to build and run your code.

    10. On the main screen of the application, select the Using API Configuration option to demonstrate how to open the ONLYOFFICE mobile web editors using the editor configuration described in the API documentation and the configuration examples.
    11. On the next page, choose one of the configuration samples to open the resulting HTML in the WKWebView component.

    Working with documents

    To work with documents (open, download, insert images, mention other users, etc.), use the API documentation with its events and methods:

    1. To track events and call appropriate methods, handle the events of ONLYOFFICE editors in native code by the EditorEventsHandler controller and then delegate them to EditorViewController:

      1. var delegate: EditorEventsDelegate?
      3. convenience init(configuration: WKWebViewConfiguration) {
      4.     self.init()
      6.     configuration.userContentController.add(self, name: EditorEvent.onDownloadAs.rawValue)
      7.     ....
      8. }
      10. extension EditorEventsHandler: WKScriptMessageHandler {
      11.     func userContentController(_ userContentController: WKUserContentController,
      12.         didReceive message: WKScriptMessage)
      13.     {
      14.         let event = EditorEvent(rawValue: message.name)
      16.         switch event {
      17.         case .onDownloadAs:
      18.             guard
      19.                 let json = message.body as? [String: Any],
      20.                 let fileType = json["fileType"] as? String,
      21.                 let url = json["url"] as? String
      22.             else { return }
      24.             delegate?.onDownloadAs(fileType: fileType, url: url)
      25.         ...
      26.         }
      27.     }
      28. }
      1.     print("⚡ ONLYOFFICE Document Editor create file: \(url)")
      2. }

    2. Define the callMethod function to call from native code. It can take string, boolean or object values as arguments. This function adds the method name and its arguments to the string with the JavaScript code and then evaluates JavaScript in the WKWebView component with the evaluateJavaScript method:

      1. private func callMethod(function: String, arg: Bool) {
      3.     webView.evaluateJavaScript(javascript, completionHandler: nil)
      4. }
      6. private func callMethod(function: String, arg: String) {
      7.     let javascript = "window.docEditor.\(function)(\"\(arg)\")"
      8.     webView.evaluateJavaScript(javascript, completionHandler: nil)
      9. }
      11. private func callMethod(function: String, arg: [String: Any]) {
      12.     guard
      13.         let json = try? JSONSerialization.data(withJSONObject: arg, options: []),
      14.         let jsonString = String(data: json, encoding: .utf8)
      15.     else {
      16.         return
      17.     }
      19.     let javascript = "window.docEditor.\(function)(\(jsonString))"
      20.     webView.evaluateJavaScript(javascript, completionHandler: nil)
      21. }

      The full code for EditorEventsHandler can be found here.

    3. To display the result of downloading and printing a document, use the PreviewController controller. This controller is based on QLPreviewController. Download a document by its URL and set the dataSource and delegate properties to QLPreviewController:

      The full code for PreviewController can be found .

    In this section, we will look at the integration process via WebView using the mobile demo sample for Android which is available on .

    This example demonstrates how to integrate ONLYOFFICE mobile web editors with the ONLYOFFICE .

    Android integration via test sample

    Opening ONLYOFFICE editors

    1. Download and install ONLYOFFICE Docs Enterprise or edition.
    2. Download the mobile demo sample for Android from GitHub.
    3. Open the top-level build.gradle file with to modify code fragments of this example for your DMS to work correctly.

    4. To display the main page of your DMS, specify the address of the Document Server web interface in the value of the DOCUMENT_SERVER_URL property in the module-level build.gradle file:

      1. buildConfigField("String", "DOCUMENT_SERVER_URL", "https://documentserver/")

      where the documentserver is the name of the server with the ONLYOFFICE Document Server installed.

      If DOCUMENT_SERVER_URL is specified, the DMS main page is loaded. Otherwise, an error occurs:

      1. private fun showDialog() {
      2.     AlertDialog.Builder(requireContext())
      3.     .setMessage("Document server url is empty.\nYou must specify the address in build.gradle")
      4.     .setPositiveButton("Ok") { dialog, _ ->
      5.         dialog.dismiss()
      6.         requireActivity().finish()
      7.     }
      8.     .create()
      9.     .show()
      10. }

      DocumentServerURL is not specified

      Android managing

      DocumentServerURL is specified

    5. Use the MainFragment.kt controller to open the editors correctly on Android devices. In this controller, define a function to open a document via WebView component. Request a URL and check if it contains the “editor” string which specifies that the document will be opened:

      1. private class MainWebViewClient(private val navController: NavController) : WebViewClient() {
      3.     override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
      4.         val url = request?.url
      5.         if (url != null) {
      6.             val path = url.path
      7.             if (path?.contains("editor") == true) {
      8.                 navController.navigate(R.id.action_mainFragment_to_editorFragment, Bundle(1).apply {
      9.                     putString("document_url", url.toString())
      10.                 })
      11.                 return true
      12.             }
      13.             return false
      14.         }
      15.         return super.shouldOverrideUrlLoading(view, request)
      16.     }
      18. }

      The full code for MainFragment.kt can be found here.

    6. To start working with documents, display the ONLYOFFICE editor on your mobile device via the WebView component. To do this, set up WebView and layout in the EditorFragment.kt controller as follows:

      1. @SuppressLint("SetJavaScriptEnabled")
      2. private fun setSettings() {
      3.     webView?.settings?.apply {
      4.         javaScriptEnabled = true
      5.         javaScriptCanOpenWindowsAutomatically = true
      6.         loadWithOverviewMode = true
      7.         cacheMode = WebSettings.LOAD_NO_CACHE
      8.         domStorageEnabled = true
      9.     }
      10.     webView?.webViewClient = EditorWebViewClient(findNavController())
      11. }

    7. In the Android Studio toolbar, select your application and the device where the app will be run. After that, click the Run button in the project toolbar to build and run your code.

    8. The application will be opened to demonstrate an example of integrating ONLYOFFICE mobile web editors with the ONLYOFFICE test or DMS sample.

    Closing ONLYOFFICE editors

    Use the EditorFragment.kt controller to exit from the editor:

    1. private class EditorWebViewClient(private val navController: NavController) : WebViewClient() {
    3.     override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
    4.         request?.url?.let { url ->
    5.             if (!url.toString().contains("editor")) {
    6.                 navController.popBackStack()
    7.                 return true
    8.             }
    9.         }
    10.         return super.shouldOverrideUrlLoading(view, request)
    11.     }
    12. }

    The full code for EditorFragment.kt can be found .