CkEditor + Plugins SEI, AutoTexto e Documento Modelo

💻 Requisitos

Bootstrap: 5.x (Opcional)

Modo de usar

Importe o Bootstrap em seu projeto

Adicione o diretório build (desse repositório)

...
<script src="../build/ckeditor.js"></script>
...

Adicione ao seu HTML no para exibir o editor

<div class="row">
    <div class="col-12">
        <div class="document-editor__toolbar"></div>
    </div>
    <div class="col-12  row-editor">
        <div class="editor-container">
            <div class="editor">
                
            </div>
        </div>
    </div>
</div>

Nesse exemplo, foi levado em consideração o uso do Bootstrap.

No html é necessário apenas 2 divs. Uma div onde será exibido o toolbar, no caso do exemplo acima está identificado pela classe .document-editor__toolbar. Outra classe onde será exibido o editor, nesse exemplo identificado pela classe .editor

Para inicializar o editor:

• Instancie o CKEditor usando o metodo EditorWatchdog.
• Adicione o toolbar usando o metodo setCreator.
• Inicie o editor usando o metodo create.

Veja um código de exemplo abaixo:

const watchdog = new CKSource.EditorWatchdog();

watchdog.setCreator( ( element, config ) => {
	return CKSource.Editor
    .create( element, config )
    .then( editor => {
        document.querySelector( '.document-editor__toolbar' ).appendChild( editor.ui.view.toolbar.element );
        document.querySelector( '.ck-toolbar' ).classList.add( 'ck-reset_all' );

        return editor;
    });
});

watchdog.create( document.querySelector( '.editor' ), {
	toolbar: {
		autoTextoOptions: {
			ajax: {
				url: 'http://url-da-api-autotexto',
				method: 'GET'
			}
		},
		documentoModeloOptions: {
            categoria: {
                ajax: {
                    url: 'http://url-da-api-da-categoria-de-modelos',
                    method: 'GET'
                },
            },
            ajax: {
				url: 'http://url-da-api-dos-modelos',
				method: 'GET'
			}
		},
		seiOptions: {
			url: 'http://url-da-api-sei',
			resultData: 'data[0].autotexto',
		},
		items: [
			'heading',
			'|',
			'bold',
			'italic',
			'link',
			'bulletedList',
			'numberedList',
			'|',
			'undo',
			'redo',
			'|',
			'autotexto',
			'importarsei',
			'documentoModelo'
		]
	},
})

Para adicionar os plugins em seu editor você deve informar no toolbar os itens autotexto, importarsei e documentoModelo. Além disso é necessário criar uma objeto com as configurações de cada um deles, caso o contrário o botão ficará desabilitado.

🔧 Configurações dos plugins AutoTexto e Documento Modelo

As opções de textos podem ser definidas através de uma requisição ajax ou até mesmo já iniciados com o plugin.

O plugin AutoTexto e documentoModelo tem as seguintes opções

| Chave | Valor | Obrigatório | Descrição | | :---------- | :--------- | :--------- |:---------------------------------- | | options | Array | false Obrigatório se não tiver o parametro ajax | Um array de objetos com os valores dos autotextos desejados | | ajax | Object | false Obrigatório se não tiver o parametro options | Um objetos com as informações da requisição ajax |

Caso você não informe um dos 2 parametros acima o botão irá ficar inativo

Informando valores de forma manual

O atributo options precisa ser um array com os itens que poderam ser selecionados. Veja um exemplo abaixo:

...
toolbar: {
    ...

    autoTextoOptions: {
        options: [
            {
                autotexto: '<p>Conteúdo do autotexto 1</p>',
                titulo: 'Título do autotexto 2'
            },
            {
                autotexto: '<p>Conteúdo do autotexto 2</p>',
                titulo: 'Título do autotexto 1'
            }
            ...
        ]
    }
    ...
}
...

onde:

| parametro | Valor | Obrigatórios | Descrição | :-- | :-- | :-- | :-- | autotexto | String | true | Valor que será adiciona ao editor quando a opção for selecionada | titulo | String | true | Valor que será exibido no option` para identificar o autotexto.

Informando valores com o uso de autoTextoOptions

Informe no atributo ajax as informações da sua API

| Chave | Valor | Obrigatório | Descrição | :-- | :-- | :-- | :-- | url | String | true | O endereço da sua API | method | String | false | Metodo que sua requisição será chamada podendo ser GET ou POST. Caso não seja informado será usado GET | data | Object | false | Nesse campo você pode enviar valores para serem enviados na requisição. Por exemplo, você precisa identificar o id do usuário envie { id_usuario: 1} | results | Object | false | Informe em quais atributos os valores serão retornado. Por exemplo, você deseja o atributo nome dese ser o título e o atributo conteúdo deve ser o autotexto {autotexto: 'conteudo', titulo: 'nome'}

🔧 Configurações dos plugin SEI

O plugin do SEI tem apenas o tributo ajax com as seguintes atributos.

| Chave | Valor | Obrigatório | Descrição | :-- | :-- | :-- | :-- | url | String | true | Endereço da API | method | String | false | Metodo que sua requisição será chamada podendo ser GET ou POST. Caso não seja informado será usado GET | resultData | String | false | Atributo onde estará o valor do autotexto. | erros | Object | false | Mensagem de erros de acordo com o código da resposta HTTP.

Exemplo das mensagens de erro.

...
erros: {
    '404': 'Nenhum documento encontrado',
    '500': 'Ocorreu um erro interno. Tente novamente em 1 hora'
}
...

Exemplo de retorno de uma requisição ajax.

api.php

{
    "current_page": 1,
    "data": [
        {
            "id_autotexto": 4,
            "id_categoria_autotexto": 1,
            "id_usuario": null,
            "id_lotacao": null,
            "id_orgao": null,
            "titulo": "Justificativa",
            "descricao": "",
            "autotexto": "<ol><li>A contrata\u00e7\u00e3o pretendida mostra-se vi\u00e1vel, atende adequadamente \u00e0s demandas de neg\u00f3cio formuladas, as diretrizes do normativo, os benef\u00edcios pretendidos s\u00e3o adequados, os custos previstos s\u00e3o compat\u00edveis e caracterizam a economicidade, os riscos envolvidos s\u00e3o administr\u00e1veis e a \u00e1rea requisitante priorizar\u00e1 o fornecimento de todos os elementos aqui relacionados necess\u00e1rios \u00e0 consecu\u00e7\u00e3o dos benef\u00edcios pretendidos, pelo que recomendo vi\u00e1vel a contrata\u00e7\u00e3o.<\/li><\/ol>",
            "id_usuario_cadastro": null,
            "data_cadastro": null,
            "id_usuario_ultima_alteracao": null,
            "data_ultima_alteracao": null,
            "id_usuario_exclusao": null,
            "data_exclusao": null
        },
        {
            "id_autotexto": 5,
            "id_categoria_autotexto": 1,
            "id_usuario": null,
            "id_lotacao": null,
            "id_orgao": null,
            "titulo": "Teste2",
            "descricao": null,
            "autotexto": "Teste",
            "id_usuario_cadastro": null,
            "data_cadastro": null,
            "id_usuario_ultima_alteracao": null,
            "data_ultima_alteracao": null,
            "id_usuario_exclusao": null,
            "data_exclusao": null
        }
    ],
    "first_page_url": "http:\/\/url-api\/api\/teste?page=1",
    "from": 1,
    "last_page": 1,
    "last_page_url": "http:\/\/url-api\/api\/teste?page=1",
    "links": [
        {
            "url": null,
            "label": "pagination.previous",
            "active": false
        },
        {
            "url": "http:\/\/url-api\/api\/teste?page=1",
            "label": "1",
            "active": true
        },
        {
            "url": null,
            "label": "pagination.next",
            "active": false
        }
    ],
    "next_page_url": null,
    "path": "http:\/\/url-api\/api\/teste",
    "per_page": 10,
    "prev_page_url": null,
    "to": 2,
    "total": 2
}

🔧 Lista Numerada [modificada]

Para adicionar ao toolbar adicione a opção numberedDivListSplit na lista de ferramentas.

configurações adicionais

Para personalizar o options crie a opção listaNumeradaOptions no tollbar.

...
toolbar: {
    ...
    listaNumeradaOptions: {
        disableEnter: true,
        forceList: 2,
    },
    ...
    items: [
        ...
    ]
    ...
}
...

onde:

| Chave | Valor | Descrição | :-- | :-- | :-- | disableEnter | Boolean | Habilita/Desabilita a funcionalidade de criar um novo item ao pressionar a tecla enter |forceList | Integer | um número inteiro que representa o sequencial inicial da listagem

Se for definido um valor para o forceList obrigatóriamente todo o conteúdo será adicionado dentro de um lista.

🔧 Salvar Como

O Plugin Salvar Como pode ser chamado