jodit vue 다운로드 -Jodit jodit vue 소스 코드 다운로드

jodit vue

기타 리소스

1.0.0

다운로드

Jodit Vue

Jodit 편집기를위한 vue 래퍼

사용 방법

버전 2를 사용하십시오.* VUE 2의 경우
버전 3을 사용하십시오.* VUE 3의 경우

Jodit Vue 설치 :

 npm install jodit-vue --save
// or with Yarn
yarn add jodit-vue

가져 와서 사용하십시오

이 구성 요소는 래퍼 일 뿐이므로 vue-cli를 사용하여 앱을 만들기 위해 올바르게 작동하거나 다른 빌드 시스템을 직접 가져 오거나 Jodit 편집기 패키지가 제공 한 css 파일로 link 태그를 추가 할 수있는 경우 앱에 Jodit 편집기의 vue-cli css 시켜야합니다.

 import 'jodit/build/jodit.min.css'
import Vue from 'vue'
import JoditVue from 'jodit-vue'

Vue . use ( JoditVue )

Vue.use(JoditVue) 사용하는 대신 로컬로 구성 요소를 사용할 수 있습니다.

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> '
        }
    }
}
</ script >

CodesAnbox 에서도 확인하고 테스트 할 수 있습니다.

빌드 시스템없이 사용합니다

앱에서 빌드 시스템을 사용하지 않으면 문제없이 Jodit vue를 사용 하고이 jsfiddle 에서 확인하고 테스트 할 수도 있습니다.

구성 요소 속성

구성 요소의 v-model 만 전달하는 경우 모든 편집기 기능을로드합니다. 모든 편집기 기능을로드합니다. 사용자 정의하려면 아래에 나열된 속성으로 수행 할 수 있지만 모든 편집기가 필요하지 않은 경우에는 다음과 같이 할 수 있습니다.

재산	유형	기본값	설명
버튼	정렬	`null`	도구 모음에 표시하려는 버튼이 제공되지 않으면 모든 버튼이 표시됩니다.
외부	정렬	`null`	사용자 정의 버튼을 작성하고 표시 해야하는 경우 사용자 정의 버튼이있는 배열을이 속성에 전달할 수 있습니다.
구성	물체	`{}`	편집기를위한 다른 모든 구성이있는 구성 객체
플러그인	정렬	`[]`	사용자 정의 플러그인을 만들어야하는 경우 플러그인 배열 이이 속성에 전달할 수 있습니다.

버튼 속성

편집기에 표시 할 버튼을 제공 할 때 표시하려는 버튼이있는 배열을 제공해야합니다. 버튼 이름은 여기에서 찾을 수 있습니다. 당신은 또한 | 통과 할 수 있습니다 버튼 사이에 분배기를 넣습니다.

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ]
        }
    }
}
</ script >

추가 버튼 속성

편집기에 사용자 정의 버튼을 만들어야하는 경우이를 작성하고 배열로 구성 요소를 제공 할 수 있습니다.

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " :extra-buttons = " customButtons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ],
            customButtons : [
                {
                    name : ' insertDate ' ,
                    iconURL : ' http://xdsoft.net/jodit/logo.png ' ,
                    exec : function ( editor ) {
                        editor . selection . insertHTML (( new Date ). toDateString ());
                    }
                }
            ]
        }
    }
}
</ script >

사용자 정의 버튼을 만들려면 Jodit 편집기 문서를 확인하십시오

구성 속성

이 구성은 여기에 있는 다른 모든 구성을 전달하여 편집기를 사용자 정의 할 수 있습니다.

플러그인 속성

플러그인 속성을 사용하면 Jodit이 초기화 될 때 초기화되는 이름과 콜백이있는 플러그인 객체 배열을 전달할 수 있습니다. 플러그인은 전 세계적으로 초기화되며 Jodit 편집기의 모든 인스턴스에 추가됩니다. 예를 들어:

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :plugins = " plugins " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            plugins : [
              {
                name : ' example ' ,
                callback : function ( editor ) {
                  editor . events . on ( ' afterInit ' , function () {
                    console . warn ( ' Example plugin has beed initialized, check Jodit documentation for more details. ' )
                  })
                }
              }
            ]
        }
    }
}
</ script >