toast ui.vue editor 다운로드 -Toast toast ui.vue editor 소스 코드 다운로드

켈 주목 :이 저장소는 더 이상 사용되지 않습니다 .zleutatedelkelelrelre입니다

토스트 UI 편집기 VUE Wrapper는 토스트 UI 편집기 저장소와 별도로 관리되었습니다. 이러한 문제의 분포 결과, 우리는 각 래퍼 리포지토리를 사용하지 않고 토스트 UI 편집기 저장소에서 모노 리포로 저장소를 관리하기로 결정했습니다.

이제부터 Toast UI React Wrapper와 관련된 문제 또는 기여를 토스트 UI 편집기 저장소에 제출하십시오. 감사합니다?.

Vue의 토스트 UI 편집기

VUE 구성 요소 포장 토스트 UI 편집기입니다.

오픈 소스 사용에 대한 통계를 수집하십시오

토스트 UI 편집기의 Vue Whrapper는 Google Analytics (GA)를 적용하여 오픈 소스 사용에 대한 통계를 수집하여 전 세계적으로 Toast UI 편집기가 얼마나 널리 사용되는지 식별합니다. 또한 미래의 프로젝트 과정을 결정하는 데 중요한 지수 역할을합니다. location.hostname (예 :“ui.toast.com”)을 수집하고 유일한 목적은 사용에 대한 통계를 측정하는 것 외에는 아닙니다. GA를 비활성화하려면 Vue Wrapper Compoent를 선언 할 때 다음 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 Editor를 Moudule 형식 또는 네임 스페이스로 사용할 수 있습니다. 또한 단일 파일 구성 요소 (SFC의 VUE)를 사용할 수 있습니다. 모듈 형식 및 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 >

그런 다음 구성 요소의 components 에 Editor 추가하거나 다음과 같은 VUE 인스턴스를 추가하십시오.

 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- 모델을 사용하는 경우 바인딩 data 선언해야합니다. (editor️ 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 : Cursor 위치별로 형식이 변경되면 방출됩니다.
초점 : 편집자가 집중할 때 방출됩니다.
BLUR : 편집자가 Lesse Focus에서 방출 될 것입니다.

예 :

 < 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 속성을 할당 한 다음이를 통해 invoke 메소드를 사용할 수 있습니다 this.$refs 다음과 같습니다.

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

그런 다음 구성 요소의 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 : Cursor 위치별로 형식이 변경되면 방출됩니다.
초점 : 편집자가 집중할 때 방출됩니다.
BLUR : 편집자가 Lesse Focus에서 방출 될 것입니다.

예 :

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

? 요청 단계를 당기십시오

Toast UI 제품은 오픈 소스이므로 문제를 해결 한 후에 풀 요청 (PR)을 만들 수 있습니다. NPM 스크립트를 실행하고 다음 과정으로 자신을 개발하십시오.

설정

포크는 개인 저장소로 분기를 develop . 로컬 컴퓨터에 복제하십시오. 노드 모듈을 설치하십시오. 개발을 시작하기 전에 오류를 확인해야합니다.

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

개발하다

개발을 시작합시다!

요청 요청

PR 전에 마지막으로 테스트 한 다음 오류를 확인하십시오. 오류가 없으면 커밋 한 다음 밀어 넣으십시오!

PR의 단계에 대한 자세한 내용은 기여 섹션 링크를 참조하십시오.

기여

행동 강령
기고 가이드 라인
컨벤션을 커밋하십시오

특허

확장하다

toast ui.vue editor

켈 주목 :이 저장소는 더 이상 사용되지 않습니다 .zleutatedelkelelrelre입니다

Vue의 토스트 UI 편집기

목차

오픈 소스 사용에 대한 통계를 수집하십시오

? 설치하다

NPM 사용

편집기 사용량

짐

구현하다

V- 모델을 사용합니다

소품

이벤트

방법

? 뷰어 사용

짐

구현하다

소품

이벤트

? 요청 단계를 당기십시오

설정

개발하다

요청 요청

기여

특허

Seelen UI

FC 24 Live Editor

editor app

ps ui

editor

Aloha Editor html5编辑器

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML 온라인 편집기

Asai 온라인 HTML 편집기

Google Dorks

shepherd

mongo express