Python

25 mai, 2020

Integrar editores de documento a um aplicativo Python

100 visualizações
Publicidade

Neste artigo, nós vamos mostrar a você como integrar editores de documento ao seu aplicativo Python.
Para isso, criaremos um sistema simples de gerenciamento de documentos e integraremos a ele os editores de documento ONLYOFFICE de código aberto.

DMS em Python

Nesta parte, escreveremos um aplicativo Python para mostrar a integração ao ONLYOFFICE. É muito provável que o aplicativo no qual você planeja integrar os editores tenha uma lista de arquivos que você precisa abrir para visualização/edição. Por isso, vamos criar um aplicativo com esse recurso. O aplicativo também deve permitir o download de arquivos.

Para o aplicativo, usaremos uma estrutura Bottle. Você pode instalá-lo no diretório de trabalho usando o comando `pip install bottle`. Agora precisamos criar os arquivos `main.py` (o código do aplicativo) и `index.tpl` (modelo) e, em seguida, adicionar o seguinte código ao arquivo `main.py`:

```python

from bottle import route, run, template, get, static_file # connecting the framework and the necessary components

@route('/') # setting up routing for requests for /

def index():

    return template('index.tpl')  # showing template in response to request



run(host="localhost", port=8080)  # running the application on port 8080

```

Quando iniciamos o aplicativo, vemos uma página vazia em `http: // localhost:8080`. Agora precisamos adicionar os arquivos para abrir e criar uma lista de seus nomes no modelo. Em seguida, criamos uma pasta `files` e colocamos nela três arquivos (docx, xlsx e pptx).

Usaremos o componente `listdir` para ler seus nomes.
`from os import listdir`

Agora, vamos criar uma variável para todos os nomes de arquivo da pasta ‘files’.

`sample_files = [f for f in listdir('files')]`

Para usar essa variável no modelo, precisamos passar pelo método `template`.

```python

def index():

    return template('index.tpl', sample_files=sample_files)

```

Vamos mostrar essa variável no modelo:

```

%for file in sample_files:

    <div>

        <span>{{file}}</span>

    </div>

% end

```

Após reiniciar o aplicativo, podemos ver a lista de nomes de arquivos na página. Agora, temos que disponibilizar esses arquivos para todos os usuários do aplicativo.

Aqui está um novo método para fazer isso:

```python

@get("/files/<filepath:re:.*\.*>")

def show_sample_files(filepath):
   return static_file(filepath, root="files")

```

Como visualizar documentos em seu aplicativo Python

Instale o Servidor de Documentos com os editores do ONLYOFFICE. Há muitas opções de instalação, mas recomendamos usar o Docker:

Conecte a API dos editores de documentos no modelo:

```html

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

```

`editor_url` é um link para editores de documentos.

Um botão para abrir cada arquivo para visualização:

```html

<button onclick="view('files/{{file}}')">view</button>

```

Agora, precisamos adicionar uma div com `id`:

```html

<div id="editor"></div>

```

O editor de documentos será aberto nesta div. Mas apenas depois que chamarmos uma função que abrirá o editor.

``html

<script>

function view(filename) {

    if (/docx$/.exec(filename)) {

        filetype = "text"

    }

    if (/xlsx$/.exec(filename)) {

        filetype = "spreadsheet"

    }

    if (/pptx$/.exec(filename)) {

        filetype = "presentation",

        title: filename

    }


    new DocsAPI.DocEditor("editor",

        {

            documentType: filetype,

            document: {

                url: "host_url" + '/' + filename,

                title: filename

            },

            editorConfig: {mode: 'view'}

        });

  }
</script>

```

Há dois argumentos para a função DocEditor: `id` do elemento onde os editores serão abertos, e json com as configurações dos editores.

Todos os parâmetros podem ser encontrados na documentação oficial da API. Neste exemplo, usamos os parâmetros obrigatórios `documentType`, `document.url` e `editorConfig.mode`. Também vamos adicionar `title` – este é o nome do arquivo que será exibido nos editores.

O tipo de documento (`documentType`) será identificado por seu formato (docx para textos, xlsx para planilhas, pptx para apresentações).

Preste atenção ao `document.url`. Este é o link para o arquivo que vamos abrir.

Portanto, agora temos tudo para ver os documentos em nosso aplicativo Python.

Como editar arquivos

Vamos adicionar o botão “Editar”:

```html

<button onclick="edit('files/{{file}}')">edit</button>

```

Agora, precisamos criar uma nova função que abrirá os arquivos para edição. Ela se assemelha à função “Visualizar”, por isso, vamos transformar a parte comum em uma função separada.

Agora temos três funções:

```html

<script>

    var editor;

    function view(filename) {  if (editor) {

            editor.destroyEditor()

        }

        editor = new DocsAPI.DocEditor("editor",

            {

                documentType: get_file_type(filename),

                document: {

                    url: "host_url" + '/' + filename,

                    title: filename

                },

                editorConfig: {mode: 'view'}

            });

    }


    function edit(filename) {

        if (editor) {

            editor.destroyEditor()

        }

        editor = new DocsAPI.DocEditor("editor",

            {

                documentType: get_file_type(filename),

                document: {

                    url: "host_url" + '/' + filename,

                    title: filename

                }

        });

    }

    function get_file_type(filename) {


        if (/docx$/.exec(filename)) {

            return "text"

        }

        if (/xlsx$/.exec(filename)) {

            return "spreadsheet"

        }

        if (/pptx$/.exec(filename)) {

            return "presentation"

        }

    }

</script>

```

`destroyEditor` fechará o editor se ele tiver sido aberto.

Por padrão, o parâmetro `editorConfig` possui o valor `{“mode”: “edit”}`, é por isso que está ausente da função `edit()`.

Agora, os arquivos serão abertos para edição.

Coedição de documentos

A coedição é implementada usando a mesma document.key para o mesmo documento nas configurações do editor. Sem essa tecla, os editores vão criar a sessão de edição todas as vezes que você abrir o arquivo.

Para fazer com que os usuários se conectem à mesma sessão de edição para coedição, precisamos definir chaves exclusivas para cada documento. Vamos usar a chave no formato `filename + “_key”`. Precisamos adicionar isso a todas as configurações em que `document` esteja presente.

json

```

                  document: {

                    url: "host_url" + '/' + filepath,

                    title: filename,

                    key: filename + '_key'

                },

    ```

 

Como salvar arquivos

O ONLYOFFICE geralmente armazena todas as alterações realizadas no documento enquanto você trabalha nele. Após fechar o editor, o Document Server cria a versão de arquivo a ser salva e envia a solicitação para o endereço callbackUrl. Esta solicitação contém a `document.key` e o link para o arquivo recém-criado.

Na produção, você usará `document.key` para encontrar a versão antiga do arquivo e substituí-la pela nova. No nosso caso, não temos banco de dados, nós apenas enviamos o nome do arquivo usando callbackUrl.

Especifique `callbackUrl` na configuração em editorConfig.callbackUrl. Depois de adicionar este parâmetro, o método `edit()` ficará assim:

```js

    function edit(filename) {

        const filepath = 'files/' + filename;

        if (editor) {

            editor.destroyEditor()

        }

        editor = new DocsAPI.DocEditor("editor",
 {

                documentType: get_file_type(filepath),

                document: {

                    url: "host_url" + '/' + filepath,

                    title: filename, 

                    key: filename + '_key'

                }

                ,

                editorConfig: {

                    mode: 'edit',

                    callbackUrl: "host_url" + '/callback' + '&filename=' + filename  // add file name as a request parameter

                }

            });

    }

```

Agora, precisamos escrever um método que salvará o arquivo após obter a solicitação de postagem no endereço `/callback`:

``python

@post("/callback") # processing post requests for /callback

def callback():

    if request.json['status'] == 2: 

        file = requests.get(request.json['url']).content

        with open('files/' + request.query['filename'], 'wb') as f:

            f.write(file)
 return "{\"error\":0}"

```

Agora, a nova versão do arquivo será salva no armazenamento após o fechamento do editor.

Como gerenciar usuários

Se houver usuários em seu aplicativo, escreva seus identificadores (ID e nome) na configuração dos editores. Dessa forma, você poderá ver quem exatamente está editando um documento.

Como exemplo, vamos adicionar a capacidade de selecionar um usuário na interface:

```html

<select id="user_selector" onchange="pick_user()">

    <option value="1" selected="selected">JD</option>

    <option value="2">Turk</option>

    <option value="3">Elliot</option>

    <option value="4">Carla</option>

</select>

```

Vamos adicionar a chamada da função `pick_user()` no início da tag `<script>`. Na própria função, nós inicializaremos as variáveis ​​responsáveis ​​pelo id e pelo nome do usuário.

```js

        function pick_user() {

        const user_selector = document.getElementById("user_selector");

        this.current_user_name = user_selector.options[user_selector.selectedIndex].text;   this.current_user_id = user_selector.options[user_selector.selectedIndex].value; 

    }

    ```

Agora precisamos adicionar as configurações dos usuários na configuração dos editores usando `editorConfig.user.id` e `editorConfig.user.name`. Vamos adicionar esses parâmetros à configuração dos editores na função de edição de arquivos.

 

```js

    function edit(filename) {

        const filepath = 'files/' + filename;

        if (editor) {

            editor.destroyEditor()

        }

        editor = new DocsAPI.DocEditor("editor",

            {

                documentType: get_file_type(filepath),

                document: {

                    url: "host_url" + '/' + filepath,

                    title: filename

                },

                editorConfig: {

                    mode: 'edit',

                    callbackUrl: "host_url" + '/callback' + '?filename=' + filename,

                    user: {

                        id: this.current_user_id,

                        name: this.current_user_name 
                   }

                }

            });

    }

```

Esperamos que este exemplo simples ajude você a integrar o ONLYOFFICE ao seu aplicativo Python.