에 iView +의 VUE - 퀼 편집기 (동영상 업로드, 사진 포함) 서식있는 텍스트 편집기를 구현

1. 플러그인의 도입 (다음 IE10은 지원하지 않습니다)

--save VUE - 퀼-NPM 편집기 설치 
NPM은 퀼의 설치 --save을 (편집기 - 뷰 - 퀼은 의존)

2. main.js 도입

"VUE - 퀼 편집기"에서 수입 VueQuillEditor; 
수입 '퀼 / DIST / quill.core.css' ; 
수입 '퀼 / DIST / quill.snow.css' ; 
수입 '퀼 / DIST / quill.bubble.css';

Vue.use (VueQuillEditor)

3. 페이지를 사용하여

수입} {quillEditor에서 '에 대한-퀼 편집기'

<DIV V-쇼 = "tuWen"클래스 = "TU-원자바오"> 
          < 업로드는 
            위에서 언급 한 id = "iviewUp" 
            : 쇼 -upload-목록 = "false"를                // 자동으로 볼 수의 목록을 업로드 
            : ON = "handleSuccessQuill"-SUCCESS 
            : 형식 = "[ 'JPG', 'JPEG', 'PNG', 'GIF']" 
            : 헤더 = "헤더"                      // 설정 요청 헤더 
            이름 = "richTextAccessory" 
            : 최대 -size = "2048" 
            여러 
            : 액션 = "uploadRichTextImg "             인터페이스 업로드 // 
            스타일 = "를 표시 실행 : 없음;" 
            >
            <버튼 아이콘 = "IOS-클라우드 업로드 - 개요"> </ 버튼> 
        </ 업로드> 
         <quill- 편집기 
            브이 - 모델 = "내용"                   //内容
            REF = "myQuillEditor"                 //获取文本节点
            : 옵션 = " editorOption "             
            @blur ="onEditorBlur ($ 이벤트) " 
            @focus ="onEditorFocus ($ 이벤트) " 
            @change ="onEditorChange ($ 이벤트) " 
            > 
          </ 퀼 편집기> 
</ DIV>

4, 도구 모음 구성

// 工具栏配置 
    CONST toolbarOptions = [ 
      [ '굵게', '기울임'밑 ' ], 
      [{ '크기 ':'소 ' 거짓 ,'대 ','거 ' ]}, 
      [{ ' 색 '[]}, {'배경 '[]}]           // 테마에서 기본적으로 드롭 
      [{'폰트 ' []}, 
      [{ '정렬 ' []}, 
      [ "화상" ]                                 // 버튼 서식 제거 
    ] 

() {데이터

  uploadRichTextImg은 : ''는    사진을 업로드 할 인터페이스의 주소를 //

   [] : uploadList // 서식있는 텍스트 편집기 그래픽 목록

  내용 : '', // 서식있는 텍스트의 내용
 : {editorOption // 서식있는 텍스트 편집기 도구 모음
   모듈 : { 
    도구 모음 : { 
      컨테이너 : toolbarOptions,   // 툴바
       핸들러 : { 
        '이미지'기능 (값) {      기본적으로 사진의 // 변환, 전파하는 iView에 의해 지금, 64 기수입니다. 
          IF (값) { 
              document.querySelector ( 'INPUT 번호의 iviewUp')을 클릭합니다 (). 
          {다른} 
              (false로 '이미지') this.quill.format; 
          } 
        } 
      } 
    } 
  } 
  imageResize : {} // 이후 정의 인장
   , '문서 내용을 입력하십시오'자리를 
,}

contentTxt는 : // 100 자 앞에 서식있는 텍스트 편집기를 ''


} 


방법 : {

   onEditorChange (예) { 

      _this을하자 =이;

      = e.html _this.content;   // 태그 </ p> <가 P>의 형태 (포커스) 렌더링
       _this.contentTxt e.text.substr = (0,100);

   } 
}

5. 삽입의 SRC에 업로드 성공 콜백 URL

 // 사진에게의 성공적인 운영의 서식있는 텍스트 편집기 업로드 
         handleSuccessQuill (RES)을 { 
           을 console.log (RES) 
            // 리치 텍스트 구성 요소 인스턴스를 얻을 
            퀼은 = 보자 은이를 . $ Refs.myQuillEditor.quill
             // 업로드가 성공하면 
            IF (RES) {
                 // 커서의 위치를 가져 
                송출 길이 = quill.getSelection () 인덱스 ;.
                 // 사진을 삽입, 이미지 서버가 링크 주소를 반환 입술 
                quill.insertEmbed (길이, '이미지' , res.data.path를)
                 // 조정 마지막에 커서 
                quill.setSelection (길이 +. 1 ) 
            } 다른 사람을 {
                // 메시지, 메시지 도입 할 필요가 
                Message.Error ( '그림 삽입 실패' ) 
            } 
}

에 iView +의 VUE - 퀼 편집기 (동영상 업로드, 사진 포함) 서식있는 텍스트 편집기를 구현

추천