홈페이지>웹사이트 구축 리소스>기타 리소스
다운로드

vue2editor

사용하기 쉽지만 강력하고 사용자 정의 가능한 리치 텍스트 편집기 Quill.js 및 Vue.js가 구동하는

문서를 봅니다

릴리스 노트

설치하다

원사 또는 NPM을 사용할 수 있습니다 

npm install vue2-editor

또는 

yarn add vue2-editor

용법 

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ;

nuxt.js

nuxt.config.js 의 모듈 섹션에 vue2-editor/nuxt 를 추가하십시오 

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

컨텐츠의 불일치에 대한 VUE의 경고를 피하려면 VueEditor 구성 요소를 client-only 구성 요소 NUXT로 랩핑해야합니다. 

 < client-only >
  < VueEditor />
</ client-only >

소품

이름 유형 기본 설명
custompodules 정렬 - 퀼 모듈을 등록하도록 선언하십시오
장애가 있는 부울 거짓 편집기를 비활성화하려면 true로 설정하십시오
편집물 물체 - 기본 구성으로 병합하기위한 객체를 제공합니다 (형식 추가, 사용자 정의 퀼 모듈, ECT)
editortoolbar 정렬 ** 테이블에 너무 길다. 아래 도구 모음 예를 참조하십시오 사용자 정의 도구 모음을 사용하십시오
ID 끈 퀼 컨테이너 ID 설정 (동일한보기에서 여러 편집자가 필요한 경우 필요)
자리 표시 자 끈 - 편집자를위한 자리 표시 자 텍스트
usecustomimagehandler 부울 거짓 Base 64로 기본 변환을 사용하는 대신 이미지 업로드 처리
V- 모델 끈 - V- 모델을 바인딩하려는 컨텐츠 또는 데이터 속성으로 설정하십시오.

이벤트

이름 매개 변수 설명
흐림 깃 blur 이벤트에서 방출
집중하다 깃 focus 이벤트에 방출되었습니다
이미지 added 파일, 편집기, cursorlocation useCustomImageHandler 가 True이고 편집자에게 사진이 추가 될 때 방출됩니다.
이미지가 손상되었습니다 파일, 편집기, cursorlocation useCustomImageHandler 가 True이고 사진이 삭제되었을 때 방출됩니다.
선발 변경 범위, 구식, 소스 Quill의 selection-change 이벤트에서 방출되었습니다
텍스트 변경 델타, 올드 델타, 소스 Quill의 text-change 이벤트에서 방출되었습니다

예

예 - 기본 설정 

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

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

예 - 사용자 정의 이미지 핸들러

사용자 정의 이미지 핸들러를 사용하기로 선택한 경우 AA 사진을 선택하면 이벤트가 방출됩니다. 아래에서 3 개의 매개 변수가 전달된다는 것을 아래에서 볼 수 있습니다.

  1. 필요한 파일을 전달하지만 필요합니다.
  2. 편집기 인스턴스
  3. 업로드시 커서 위치는 성공의 올바른 위치에 이미지를 삽입 할 수 있도록

참고이 예 외에도 실제 서버 로이 새로운 기능을 보여주는 예제 리포지어를 만들었습니다. 

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

예제 - 페이지로드 후 내용을 설정하십시오 

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

예 - 여러 편집자 사용 

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

예 - 사용자 정의 도구 모음 

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

예 - 콘텐츠 저장 

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

예 - 라이브 미리보기를 사용하십시오 

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

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

사용자 정의 퀼 모듈을 사용하는 방법

vue2editor와 함께 사용자 정의 모듈을 사용하는 두 가지 방법이 있습니다. 이는 일부 사용자 정의 모듈을 가져오고 선언 할 때 오류가 발생하는 경우가 있었기 때문에 실제로 문제를 잘 분리한다고 생각하기 때문입니다.

버전 1- 수입 및 등록

vue2editor는 이제 퀼을 내보내서이 프로세스를 지원합니다.

  1. VueEditor를 가져 오면 퀼을 가져 오십시오.
  2. 사용자 정의 모듈을 가져옵니다
  3. Quill에 사용자 정의 모듈을 등록하십시오
  4. editorOptions 객체에 필요한 구성을 추가하십시오 
< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

버전 2- 가져 오기 | vue2editor 레지스터

(권장 방법)

  1. 사용자 정의 모듈을 가져옵니다
  2. customModules prop를 사용하여 모듈 배열을 선언하십시오.
  3. 아래에 표시된대로 editorOptions 모듈에서 해당 모듈에 필요한 구성을 추가하십시오. 
< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

개발

Vue2editor는 이제 개발을 위해 POI를 사용합니다

  • yarn dev : 개발 모드에서 실행 예를 실행하십시오
  • yarn docs : 문서 개발
  • yarn build : 두 형식으로 구성 요소를 빌드하십시오
  • yarn lint : Eslint를 실행하십시오

특허

MIT

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체