vue 에서 부 텍스트 편집기 사용 Quill

다운로드 Quill

npm install quill

패키지 구성 요소

<template>
  <div>
    <div class="editor"></div>
  </div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import QuillBetterTable from 'quill-better-table'//   table
import 'quill-better-table/dist/quill-better-table.css'

Quill.register({
  'modules/better-table': QuillBetterTable
}, true)



export default {
  name: 'DsEditor',
  props: ['value'],
  data () {
    return {
      quill: null,
      options: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote'],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': []}],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': []}],
              [{ 'align': [] }],
              ['clean'],
              ['link'],
              ['sourceEditor'] //    （   ）
            ],
            handlers: {
              sourceEditor: () => { //     
                let tableModule = this.quill.getModule('better-table')
                tableModule.getTable()
                tableModule.insertTable(3, 3)
              }
            }
          },
          // table: true,
          //          、    ,  （quill-better-table）
          table: false,
          'better-table': { 
            operationMenu: { //         
              items: {
                insertColumnRight: {
                  text: '      '
                },
                insertColumnLeft: {
                  text: '      '
                },
                insertRowUp: {
                  text: '      '
                },
                insertRowDown: {
                  text: '      '
                },
                mergeCells: {
                  text: '     '
                },
                unmergeCells: {
                  text: '     '
                },
                deleteColumn: {
                  text: '     '
                },
                deleteRow: {
                  text: '     '
                },
                deleteTable: {
                  text: '    '
                }
              },
              color: { //   
                colors: ['green', 'red', 'yellow', 'blue', 'white'],
                text: 'Background Colors:'
              }
            }
          },
          keyboard: {
            bindings: QuillBetterTable.keyboardBindings
          }
        },
        placeholder: '     ...'
      }
    }
  },
  watch: {
    value (n) {
      this.quill.root.innerHTML = n
    }
  },
  mounted () {
    let dom = this.$el.querySelector('.editor')
    this.quill = new Quill(dom, this.options)
    this.quill.root.innerHTML = this.value
    //       
    this.quill.on('text-change', () => {
      this.$emit('getQuill', this.quill.root.innerHTML)
    })
    //          
    const sourceEditorButton = document.querySelector('.ql-sourceEditor')
    sourceEditorButton.innerHTML = ''
  }
}
</script>
<style lang="stylus">
.editor{
  min-height 50vh
}
.qlbt-col-tool{
  display:none;
}


.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '  ';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '  1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '  2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '  3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '  4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '  5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '  6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '    ';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: '    ';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: '    ';
}
#disabledMsg.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
  color: #bfd9d8;
  background-color: #eef6f6;
  border-color: #d1e5e5;
}
.ql-snow .ql-tooltip[data-mode=link]::before{
  content: '    ';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after{
  content:'  ';
}
</style>

도구 막대 글꼴 수정

var fonts = ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'Arial', 'Times-New-Roman']
var Font = Quill.import('attributors/class/font')
Font.whitelist = fonts //          
Quill.register(Font, true)

tabbar     
[{ 'font': fonts }],

css 에서 중국어 이름 변경

.ql-editor .ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}
.ql-editor .ql-font-SimSun {
  font-family: "SimSun";
}
.ql-editor .ql-font-SimHei {
  font-family: "SimHei";
}
.ql-editor .ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-editor .ql-font-Arial {
  font-family: "Arial";
}
.ql-editor .Times-New-Roman {
  font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '    ';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
 content: "    ";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "  ";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
 content: "  ";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
 content: "  ";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
 content: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
 content: "Times New Roman";
}

글꼴 크기 옵션 수정

var sizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px']

var SizeStyle = Quill.import('attributors/style/size')
SizeStyle.whitelist = sizes
Quill.register(SizeStyle, true)

tabbar   
[{ 'size': sizes }],

옵션 의 이름 변경,css 대응 변경

.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
  content: '8px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: '22px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: '26px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: '32px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
  content: '48px';
}
.ql-editor .ql-size-8px {
    font-size: 8px;
}
.ql-editor .ql-size-10px {
    font-size: 10px;
}
.ql-editor .ql-size-12px {
    font-size: 12px;
}
.ql-editor .ql-size-14px {
    font-size: 14px;
}
.ql-editor .ql-size-16px {
    font-size: 16px;
}
.ql-editor .ql-size-18px {
    font-size: 18px;
}
.ql-editor .ql-size-20px {
    font-size: 20px;
}
.ql-editor .ql-size-22px {
    font-size: 22px;
}
.ql-editor .ql-size-24px {
    font-size: 24px;
}
.ql-editor .ql-size-26px {
    font-size: 26px;
}
.ql-editor .ql-size-32px {
    font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
    font-size: 48px;
}
.ql-editor .ql-size-48px {
    font-size: 48px;
}

Quill 의 내용 가 져 오기
html 가 져 오기

this.quill.root.innerHTML

**  **
this.quill.root.innerHTML=""

기본 반환 형식 은 배열 입 니 다.

this.quill.getContents()
**  **
this.quill.setContents(this.value)

필요 한 페이지 에서 이 구성 요 소 를 사용 합 니 다.

<ds-editor @getQuill="getQuill"></ds-editor>
methods:{
getQuill (v) {
      console.log(v.ops)
    },
}

도구 모음 에 기능,이벤트 추가 방법

toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote'],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': []}],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': []}],
              [{ 'align': [] }],
              ['clean'],
              ['link'],
              ['sourceEditor'] //    （   ）
            ],
            handlers: {
              sourceEditor: () => { //     
                let tableModule = this.quill.getModule('better-table')
                tableModule.getTable()
                tableModule.insertTable(3, 3)
              }
            }
          },

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Quill로 입력 한 이미지를 js로 얻는 방법

다음과 같이 취득한 DELTA 형식의 데이터를 JSON으로 취급하여 화상 데이터 부분을 취득한다. 개념 코드.js Ctrl+V에 의한 이미지 붙여넣기에 대응한 WYSIWIG 텍스트 에디터의 인터페이스입니다. 간단한 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue 에서 부 텍스트 편집기 사용 Quill

좋은 웹페이지 즐겨찾기