Page d'accueil>Ressources de création de sites Web>Autres ressources
Télécharger

️ AVIS: Ce référentiel est obsolète.

L'éditeur d'interface utilisateur de Toast Vue Wrapper a été géré séparément du référentiel de l'éditeur d'interface utilisateur Toast. À la suite de la distribution de ces problèmes, nous avons décidé de déconcerter chaque référentiel de wrapper et de gérer le référentiel en tant que mono-repo du référentiel de l'éditeur d'interface utilisateur de toast.

À partir de maintenant, veuillez soumettre des problèmes ou des contributions liées à la toast ui react wrapper pour toast ui Editor Repository. Merci?.

Toast UI Editor pour Vue

Il s'agit d'un éditeur d'interface utilisateur de toast en emballage de composants Vue.

Table des matières

  • Collectez des statistiques sur l'utilisation de l'open source
  • Installer
    • Utilisation de NPM
  • Utilisation de l'éditeur
    • Charger
    • Mettre en œuvre
    • Utilisation du modèle V
    • Accessoires
    • Événement
    • Méthode
  • Utilisation du spectateur
    • Charger
    • Mettre en œuvre
    • Accessoires
    • Événement
  • Étapes de demande de tirage
  • Documents
  • Contributif
  • Licence

Collectez des statistiques sur l'utilisation de l'open source

Vue Wrapper of Toast UI Editor applique Google Analytics (GA) pour collecter des statistiques sur l'utilisation de l'open source, afin d'identifier la largeur utilisation de l'éditeur d'interface utilisateur de toast dans le monde entier. Il sert également d'index important pour déterminer le cours futur des projets. Location.Hostname (par exemple «ui.toast.com») doit être collecté et le seul but n'est que de mesurer les statistiques sur l'utilisation. Pour désactiver GA, utilisez les options usageStatistics suivantes lors de la déclaration de compoent de wrapper Vue. 

 var options = {
    ...
    usageStatistics : false
}

Ou, incluez inclure tui-code-snippet.js ( v1.4.0 ou version ultérieure ), puis écrivez immédiatement les options comme suit: 

 tui . usageStatistics = false ;

? Installer

Utilisation de NPM 

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

Utilisation de l'éditeur

Charger

Vous pouvez utiliser Toast UI Editor pour Vue comme format ou espace de noms Moudule. Vous pouvez également utiliser un composant de fichier unique (SFC de VUE). Lorsque vous utilisez le format du module et SFC, vous devez charger tui-editor.css , tui-editor-contents.css et codemirror.css dans le script.

  • Utilisation du module 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'

  • Utilisation du module 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 ;

  • Utilisation du composant de fichier unique 

     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'

  • Utilisation de l'espace de noms 

     var Editor = toastui . Editor ;

Mettre en œuvre

Implémentez d'abord <editor/> dans le modèle. 

 < template >
    < editor />
</ template >

Puis ajoutez Editor aux components de votre composant ou de votre instance Vue comme ceci: 

 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
    }
} ) ;

Utilisation du modèle V

Si vous utilisez le modèle V, vous devez déclarer des data de liaison. (❗️ Lors de l'utilisation de l'éditeur en mode wysiwyg , v-model peut provoquer une dégradation des performances.)

Dans l'exemple ci-dessous, editorText est lié au texte de l'éditeur. 

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

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

Accessoires

Nom Taper Défaut Description
valeur Chaîne '' Cet accessoire peut modifier le contenu de l'éditeur. Si vous utilisez v-model , ne l'utilisez pas .
options Objet suivant defaultOptions Options de Tui.Editor. Ceci est pour inimiser Tui.Editor.
hauteur Chaîne '300px' Cet accessoire peut contrôler la hauteur de l'éditeur.
aperçu Chaîne 'languette' Cet accessoire peut modifier le style d'aperçu de l'éditeur. ( tab ou vertical )
mode Chaîne 'réduction' Cet accessoire peut modifier le mode de l'éditeur. ( markdown ou wysiwyg )
html Chaîne - Si vous souhaitez modifier le contenu de l'éditeur à l'aide du format HTML, utilisez cet accessoire.
visible Booléen vrai Cet accessoire peut contrôler la visible de l'editeur. 
 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'
    ]
} ;

Exemple : 

 < 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 >

Événement

  • Charge: il serait émis lorsque l'éditeur est entièrement chargé
  • Changement: il serait émis lorsque le contenu a changé
  • StatChange: il serait émis lors du changement de format par position de curseur
  • Focus: il serait émis lorsque l'éditeur se concentrerait
  • Blur: il serait émis lors de l'éditeur lâche Focus

Exemple : 

 < 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éthode

Si vous souhaitez manipuler davantage l'éditeur, vous pouvez utiliser la méthode invoke pour appeler la méthode de Tui.Editor. Pour plus d'informations sur la méthode, voir Méthode de Tui.Editor.

Tout d'abord, vous devez attribuer l'attribut ref de <editor/> , puis vous pouvez utiliser la méthode invoke à travers this.$refs comme ceci: 

 < 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 >

? Utilisation du spectateur

Charger

  • Utilisation du module ECMAScript 

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

  • Utilisation du module 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 ;

  • Utilisation du composant de fichier unique 

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

  • Utilisation de l'espace de noms 

     var Viewer = toastui . Viewer ;

Mettre en œuvre

Implémentez d'abord <viewer/> dans le modèle. 

 < template >
    < viewer />
</ template >

Puis ajoutez Viewer aux components de votre composant ou de votre instance Vue comme ceci: 

 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
    }
} ) ;

Accessoires

Nom Taper Défaut Description
valeur Chaîne '' Cet accessoire peut modifier le contenu du spectateur.
hauteur Chaîne '300px' Cet accessoire peut contrôler la hauteur du spectateur.
exts Tableau Cet accessoire peut appliquer les extensions du spectateur.

Exemple : 

 < 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 >

Événement

  • Charge: il serait émis lorsque l'éditeur est entièrement chargé
  • Changement: il serait émis lorsque le contenu a changé
  • StatChange: il serait émis lors du changement de format par position de curseur
  • Focus: il serait émis lorsque l'éditeur se concentrerait
  • Blur: il serait émis lors de l'éditeur lâche Focus

Exemple : 

 < 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
        },
    }
};

? Étapes de demande de tirage

Les produits d'interface utilisateur de toast sont open source, vous pouvez donc créer une demande de traction (PR) après avoir résolu les problèmes. Exécutez des scripts NPM et développez-vous avec le processus suivant.

Installation

Fork develop une branche dans votre référentiel personnel. Connez-le à l'ordinateur local. Installez les modules de nœud. Avant de commencer le développement, vous devriez vérifier les erreurs HAVEALY. 

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

Développer

Commençons le développement!

Projeter

Avant PR, vérifiez pour tester enfin, puis vérifiez toutes les erreurs. S'il n'a aucune erreur, engagez-le puis poussez-le!

Pour plus d'informations sur l'étape de PR, veuillez consulter les liens de la section contributive.

Contributif

  • Code de conduite
  • Directive contributive
  • Commettre une convention

Licence

Ce logiciel est sous licence sous le MIT © NHN.

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout