Página Inicial>Recursos de construção de sites>Outros recursos
Baixar

️ Aviso: Este repositório está preguiçoso

O editor de interface do usuário do Toast Vue Wrapper foi gerenciado separadamente do repositório do editor de interface do usuário do Toast. Como resultado da distribuição desses problemas, decidimos depreciar cada repositório de wrapper e gerenciar o repositório como um mono-repetição do repositório do editor de interface do usuário do brinde.

A partir de agora, envie questões ou contribuições relacionadas ao wrapper de tostado da interface do usuário para brindar o repositório do editor de interface do usuário. Obrigado?.

Brinde o editor de interface do usuário do VUE

Este é o componente VUE, componente, editor de interface do usuário.

Índice

  • Colete estatísticas sobre o uso de código aberto
  • Instalar
    • Usando NPM
  • Uso do editor
    • Carregar
    • Implementar
    • Usando V-Model
    • Adereços
    • Evento
    • Método
  • Uso do espectador
    • Carregar
    • Implementar
    • Adereços
    • Evento
  • Puxe as etapas de solicitação
  • Documentos
  • Contribuindo
  • Licença

Colete estatísticas sobre o uso de código aberto

O Vue Wrapper Of Toast UI Editor aplica o Google Analytics (GA) para coletar estatísticas sobre o uso do código aberto, a fim de identificar como o editor de interface do usuário de torrada é usado em todo o mundo. Também serve como índice importante para determinar o curso futuro dos projetos. Location.HostName (por exemplo, "UI.Toast.com") deve ser coletado e o único objetivo é nada além de medir as estatísticas sobre o uso. Para desativar o GA, use as seguintes opções de usageStatistics quando declarar o Vue Wrapper Compoent. 

 var options = {
    ...
    usageStatistics : false
}

Ou inclua incluir tui-code-snippet.js ( v1.4.0 ou posterior ) e, em seguida, escreva imediatamente as opções da seguinte forma: 

 tui . usageStatistics = false ;

? Instalar

Usando NPM 

npm install --save @toast-ui/vue-editor

Uso do editor

Carregar

Você pode usar o editor de interface do usuário do Toast para Vue como formato de moudule ou namespace. Além disso, você pode usar o componente de arquivo único (SFC do VUE). Ao usar o formato do módulo e o SFC, você deve carregar tui-editor.css , tui-editor-contents.css e codemirror.css no script.

  • Usando o módulo ECMAScript 

     import 'tui-editor/dist/tui-editor.css' ;
import 'tui-editor/dist/tui-editor-contents.css' ;
import 'codemirror/lib/codemirror.css' ;
import { Editor } from '@toast-ui/vue-editor'

  • Usando o módulo Commonjs 

     require ( 'tui-editor/dist/tui-editor.css' ) ;
require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
require ( 'codemirror/lib/codemirror.css' ) ;
var toastui = require ( '@toast-ui/vue-editor' ) ;
var Editor = toastui . Editor ;

  • Usando o componente de arquivo único 

     import 'tui-editor/dist/tui-editor.css' ;
import 'tui-editor/dist/tui-editor-contents.css' ;
import 'codemirror/lib/codemirror.css' ;
import Editor from '@toast-ui/vue-editor/src/Editor.vue'

  • Usando namespace 

     var Editor = toastui . Editor ;

Implementar

Primeiro implemento <editor/> no modelo. 

 < template >
    < editor />
</ template >

E depois adicione Editor aos components em seu componente ou instância de vue como esta: 

 import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  }
}

ou 

 import { Editor } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'editor' : Editor
    }
} ) ;

Usando V-Model

Se você usa o vodel V, deve declarar data para ligação. (❗️ Ao usar o editor no modo wysiwyg , v-model pode causar degradação do desempenho.)

No exemplo abaixo, editorText está vinculado ao texto do editor. 

 < template >
    < editor v-model =" editorText " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  } ,
  data ( ) {
      return {
          editorText : ''
      }
  }
}
</ script >

Adereços

Nome Tipo Padrão Descrição
valor Corda '' Este suporte pode alterar o conteúdo do editor. Se você estiver usando v-model , não o use .
opções Objeto seguindo defaultOptions Opções de Tui.editor. Isto é para iniciar tui.editor.
altura Corda '300px' Este suporte pode controlar a altura do editor.
VisuewStyle Corda 'Tab' Este suporte pode alterar o estilo de visualização do editor. ( tab ou vertical )
modo Corda 'Markdown' Este suporte pode mudar o modo do editor. ( markdown ou wysiwyg )
html Corda - Se você deseja alterar o conteúdo do editor usando o formato HTML, use este suporte.
visível Booleano verdadeiro Este suporte pode controlar visível do eiditor. 
 const defaultOptions = {
    minHeight : '200px' ,
    language : 'en_US' ,
    useCommandShortcut : true ,
    useDefaultHTMLSanitizer : true ,
    usageStatistics : true ,
    hideModeSwitch : false ,
    toolbarItems : [
        'heading' ,
        'bold' ,
        'italic' ,
        'strike' ,
        'divider' ,
        'hr' ,
        'quote' ,
        'divider' ,
        'ul' ,
        'ol' ,
        'task' ,
        'indent' ,
        'outdent' ,
        'divider' ,
        'table' ,
        'image' ,
        'link' ,
        'divider' ,
        'code' ,
        'codeblock'
    ]
} ;

Exemplo : 

 < template >
    < editor
    :value =" editorText "
    :options =" editorOptions "
    :html =" editorHtml "
    :visible =" editorVisible "
    previewStyle =" vertical "
    height =" 500px "
    mode =" wysiwyg "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    data ( ) {
        return {
            editorText : 'This is initialValue.' ,
            editorOptions : {
                hideModeSwitch : true
            } ,
            editorHtml : '' ,
            editorVisible : true
        } ;
    } ,
} ;
</ script >

Evento

  • Carga: seria emitido quando o editor carrega totalmente
  • Mudança: seria emitido quando o conteúdo mudasse
  • Statechange: seria emitido quando o formato mudar pela posição do cursor
  • Foco: seria emitido quando o editor obtenha foco
  • Blur: Seria emitido quando o editor despertar foco

Exemplo : 

 < template >
    < editor
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        onEditorLoad ( ) {
            // implement your code
        } ,
        onEditorFocus ( ) {
            // implement your code
        } ,
        onEditorBlur ( ) {
            // implement your code
        } ,
        onEditorChange ( ) {
            // implement your code
        } ,
        onEditorStateChange ( ) {
            // implement your code
        } ,
    }
} ;
</ script >

Método

Se você deseja manipular mais o editor, pode usar o método invoke para chamar o método do tui.editor. Para obter mais informações do método, consulte o método do tui.editor.

Primeiro, você precisa atribuir o atributo de ref <editor/> e depois pode usar o método invoke através this.$refs como este: 

 < template >
    < editor ref =" tuiEditor " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        scroll ( ) {
            this . $refs . tuiEditor . invoke ( 'scrollTop' , 10 ) ;
        } ,
        moveTop ( ) {
            this . $refs . tuiEditor . invoke ( 'moveCursorToStart' ) ;
        } ,
        getHtml ( ) {
            let html = this . $refs . tuiEditor . invoke ( 'getHtml' ) ;
        }
    }
} ;
</ script >

? Uso do espectador

Carregar

  • Usando o módulo ECMAScript 

     import 'tui-editor/dist/tui-editor-contents.css' ;
import 'highlight.js/styles/github.css' ;
import { Viewer } from '@toast-ui/vue-editor'

  • Usando o módulo Commonjs 

     require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
require ( 'highlight.js/styles/github.css' ) ; 
var toastui = require ( '@toast-ui/vue-editor' ) ;
var Viewer = toastui . Viewer ;

  • Usando o componente de arquivo único 

     import 'tui-editor/dist/tui-editor-contents.css' ;
import 'highlight.js/styles/github.css' ;
import Viewer from '@toast-ui/vue-editor/src/Viewer.vue'

  • Usando namespace 

     var Viewer = toastui . Viewer ;

Implementar

Primeiro implemento <viewer/> no modelo. 

 < template >
    < viewer />
</ template >

E adicione Viewer aos components em seu componente ou instância de vue como esta: 

 import { Viewer } from '@toast-ui/vue-editor'

export default {
  components : {
    'viewer' : Viewer
  }
}

ou 

 import { Viewer } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'viewer' : Viewer
    }
} ) ;

Adereços

Nome Tipo Padrão Descrição
valor Corda '' Este suporte pode alterar o conteúdo do visualizador.
altura Corda '300px' Este suporte pode controlar a altura do espectador.
EXT Variedade Este suporte pode aplicar as extensões do espectador.

Exemplo : 

 < template >
    < viewer
    :value =" viewerText "
    height =" 500px "
    />
</ template >
< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components : {
        'viewer' : Viewer
    } ,
    data ( ) {
        return {
            viewerText : '# This is Viewer.n Hello World.' ,
        } ;
    } ,
} ;
</ script >

Evento

  • Carga: seria emitido quando o editor carrega totalmente
  • Mudança: seria emitido quando o conteúdo mudasse
  • Statechange: seria emitido quando o formato mudar pela posição do cursor
  • Foco: seria emitido quando o editor obtenha foco
  • Blur: Seria emitido quando o editor despertar foco

Exemplo : 

 < template >
    < viewer
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >

< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};

? Puxe as etapas de solicitação

Os produtos da interface do usuário do brinde são de código aberto, para que você possa criar uma solicitação de tração (PR) após corrigir os problemas. Execute scripts do NPM e desenvolva -se com o processo a seguir.

Configurar

O Fork develop ramificação em seu repositório pessoal. Clone -o para o computador local. Instale os módulos do nó. Antes de iniciar o desenvolvimento, você deve verificar os erros de Haveany. 

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

Desenvolver

Vamos começar o desenvolvimento!

Solicitação de puxar

Antes do PR, verifique para testar finalmente e verifique todos os erros. Se não tiver erro, comprometa e depois pressione!

Para obter mais informações sobre a etapa do PR, consulte os links da seção contribuinte.

Contribuindo

  • Código de Conduta
  • Diretriz contribuindo
  • Convenção cometer

Licença

Este software está licenciado sob o MIT © NHN.

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos