Интеграция мобильных веб-редакторов Р7 на платформе IOS

Открытие редакторов Р7:

1. Загрузите и установите документ сервер.
2. Откройте проект EditorWebViewDemo.xcodeproj с помощью Xcode ↗, чтобы изменить фрагменты кода этого примера, чтобы ваша DMS работала правильно.
3. Создайте пустой html-файл.
4. Добавьте элемент div, как показано ниже:

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

5. Укажите ссылку на Сервер документов Р7 с API JavaScript, который будет использоваться для вашего сайта:

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

Где documentserver — это имя сервера, на котором установлен Сервер документов Р7.

6. Добавьте скрипт, инициализирующий редактор документов для элемента div с конфигурацией документа, который вы хотите открыть:

window.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        {external_config},
        "type": "mobile",
        "events": {
            "onAppReady": onAppReady,
            "onDocumentReady": onDocumentReady,
            "onDownloadAs": onDownloadAs,
            "onError": onError,
            "onInfo": onInfo,
            "onRequestClose": onRequestClose,
            "onRequestInsertImage": onRequestInsertImage,
            "onRequestUsers": onRequestUsers,
            "onWarning": onWarning,
        }
    });

7.  Чтобы начать работу с документами, откройте редактор Р7 на мобильном устройстве через компонент WKWebView. Для этого укажите контроллер EditorViewController. Запросите URL-адрес файла editor.html, получите его содержимое и замените параметр «{external_config}» конфигурацией из файла Samples.plist, где все примеры конфигураций распределены по категориям в соответствии с API documentation Try page:

private func load(){
    guard let url = Bundle.main.url(forResource: "editor", withExtension: "html") else {
        return
    }

    var html = ""

    do {
        html = try String(contentsOf: url)
    } catch{
        print(error)
    }

    html = html.replacingOccurrences(of: "{external_config}", with: config ?? "")
    webView.loadHTMLString(html, baseURL: nil)
}

Образцы редактора Р7

 

8.  На панели инструментов Xcode выберите схему сборки и устройство, на котором будет запускаться приложение. После этого выберите «Продукт» -> «Выполнить» или нажмите кнопку «Выполнить» на панели инструментов проекта, чтобы создать и запустить код.
9. На главном экране приложения выберите параметр «Использование конфигурации API», чтобы продемонстрировать, как открывать мобильные веб-редакторы Р7, используя конфигурацию редактора, описанную в документации API и примерах конфигурации.
10. На следующей странице выберите один из примеров конфигурации, чтобы открыть полученный HTML-код в компоненте WKWebView.

Работа с документами

Для работы с документами (открывать, скачивать, вставлять изображения, упоминать других пользователей и т. д.) используйте документацию API с ее событиями и методами:

1.  Чтобы отслеживать события и вызывать соответствующие методы, обрабатывайте события редакторов Р7 в нативном коде с помощью контроллера EditorEventsHandler, а затем делегируйте их в EditorViewController:

   var delegate: EditorEventsDelegate?
   
   convenience init(configuration: WKWebViewConfiguration){
       self.init()
      
       configuration.userContentController.add(self, name: EditorEvent.onDownloadAs.rawValue)
       ....
   }
   
   extension EditorEventsHandler: WKScriptMessageHandler {
       func userContentController(_ userContentController: WKUserContentController,
           didReceive message: WKScriptMessage){
           let event = EditorEvent(rawValue: message.name)
   
           switch event {
           case .onDownloadAs:
               guard
                   let json = message.body as? [String: Any],
                   let fileType = json["fileType"] as? String,
                   let url = json["url"] as? String
               else { return }
   
               delegate?.onDownloadAs(fileType: fileType, url: url)
           ...
           }
       }
   }
   

   В качестве примера рассмотрим событие onDownloadAs. Зарегистрируйте объект в качестве обработчика определенного сообщения, вызвав configuration.userContentController.add(self, name: messageName) во время настройки WKWebView. Получите параметры события (тип файла и URL-адрес) и делегируйте обработку события EditorViewController:

   func onDownloadAs(fileType: String, url: String){
       print("⚡ Р7 Document Editor create file: \(url)")
   }
   

2. Определите функцию callMethod для вызова методов API из нативного кода. В качестве аргументов он может принимать строковые, логические или объектные значения. Эта функция добавляет имя метода и его аргументы в строку с кодом JavaScript, а затем оценивает JavaScript в компоненте WKWebView с помощью метода evaluateJavaScript: 

   private func callMethod(function: String, arg: Bool){
       let javascript = "window.docEditor.\(function)(\(arg))"
       webView.evaluateJavaScript(javascript, completionHandler: nil)
   }
   
   private func callMethod(function: String, arg: String){
       let javascript = "window.docEditor.\(function)(\"\(arg)\")"
       webView.evaluateJavaScript(javascript, completionHandler: nil)
   }
   
   private func callMethod(function: String, arg: [String: Any]){
       guard
           let json = try? JSONSerialization.data(withJSONObject: arg, options: []),
           let jsonString = String(data: json, encoding: .utf8)
       else {
           return
       }
   
       let javascript = "window.docEditor.\(function)(\(jsonString))"
       webView.evaluateJavaScript(javascript, completionHandler: nil)
   }
   

3. Чтобы отобразить результат загрузки и печати документа, используйте контроллер PreviewController. Этот контроллер основан на QLPreviewController. Загрузите документ по его URL-адресу и установите для свойств dataSource и делегировать значение QLPreviewController:

   func present(url: URL, in parent: UIViewController, complation: @escaping (() -> Void)) {
       download(url: url) { fileUrl in
           DispatchQueue.main.async {
               guard let fileUrl = fileUrl else {
                   complation()
                   return
               }
   
               self.fileUrl = fileUrl
   
               let quickLookController = QLPreviewController()
               quickLookController.dataSource = self
               quickLookController.delegate = self
   
               if QLPreviewController.canPreview(fileUrl as QLPreviewItem) {
                   quickLookController.currentPreviewItemIndex = 0
                   parent.present(quickLookController, animated: true, completion: nil)
               }
               complation()
           }
       }
   }