vue2 editor

Vue2editor

Um editor de texto rico fácil de usar, mas ainda poderoso e personalizável, alimentado por Quill.js e vue.js

Ver docs

Notas de liberação

Instalar

Você pode usar fios ou npm

npm install vue2-editor

OU

yarn add vue2-editor

Uso

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ; 

Nuxt.js

Adicione vue2-editor/nuxt à seção de módulos de nuxt.config.js

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

Para evitar ver avisos de Vue sobre uma incompatibilidade no conteúdo, você precisará embrulhar o componente VueEditor com o componente client-only o NUXT fornece conforme mostrado aqui:

 < client-only >
  < VueEditor />
</ client-only > 

Adereços

Nome	Tipo	Padrão	Descrição
Custommodules	Variedade	-	Declarar módulos de quill para registrar
desabilitado	Booleano	falso	Definido como true para desativar o editor
EditorOptions	Objeto	-	Oferece objeto para a fusão na configuração padrão (adicione formatos, módulos de pena personalizados, ect)
Editortoolbar	Variedade	** muito tempo para a mesa. Veja o exemplo da barra de ferramentas abaixo	Use uma barra de ferramentas personalizada
eu ia	Corda	contador de quills	Defina o ID (necessário se vários editores na mesma visão)
espaço reservado	Corda	-	Texto de espaço reservado para o editor
UsecustomImageHandler	Booleano	falso	Manuseie o upload da imagem em vez de usar a conversão padrão para base64
Model V.	Corda	-	Defina o modelo V como o conteúdo ou a propriedade de dados que você deseja vinculá-lo

Eventos

Nome	Parâmetros	Descrição
borrão	Quill	Emitido no evento blur
foco	Quill	Emitido no evento focus
imagens-added	Arquivo, editor, CursorLocation	Emitido quando useCustomImageHandler é verdadeiro e a foto está sendo adicionada ao editor
Imagem removida	Arquivo, editor, CursorLocation	Emitido quando useCustomImageHandler é verdadeiro e a foto foi excluída
mudança de seleção	Range, OldRange, fonte	Emitido no evento selection-change de Quill
mudança de texto	Delta, Olddelta, fonte	Emitido no evento text-change de Quill

Exemplos

Exemplo - Configuração básica

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

Exemplo - Manipulador de imagem personalizado

Se você optar por usar o manipulador de imagem personalizado, um evento será emitido quando a foto AA é selecionada. Você pode ver abaixo que os 3 parâmetros são passados.

1. Ele passa o arquivo a ser tratado como você precisar
2. A instância do editor
3. A posição do cursor no momento do upload para que a imagem possa ser inserida na posição correta sobre o sucesso

Nota Além deste exemplo, criei um exemplo repositório demonstrando esse novo recurso com um servidor real.

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

Exemplo - Defina o conteúdo após o carregamento da página

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

Exemplo - usando vários editores

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

Exemplo - barra de ferramentas personalizada

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

Exemplo - salvando o conteúdo

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

Exemplo - use uma prévia ao vivo

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
    < div v-html = " content " ></ div >
  </ div >
</ template >

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

Como usar módulos de quill personalizados

Existem duas maneiras de usar módulos personalizados com o Vue2editor. Isso ocorre em parte porque houve casos em que os erros são lançados ao importar e tentar declarar módulos personalizados e em parte porque acredito que ele realmente separa as preocupações muito bem.

Versão 1 - importar e registrar -se

O Vue2editor agora exporta Quill para ajudar nesse processo.

1. Ao importar o vueeditor, também importe a pena.
2. Importe seus módulos personalizados
3. Registre os módulos personalizados com pena
4. Adicione a configuração necessária ao objeto editorOptions

< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

Versão 2 - você importa | Registros de Vue2editor

(Maneira recomendada)

1. Importe seus módulos personalizados
2. Use o suporte customModules para declarar uma variedade de módulos.
3. Adicione a configuração necessária para os módulos no objeto de editorOptions em módulos, como visto abaixo

< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

---

Desenvolvimento

Vue2editor agora usa PoI para desenvolvimento

• yarn dev : Exemplo de Exemplo no Modo de Desenvolvimento
• yarn docs : Desenvolvimento para Docs
• yarn build : Construir componente em ambos os formatos
• yarn lint : corra Eslint

Licença

Mit