Startseite>Ressourcen zum Erstellen von Websites>Andere Ressourcen
Herunterladen

Euen Hinweis: Dieses Repository ist veraltet, ️️echen

Der Toast UI -Editor Vue Wrapper wurde separat vom Toast UI -Editor -Repository verwaltet. Aufgrund der Verteilung dieser Probleme haben wir beschlossen, jedes Wrapper-Repository zu verabreicht und Repository als Mono-Repo aus dem Toast UI-Editor-Repository zu verwalten.

Bitte senden Sie von nun an Probleme oder Beiträge im Zusammenhang mit Toast UI React Wrapper in das Toast UI -Redakteur -Repository. Danke schön?.

Toast UI -Redakteur für Vue

Dies ist Vue -Komponenten -Wickel -Toast -UI -Editor.

Inhaltsverzeichnis

  • Sammeln Sie Statistiken zur Verwendung von Open Source
  • Installieren
    • Verwenden von NPM
  • Redakteur -Nutzung
    • Laden
    • Implementieren
    • Verwenden von V-Modell
    • Requisiten
    • Ereignis
    • Verfahren
  • Zuschauernutzung
    • Laden
    • Implementieren
    • Requisiten
    • Ereignis
  • Anforderungsschritte ziehen
  • Unterlagen
  • Beitragen
  • Lizenz

Sammeln Sie Statistiken zur Verwendung von Open Source

Vue Wrapper des Toast UI -Editors wendet Google Analytics (GA) auf, um Statistiken zur Verwendung von Open Source zu sammeln, um festzustellen, wie weit verbreitete UI -Editor weltweit verwendet wird. Es dient auch als wichtiger Index, um den zukünftigen Projektverlauf zu bestimmen. location.hostname (zB> "ui.toast.com") ist zu erfassen und der einzige Zweck ist nichts anderes, als Statistiken zur Verwendung zu messen. Verwenden Sie die folgenden usageStatistics -Optionen, wenn Sie GA deaktivieren, wenn Sie VUE WRAPPER COMPOENT deklarieren. 

 var options = {
    ...
    usageStatistics : false
}

Oder enthalten tui-code-snippet.js ( v1.4.0 oder höher ) und schreiben Sie dann sofort die Optionen wie folgt: 

 tui . usageStatistics = false ;

? Installieren

Verwenden von NPM 

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

Redakteur -Nutzung

Laden

Sie können Toast UI -Editor für Vue als Moudule -Format oder Namespace verwenden. Sie können auch Einzeldateikomponenten (SFC of VUE) verwenden. Bei Verwendung von Modulformat und SFC sollten Sie im Skript tui-editor.css , tui-editor-contents.css und codemirror.css laden.

  • Verwenden von ECMascript -Modul 

     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'

  • Unter Verwendung des CommonJS -Moduls 

     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 ;

  • Verwenden der Einzeldateikomponente 

     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'

  • Verwenden von Namespace 

     var Editor = toastui . Editor ;

Implementieren

Implementieren Sie zunächst <editor/> in der Vorlage. 

 < template >
    < editor />
</ template >

Fügen Sie dann den components in Ihrer Komponente oder der Vue -Instanz wie folgt Editor hinzu: 

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

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

oder 

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

Verwenden von V-Modell

Wenn Sie V-Model verwenden, müssen Sie data zur Bindung deklarieren. (❗️ Wenn der Editor im wysiwyg -Modus verwendet wird, kann v-model die Leistungsverschlechterung verursachen.)

Im folgenden Beispiel ist editorText an den Text des Editors bindend. 

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

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

Requisiten

Name Typ Standard Beschreibung
Wert Saite '' ' Diese Requisite kann den Inhalt des Editors ändern. Wenn Sie v-model verwenden, verwenden Sie es nicht .
Optionen Objekt folgende defaultOptions Optionen des Tui.Editors. Dies ist für initailize tui.editor.
Höhe Saite '300px' Diese Requisite kann die Höhe des Editors steuern.
Vorschau Saite 'Tab' Diese Requisite kann den Vorschaustil des Editors ändern. ( tab oder vertical )
Modus Saite "Markdown" Diese Requisite kann den Modus des Editors ändern. ( markdown oder wysiwyg )
html Saite - - Wenn Sie den Inhalt des Editors mithilfe des HTML -Formats ändern möchten, verwenden Sie diese Requisite.
sichtbar Boolean WAHR Diese Requisit kann sichtbar des Eiditors kontrollieren. 
 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'
    ]
} ;

Beispiel : 

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

Ereignis

  • Laden: Es würde ausstrahlen, wenn der Editor voll geladen wird
  • Änderung: Es würde ausstrahlen, wenn sich der Inhalt änderte
  • Statechange: Es würde emittiert, wenn sich die Formatveränderung durch Cursorposition ändern würde
  • Fokus: Es würde ausstrahlen, wenn der Herausgeber Fokus erhält
  • Blur: Es würde ausstrahlen, wenn der Herausgeber lose Fokus fokus

Beispiel : 

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

Verfahren

Wenn Sie den Editor mehr manipulieren möchten, können Sie die invoke -Methode verwenden, um die Methode des Tui.Editors aufzurufen. Weitere Informationen zur Methode finden Sie unter Methode des Tui.Editors.

Zuerst müssen Sie das ref -Attribut von <editor/> zuweisen und dann können Sie invoke -Methode durch this.$refs wie folgt: 

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

? Zuschauernutzung

Laden

  • Verwenden von ECMascript -Modul 

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

  • Unter Verwendung des CommonJS -Moduls 

     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 ;

  • Verwenden der Einzeldateikomponente 

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

  • Verwenden von Namespace 

     var Viewer = toastui . Viewer ;

Implementieren

Implementieren Sie zunächst <viewer/> in der Vorlage. 

 < template >
    < viewer />
</ template >

Fügen Sie Viewer zu den components in Ihrer Komponente oder einer solchen VUE -Instanz hinzu: 

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

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

oder 

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

Requisiten

Name Typ Standard Beschreibung
Wert Saite '' ' Diese Requisite kann den Inhalt des Betrachters ändern.
Höhe Saite '300px' Diese Requisite kann die Höhe des Betrachters steuern.
Exts Array Diese Requisite kann die Erweiterungen des Betrachters anwenden.

Beispiel : 

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

Ereignis

  • Laden: Es würde ausstrahlen, wenn der Editor voll geladen wird
  • Änderung: Es würde ausstrahlen, wenn sich der Inhalt änderte
  • Statechange: Es würde emittiert, wenn sich die Formatveränderung durch Cursorposition ändern würde
  • Fokus: Es würde ausstrahlen, wenn der Herausgeber Fokus erhält
  • Blur: Es würde ausstrahlen, wenn der Herausgeber lose Fokus fokus

Beispiel : 

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

? Anforderungsschritte ziehen

Toast UI -Produkte sind Open Source, sodass Sie nach der Behebung von Problemen eine Pull -Anfrage (PR) erstellen können. Führen Sie NPM -Skripte aus und entwickeln Sie sich mit dem folgenden Prozess.

Aufstellen

Fork develop Branch in Ihr persönliches Repository. Klonen Sie es auf den lokalen Computer. Installieren Sie Knotenmodule. Bevor Sie mit der Entwicklung beginnen, sollten Sie nach Haveany -Fehlern nachsehen. 

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

Entwickeln

Beginnen wir mit der Entwicklung!

Anfrage ziehen

Überprüfen Sie vor der PR, um zuletzt zu testen und dann alle Fehler zu überprüfen. Wenn es keinen Fehler hat, verpflichten Sie und dann schieben Sie es!

Weitere Informationen zum PR -Schritt finden Sie unter Links des Abschnitts mit Beitrag.

Beitragen

  • Verhaltenskodex
  • Richtlinie beitragen
  • Konvention begehen

Lizenz

Diese Software ist unter dem MIT © NHN lizenziert.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle