r2-soft-simple-emoji

r2-editor-simple-emoji

Descrição

Projeto feito para aplicações Vue que necessitam de um editor simples com emoticons

Instalação

npm install r2-soft-simple-emoji

Depois importe a pasta da skin do editor e cole em /public. Você vai encontrar ela na lib, o nome é custom_editor_skin

Aí é só importar e registrar o componente nas páginas onde vc quer usar:

<template>
    <div>
        <r2-soft-editor
        ref="r2Editor" 
        editor-id="box-chat"
        :disabled="disabled"
        :message="newMessage"
        @update:message="newMessage = $event"
        @send="sendMessage"
        @attachFile="attachFile($event, true)"
        @keyPress="checkHotkeys($event.key)" 
        />
    </div>
</template>

import R2SoftEditor from 'r2-soft-simple-emoji';

components: {R2SoftEditor}

:Propriedades

Aqui tem uma lista com as propriedades que o editor aceita.

 simpleLabel - tipo: String, default: ''
 Essa propriedade oculta os botões de ação do editor colocando o texto no lugar

 menuOptions - tipo: Array, default: []
 Essa propriedade aceita um array com os botões que deve ficar em um menu de dropdown.
 Exemplo de um botão:
 {
    icon: 'cancel',
    type: 'menuitem',
    text: 'Cancelar',
    onAction: () => this.cancelReply()
 }

editorId - tipo: String, default: 'editor'
É o id do editor, para usar várias instâncias.

disabled - tipo: Boolean, default: false
Habilita ou desabilita o editor.

showWhenType - tipo: Boolean, default: false
Envia um evento sempre que o usuário para ou inicia a digitação.

@Eventos

Lista com os eventos enviados pelo componente.

 send
 Essa evento "envia" a mensagem e limpa o editor, disparado quando o usuário digita Enter.

 update:message
 Essa evento atualiza a mensagem. Deve ser chamado no componente do Editor da seguinte maneira:
 
 :message="newMessage" @update:message="newMessage = $event"
 
 Dessa maneira a sua propriedade local newMessage sempre vai receber o valor de message.

 attachFile
 Essa evento identifica e "envia" um arquivo de imagem quando o usuário cola ele no chat.

Funções()

Para usar as funções é só referenciar a instância do editor e chamar a função nessa referência.

 clearMessage()
 Ex: this.$refs.r2Editor.clearMessage();
 Esse método "limpa" o editor.

 updateMessage(newOtherMessage)
 Ex: this.$refs.r2Editor.updateMessage(newOtherMessage);
 Esse método atribui um novo valor à mensagem.

Desenvolvido por:

R2 Soft

Clique aqui para saber mais