my vue editor

내 vue 편집자

vue2.x를 기반으로 한 풍부한 텍스트 편집기
中文文档

데모

데모를 보려면 여기를 클릭하십시오
더 많은 데모 예제 디렉토리를 참조하십시오

소개

우리의 편집자는 vue-html5-editor 2 차 개발을 기반으로합니다. 간결한 풍부한 텍스트 편집기 플러그인을 제공 한 저자 PeakTai 덕분에 기본 메소드를 다시 작성하고 기능을 확장했습니다.

설치하다

 npm install my - vue - editor

플러그인으로 소개되었습니다

 import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue . use ( myVueEditor , options )

글로벌 소개

 < script src =" serverpath/vue.js " > </ script >
< script src =" serverpath/dist/my-vue-editor.js " > </ script >

글로벌 변수 myvueeditor에 의해 설치됩니다

 Vue . use ( myVueEditor , options )

사용

 < my-vue-editor :content =" content " @change =' ctnChange ' @imageUpload =' imageUpload ' > </ my-vue-editor > 

구성

항목	유형	설명
이름	끈	사용자 정의 구성 요소 이름, 기본값은 My-vue editor입니다
모듈	정렬	모듈을 사용해야합니다
아이콘	물체	지정된 모듈의 아이콘을 다루고 있습니다
명령	물체	사용자 정의 명령
지름길	물체	맞춤형 바로 가기
ExtendModules	정렬	사용자 정의 모듈
내장 된 모듈 이름	물체	해당 내장 모듈의 속성을 덮어 씁니다

예

 Vue . use ( myVueEditor , {
  // Overlay built-in module's icon
  icons : {
    image : 'iui-icon iui-icon-pic' ,
    indent : 'iui-icon iui-icon-insert'
  } ,
  // Modules in use
  modules : [
    'font' ,
    'bold' ,
    'italic' ,
    'underline' ,
    'linethrough' ,
    'ul' ,
    'indent' ,
    'align' ,
    'image' ,
    'quote' ,
    'todo' ,
    // This is a custom module
    'customSave'
  ] ,
  // Overlay image module's configuration
  image : {
    maxSize : 5120 * 1024 ,
    imgOccupyNewRow : true ,
    compress : {
      width : 1600 ,
      height : 1600 ,
      quality : 0.8
    }
  } ,
  // Overlay font module's configuration
  font : {
    config : {
      'xx-large' : {
        fontSize : 6 ,
        name : 'H1'
      } ,
      'medium' : {
        fontSize : 3 ,
        name : 'H2'
      } ,
      'small' : {
        fontSize : 2 ,
        name : 'H3'
      } ,
      default : 'medium'
    } ,
    // Modify the font module's module inspect mechanism to inspect via style and tag name
    inspect ( add ) {
      add ( 'style' , {
        fontSize : [ 'xx-large' , 'x-large' , 'large' , 'medium' , 'small' ]
      } ) . add ( 'tag' , 'font' )
    }
  } ,
  // Overlay ul module's configuration
  ul : {
    // When the ul module is inspected, disabled all but itself
    exclude : 'ALL_BUT_MYSELF' ,
    // When the ul module is clicked, execute the following method
    handler ( rh ) {
     console . log ( 'i am ul!' )
     rh . editor . execCommand ( 'insertUnorderedList' )  
    }
  } ,
  // When the ul module is inspected, disabled image, todo and ul module
  quote : {
    exclude : [ 'image' , 'todo' , 'ul' ]
  } ,
  // Customize an command named getAllTexts that prints out all the text nodes under the current range object
  commands : {
    getAllTexts ( rh , arg ) {
      console . log ( rh . getAllTextNodeInRange ( ) )
    }
  } ,
  shortcut : {
    // Custom a shortcut key, when you press the command + s, execute the save function
    saveNote : {
      metaKey : true ,
      keyCode : 83 ,
      handler ( editor ) {
        save ( )
      }
    }
  } ,
  // Customize a module, a alert pops up when you click on the module icon
  extendModules : [ {
     name : 'smile' ,
     icon : 'iui iui-icon-smile'
     handler ( rh ) {
      alert ( 'smile~~' )
     }
  } ]
} ) 

이벤트

이벤트 이름	설명
변화	편집기 컨텐츠가 변경되면 매개 변수가 최신 컨텐츠 데이터입니다.
imageUpload	트리거 이미지 업로드시, 매개 변수에는 이미지의 해당 데이터가 포함되어 있습니다. REPLASESRCAFTERUPLOADFINISH : 업로드가 성공할 때 Base64 형식에서 서버가 반환 한 URL로 IMG의 SRC 속성을 대체하는 데 사용됩니다. deleteimgwhenuploadfail : 업로드가 실패 할 때 현재 사진을 삭제하는 데 사용됩니다.

내장 모듈을 수정하십시오

내장 된 모듈의 이름이 내장 된 매개 변수를 Key의 원래 특성을 포함합니다 (SRC/Modules 디렉토리의 모든 내장 모듈 및 구성 항목 참조).

이미지 모듈을 예로 들어 보겠습니다

 Vue . user ( myVueEditor , {
  image : {
    // Modify the image module's icon
    icon : 'iui-pic' ,
    // Cover the original compression parameters, so that the image is not compressed when uploaded
    compress : null ,
    // Can not upload the same image repeatedly
    canUploadSameImage : false
  }
} ) 

Cutom 모듈

ExtendModules 구성 항목으로 모듈 확장 몇 가지 공통 모듈 구성 항목을 제공합니다.

목	유형	설명
이름	끈	모듈의 이름
상	끈	모듈 아이콘의 클래스 이름, fontawesome 아이콘은 기본적으로 사용됩니다
들어오지 못하게 하다	문자열 배열	비활성화 된 모듈 현재 모듈을 검사 할 때 값이 'All'인 경우 모든 모듈을 비활성화하는 것은 현재 모듈을 포함합니다. 값이 'all_but_myself'인 경우 모든 모듈이지만 현재 모듈을 비활성화하는 것을 의미합니다. 값이 배열 유형 인 경우 입력 모듈 이름을 비활성화 할 수 있습니다.
검사	기능	모듈 검사, 커서가 목록에 있으면 목록 모듈이 강조 표시됩니다. 이 기능에 대한 첫 번째 인수는 ADD라는 이름의 메소드이며, 모듈의 검사 기준을 추가하도록 호출됩니다. 여러 검사 기반이 있으면 체인을 호출하십시오 ADD 메소드의 첫 번째 매개 변수는 테스트 경로를 나타냅니다. 선택 사항은 '태그'스타일과 '속성'입니다. 매개 변수 1이 'tag'인 경우, 매개 변수 2는 태그 이름 문자열에서 전달됩니다. 매개 변수 1이 '스타일'인 경우, 매개 변수 2는 스타일 이름을 키우고 스타일 값을 값으로 가진 객체입니다. 참고 스타일 이름 HUMP 양식 사용 (예 : Fontsize), 여러 StyleValue가 있으면 배열 형태를 사용하십시오. 매개 변수 1이 '속성'인 경우, 매개 변수 2는 키가 속성 이름이고 속성 값이 값인 객체이며, 값이 원하는 경우 ''： act ( 'attribute', { 'data-todo': ''}))를 전달합니다.
매니저	기능	모듈을 클릭 할 때해야 할 일 매개 변수 1은 레인지 핸들러 인스턴스이며 현재 편집기의 vue 인스턴스와 범위를 작동하는 메소드를 얻을 수 있습니다. 핸들러에서 직접 작동하는 범위를 권장하지는 않지만 핸들러의 편집기 인스턴스 아래에서 execcommand 메소드를 통해 명령을 호출하는 범위 조치를 명령으로 캡슐화해야합니다.
꼬리표	vue 인스턴스	기존 모듈은 클릭을 처리하는 데 핸들러를 사용하고 UI (글꼴 모듈의 드롭 다운 목록) 또는 더 복잡한 논리 (정렬 모듈의 왼쪽에서 오른쪽으로 전환)를 구현하려면 탭을 사용하십시오.
이니	기능	편집기 구성 요소 수명주기에 해당하고 매개 변수 1은 편집기 인스턴스입니다. 현재 execcommand 메소드를 사용할 수 없습니다.
장착	기능	편집기 구성 요소 수명주기 장착에 해당하고 매개 변수 1은 편집기 인스턴스입니다.
업데이트	기능	편집기 구성 요소 수명주기가 업데이트되고 매개 변수 1은 편집기 인스턴스입니다.
의해 파괴됨	기능	편집기 구성 요소 수명주기 BeforedEstroy에 해당하고 매개 변수 1은 편집기 인스턴스입니다.