ホーム>Web サイト構築リソース>その他のリソース
ダウンロード

ショ和通知：このリポジトリは廃止されていますするまされていますすると

Toast UI Editor Vueラッパーは、Toast UIエディターリポジトリとは別に管理されています。これらの問題の配布の結果、各ラッパーリポジトリを廃止し、トーストUIエディターリポジトリのモノレポとしてリポジトリを管理することにしました。

これからは、トーストUI Reactラッパーに関連する問題または貢献をToast UI Editorリポジトリに送信してください。ありがとう？。

VueのトーストUIエディター

これは、トーストUIエディターをラッピングするVUEコンポーネントです。

目次

  • オープンソースの使用に関する統計を収集します
  • インストール
    • NPMを使用します
  • 編集者の使用
    • 負荷
    • 埋め込む
    • Vモデルを使用します
    • 小道具
    • イベント
    • 方法
  • 視聴者の使用
    • 負荷
    • 埋め込む
    • 小道具
    • イベント
  • リクエスト手順をプルします
  • ドキュメント
  • 貢献
  • ライセンス

オープンソースの使用に関する統計を収集します

Toast UI EditorのVueラッパーは、Google Analytics（GA）を適用して、世界中でUIエディターがどの程度広く使用されているかを特定するために、オープンソースの使用に関する統計を収集します。また、プロジェクトの将来のコースを決定するための重要なインデックスとしても機能します。 location.hostname（eg>“ ui.toast.com "）は収集され、唯一の目的は使用に関する統計を測定するだけです。 GAを無効にするには、VUEラッパーコンポーントを宣言するときに、次のusageStatisticsオプションを使用します。 

 var options = {
    ...
    usageStatistics : false
}

または、 tui-code-snippet.js （ v1.4.0以降）を含めてから、すぐに次のようにオプションを書き込みます。 

 tui . usageStatistics = false ;

？インストール

NPMを使用します

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

編集者の使用

負荷

VueのToast UIエディターをMoudule形式または名前空間として使用できます。また、シングルファイルコンポーネント（VUEのSFC）を使用できます。モジュール形式とSFCを使用する場合、スクリプトにtui-editor.css 、 tui-editor-contents.css 、 codemirror.cssロードする必要があります。

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

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

  • 単一のファイルコンポーネントを使用します

     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'

  • 名前空間を使用します

     var Editor = toastui . Editor ;

埋め込む

最初にテンプレートに<editor/>を実装します。 

 < template >
    < editor />
</ template >

次に、このようなコンポーネントまたはVUEインスタンスのcomponentsにEditorを追加します。 

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

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

または

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

Vモデルを使用します

V-Modelを使用する場合、バインディングのdataを宣言する必要があります。 （amyty wysiwygモードでエディターを使用する場合、 v-modelパフォーマンスの劣化を引き起こす可能性があります。）

以下の例では、 editorTextはエディターのテキストに拘束されています。 

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

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

小道具

名前タイプデフォルト説明
価値弦''この小道具は、編集者のコンテンツを変更できます。 v-modelを使用している場合は、使用しないでください。
オプション物体次のdefaultOptions tui.editorのオプション。これは、tui.editorを開始するためです。
身長弦「300px」この小道具は、編集者の高さを制御できます。
プレビュースタイル弦'タブ'この小道具は、編集者のプレビュースタイルを変更できます。 （ tabまたはvertical ）
モード弦「マークダウン」この小道具は、エディターのモードを変更できます。 （ markdownまたはwysiwyg ）
HTML弦 - HTML形式を使用してエディターのコンテンツを変更する場合は、この小道具を使用してください。
見えるブール真実この小道具は、エイディターの見える制御できます。 
 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'
    ]
} ;

例 ： 

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

イベント

  • 負荷：エディターが完全にロードすると放出されます
  • 変更：コンテンツが変更されたときに放出されます
  • Statechange：カーソル位置によってフォーマットが変更されると放出されます
  • フォーカス：編集者がフォーカスを取得すると放出されます
  • Blur：編集者がフォーカスを緩めると放出されるでしょう

例 ： 

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

方法

編集者をもっと操作する場合は、 invokeメソッドを使用してtui.editorのメソッドを呼び出すことができます。メソッドの詳細については、tui.editorの方法を参照してください。

まず、 <editor/>のref属性を割り当てる必要がありますthis.$refsを使用してinvokeメソッドを使用できます。 

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

？視聴者の使用

負荷

  • ECMAScriptモジュールの使用

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

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

  • 単一のファイルコンポーネントを使用します

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

  • 名前空間を使用します

     var Viewer = toastui . Viewer ;

埋め込む

最初にテンプレートに<viewer/>を実装します。 

 < template >
    < viewer />
</ template >

次に、コンポーネントのコンポーネントまたはこのようなVueインスタンスのcomponentsにViewerを追加します。 

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

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

または

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

小道具

名前タイプデフォルト説明
価値弦''この小道具は、視聴者のコンテンツを変更できます。
身長弦「300px」この小道具は、視聴者の高さを制御できます。
exts配列この小道具は、視聴者の拡張機能を適用できます。

例 ： 

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

イベント

  • 負荷：エディターが完全にロードすると放出されます
  • 変更：コンテンツが変更されたときに放出されます
  • Statechange：カーソル位置によってフォーマットが変更されると放出されます
  • フォーカス：編集者がフォーカスを取得すると放出されます
  • Blur：編集者がフォーカスを緩めると放出されるでしょう

例 ： 

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

？リクエスト手順をプルします

トーストUI製品はオープンソースであるため、問題を修正した後、プルリクエスト（PR）を作成できます。 NPMスクリプトを実行し、次のプロセスで自分自身を開発します。

設定

フォークは、あなたの個人リポジトリへのブランチdevelop 。それをローカルコンピューターにクローンします。ノードモジュールをインストールします。開発を開始する前に、Haveanyエラーを確認する必要があります。 

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

開発する

開発を始めましょう！

リクエストをプルします

PRの前に、最後にテストするために確認し、エラーを確認してください。エラーがない場合は、コミットしてからプッシュしてください！

PRのステップの詳細については、貢献セクションのリンクを参照してください。

貢献

  • 行動規範
  • 貢献ガイドライン
  • コミットメント条約

ライセンス

このソフトウェアは、MIT©NHNの下でライセンスされています。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて