Quill을 사용해서 텍스트 에디터 만들기: API(#5)

onezerokang·2021년 8월 18일

목록 보기

5/12

API

Content

deleteText

편집기에서 텍스트를 삭제하여 변경 내용을 나타내는 델타를 반환합니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods(

deleteText(index: Number, length: Number, source: String = 'api'): Delta

Examples

quill.deleteText(6, 4);

getContents

Delta 객체로 표시되는 formatting data를 사용하여 에디터의 내용을 가져져옵니다.

Methods(

getContents(index: Number = 0, length: Number = remaining): Delta

Examples

var delta = quill.getContents();

getLength

에디터 컨텐츠의 길이를 반환합니다. Quill이 비어있더라도 '\n'으로 표시되는 빈 줄이 여전히 있으므로 getLength는 1를 반환합니다.

Methods(

getLength(): Number

Examples

var length = quill.getLength();

getText

에디터 문자열 내용을 가져옵니다. 문자열이 아닌 contents는 생략되었으므로 반환된 문자열의 길이가 getLength에서 반환된 에디터의 길이보다 짧을 수 있습니다. Quill이 비어있더라도 에디터에 빈 줄이 기본적으로 있어, 이 경우 '\n'을 반환합니다.

length 매개변수(parameter)의 기본값은, 시작점부터 남은 문서의 길이로 설정됩니다.

Methods

getText(index: Number = 0, length: Number = remaining): String

Examples

var text = quill.getText(0, 10);

insertEmbed

embeded content를 에디터에 삽입하여 변경 내용을 나타내는 Delta를 반환합니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

insertEmebed(index: Number, type: String, value: any, source: Stirng = 'api'): Delta

Examples

quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');

insertText

에디터에 텍스트를 삽입합니다. 선택적으로 지정된 formats이나 여러 formats으로 삽입합니다. 변경 사항을 나타내는 Delta를 반환합니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

insertText(index: Number, text: String, source: String = 'api'):Delta;
insertText(index: Number, text: String, format: String, value: any,
           source: String = 'api'): Delta
insertText(index: Number, text: String, formats: { [String]: any },
           source: String = 'api'): Delta

Examples

quill.insertText(0, 'Hello', 'bold', true);

quill.insertText(5, 'Quill', {
  'color': '#ffff00',
  'italic': true
});

setContents

지정된 내용으로 에디터를 덮어씁니다. 내용은 newline으로 끝나야 합니다. 변경 사항을 나타내는 Delta를 반환합니다. 지정된 delta에 유효하지 않은 operations가 없다면 전달된 델타와 동일합니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

setContents(delta: Delta, source: String = 'api'): Delta

Examples

quill.setContents([
  { insert: 'Hello ' },
  { insert: 'World!', attributes: { bold: true } },
  { insert: '\n' }
]);

setText

지정된 텍스트로 편집기의 내용을 설정하여, 변경 내용을 나타내는 델타를 반환합니다.
(참고:Quill 문서는 newline으로 끝나야 하므로 생략할 경우 행이 추가됩니다.)Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

setText(text: String, source: String = 'api'): Delta

Examples

quill.setText('Hello\n');

updateContents

에디터 내용에 delta를 적용하여, 변경사항을 나타내는 delta를 반환합니다. 지정된 delta에 유효하지 않은 operations가 없다면 전달된 델타와 동일합니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

updateContents(delta: Delta, source: String = 'api'): Delta

Examples

// 현재 에디터에 [{ insert: 'Hello World!' }]이 포함되어있다고 가정한다.
quill.updateContents(new Delta()
  .retain(6)                  // 'Hello'는 유지한다.
  .delete(5)                  // 'World'는 제거한다.
  .insert('Quill')
  .retain(1, { bold: true })  // 느낌표에 볼드체 적용
);
// 수정된 에디터는 다음과 같다.
// [
//  { insert: 'Hello Quill' },
//  { insert: '!', attributes: { bold: true} }
// ]

Formatting

format

사용자가 현재 선택한 텍스트의 형식을 지정하고 변경된 델타를 반환합니다. 사용자가 선택한 길이가 0인 경우(그냥 커서를 둔 경우) format은 활성상태가 되므로 다음 문자는 해당 형식을 가집니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

format(name: String, value: any, source: String = 'api'): Delta

Examples

quill.format('color', 'red');
quill.format('align', 'right');

formatLine

지정된 범위의 모든 줄의 포맷을 설정하고 변경사항을 나타내는 델타를 반환합니다. 사용가능한 format 목록은 format을 참조하십시오. 인라인 format을 사용하여 formatLine메서드를 호출할 경우 아무런 효과가 없습니다. 형식을 제거하려면 value 인자에 false를 전달합니다. 사용자의 선택이 보존되지 않을 수 있습니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

formatLine(index: Number, length: Number, source: String = 'api'): Delta
formatLine(index: Number, length: Number, format: String, value: any,
           source: String = 'api'): Delta
formatLine(index: Number, length: Number, formats: { [String]: any },
           source: String = 'api'): Delta

Examples

quill.setText('Hello\nWorld!\n');

quill.formatLine(1, 2, 'align', 'right');   // right aligns the first line
quill.formatLine(4, 4, 'align', 'center');  // center aligns both lines

formatText

에디터에서 텍스트 format을 지정하여 변경된 델타를 반환합니다.
텍스트 정렬과 같은 줄 단위의 형식의 경우 newline 문자('\n')를 대상으로 지정하거나 [formatLine](https://quilljs.com/docs/api/#formatline)를 사용합니다. 사용 가능한 형식 목록은 형식을 참조하십시오. 형식을 제거하려면 값 인수에 false를 전달합니다. 사용자의 선택이 보존되지 않을 수 있습니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

formatText(index: Number, length: Number, source: String = 'api'): Delta
formatText(index: Number, length: Number, format: String, value: any,
           source: String = 'api'): Delta
formatText(index: Number, length: Number, formats: { [String]: any },
           source: String = 'api'): Delta

Examples

quill.setText('Hello\nWorld!\n');

quill.formatText(0, 5, 'bold', true);      // bolds 'hello'

quill.formatText(0, 5, {                   // unbolds 'hello' and set its color to blue
  'bold': false,
  'color': 'rgb(0, 0, 255)'
});

quill.formatText(5, 1, 'align', 'right');  // right aligns the 'hello' line

getFormat

지정된 범위에서 텍스트의 일반적인 형식을 가져옵니다. 형식을 보고하려면 범위 내의 모든 텍스트의 참 값이 있어야 합니다. 서로 다른 참 값이 있는 경우 모든 참 값이 있는 배열이 보고됩니다. 범위가 제공되지 않으면 사용자의 현재 선택 범위가 사용됩니다. 커서에 설정된 형식을 표시하는데 사용할 수 있습니다. 인수를 사용하지 않고 호출하면 사용자의 현재 선택 범위가 사용됩니다.

Methods

getFormat(range: Range = current): { [String]: any }
getFormat(index: Number, length: Number = 0): { [String]: any }

Examples

quill.setText('Hello World!');
quill.formatText(0, 2, 'bold', true);
quill.formatText(1, 2, 'italic', true);
quill.getFormat(0, 2);   // { bold: true }
quill.getFormat(1, 1);   // { bold: true, italic: true }

quill.formatText(0, 2, 'color', 'red');
quill.formatText(2, 1, 'color', 'blue');
quill.getFormat(0, 3);   // { color: ['red', 'blue'] }

quill.setSelection(3);
quill.getFormat();       // { italic: true, color: 'blue' }

quill.format('strike', true);
quill.getFormat();       // { italic: true, color: 'blue', strike: true }

quill.formatLine(0, 1, 'align', 'right');
quill.getFormat();       // { italic: true, color: 'blue', strike: true,
                         //   align: 'right' }

removeFormat

지정된 범위 내의 모든 형식 지정 및 포함을 제거하여 변경 사항을 나타내는 델타를 반환합니다.줄의 일부가 포함된 경우 line format이 제거됩니다. 사용자의 선택이 보존되지 않을 수 있습니다. Soruce는 "user", "api" 또는 "silent"일 수 있습니다. 에디터가 disabled 된 경우 source가 "user"인 호출은 무시됩니다.

Methods

removeFormat(index: Number, length: Number, source: String = 'api'): Delta

Examples

quill.setContents([
  { insert: 'Hello', { bold: true } },
  { insert: '\n', { align: 'center' } },
  { insert: { formula: 'x^2' } },
  { insert: '\n', { align: 'center' } },
  { insert: 'World', { italic: true }},
  { insert: '\n', { align: 'center' } }
]);

quill.removeFormat(3, 7);
// Editor contents are now
// [
//   { insert: 'Hel', { bold: true } },
//   { insert: 'lo\n\nWo' },
//   { insert: 'rld', { italic: true }},
//   { insert: '\n', { align: 'center' } }
// ]

Selection

getBounds

지정된 위치에서 선택 항목의 픽셀 위치 및 치수를 가져옵니다(편집기 컨테이너에 상대적인). 사용자의 현재 선택이 해당 인덱스에 있을 필요는 없습니다. 툴팁을 배치할 위치를 계산하는데 유용합니다.

Methods

getBounds(index: Number, length: Number = 0):
  { left: Number, top: Number, height: Number, width: Number }

Examples

quill.setText('Hello\nWorld\n');
quill.getBounds(7);  // Returns { height: 15, width: 0, left: 27, top: 31 }

getSelection

사용자의 선택 범위를 가져옵니다. 선택적으로 에디터에 focus를 맞춥니다. 유저의 커서가 에디터를 focus하지 않는다면 null이 반환될 수 있습니다.

Methods

getSelection(focus = false): { index: Number, length: Number }

Examples

var range = quill.getSelection();
if (range) {
  if (range.length == 0) {
    console.log('User cursor is at index', range.index);
  } else {
    var text = quill.getText(range.index, range.length);
    console.log('User has highlighted: ', text);
  }
} else {
  console.log('User cursor is not in editor');
}

setSelection

Sets user selection to given range, which will also focus the editor. Providing null as the selection range will blur the editor. Source may be "user", "api", or "silent".

Methods

setSelection(index: Number, length: Number = 0, source: String = 'api')
setSelection(range: { index: Number, length: Number },
             source: String = 'api')

Examples

quill.setSelection(0, 5);

Editor

blur

에디터에서 focus를 제거합니다.

Methods

blur()

Examples

quill.blur();

disable

eable(false)의 약어입니다.

enable

마우스 또는 키보드와 같은 입력 장치를 통해 사용자가 편집할 수 있는 기능을 설정합니다. Source가 "api" 혹은 "slient" 인 경우 API 호출 기능에 영향을 주지 않습니다.

Methods

enable(enabled: boolean = true)

Examples

quill.enable();
quill.enable(false);   // Disables user input

focus

에디터에 초점을 맞추고 마지막 범위로 돌아갑니다.

Methods

focus()

Examples

quill.focus();

hasFocus

에디터에 포커스가 있는지 확인합니다. toolbar, tooltip에 포커스를 맞추면 에디터로 인식하지 않습니다.

Methods

hasFocus(): Boolean

Examples

quill.hasFocus();

update

편집기에서 사용자 업데이트를 확인하고 변경 사항이 발생한 경우 이벤트를 실행합니다. 공동 작업 시 충돌 해결에 유용합니다. Source는 "user", "api" 또는 "slient"일 수 있습니다.

Methods

update(source: String = 'user')

Examples

quill.update();

Events

text-change

Quill의 내용이 변경되었을 때 이벤트를 호출한다. 변경 내용, 변경 전 에디터 내용, 변경 내용 출처 등이 제공됩니다. 사용자로 부터 생성된 경우 source는 "user"가 됩니다. 예시:

사용자가 에디터에 입력할 경우
사용자가 toolbar를 사용하여 텍스트 형식을 지정할 경우
사용자가 단축키를 사용해서 원상태로 되돌렸을 때(undo)
사용자가 운영체제의 맞춤법 수정 기능을 사용했을 때

API를 통해 변경 사항이 발생할 수 있지만 사용자로부터 발생하는 한 제공된 source는 여전히 "user"여야 합니다. 예를 들어, 사용자가 toolbar를 클릭하면 기술적으로 toolbar module는 변경사항을 적용하기 위해 Quill API를 호출합니다. 그러나 변경된 원점이 사용자의 클릭이었기 때문에 source는 여전히 "user"입니다.

텍스트 변경을 유발하는 API는 "slient" source로 호출할 수도 있으며, 이 경우 text-change 이벤트가 동작하지 않습니다. 텍스트 변경 기록에 의존하는 실행 취소 스택(undo)및 기타 기능이 손상될 수 있으므로 이 방법은 권장되지 않습니다.

텍스트를 변경하면 선택 항목이 변경될 수 있지만(예: 타이핑은 커서를 이동시킵니다), text-change handler 동안 선택 항목이 아직 업데이트되지 않고 기본 브라우저 동작으로 인해 선택 항목이 불일치 상태가 될 수 있습니다. 신뢰할 수 있는 선택 업데이트를 위해 selection-change 또는 editor-change를 사용합니다.

Callback Signature

handler(delta: Delta, oldContents: Delta, source: String)

Examples

quill.on('text-change', function (delta, oldDelta, source) {
  if(source == 'api'){
    console.log("An API call triggered this change.");
  }else if (source == 'user') {
    console.log("A user action triggered this change.");
  }
})

selection-change

사용자 또는 API로 인해 선택 경계를 나타내는 선택 항목이 변경될 때 동작합니다. null 범위는 선택 손실을 나타냅니다(일반적으로 에디터에서 포커스가 손실되어 발생함). 또한 작동된 범위가 null인지 확인하는 것만으로도 이 이벤트 포커스를 포커스 변경 이벤트로 사용할 수 있습니다.

selection-change를 유발하는 API는 "slient" source로 호출될 수 있으며, 이 경우 선택 변경 내용이 전송되지 않습니다. 이것은 -selection-chage이 잘 못동작하는 경우 유용합니다. 예를 들어, 입력하면 선택된 항목이 변경되지만, 모든 문자에 대해 selection-change 이벤트를 발생시키는 것은 너무 낭비입니다.

Callback Signature

handler(range: { index: Number, length: Number },
        oldRange: { index: Number, length: Number },
        source: String)

Examples

quill.on('selection-change', function(range, oldRange, source) {
  if (range) {
    if (range.length == 0) {
      console.log('User cursor is on', range.index);
    } else {
      var text = quill.getText(range.index, range.length);
      console.log('User has highlighted', text);
    }
  } else {
    console.log('Cursor not in the editor');
  }
});

editor-change

Source가 "slient" 상태일 경우에도 text-change 또는 selction-change 이벤트가 동작할 때 동작합니다. 첫번째 매개 변수는 이벤트 이름(text-change 또는 selection-change)이며, 그 다음 인자는 해당 handlers에 일반적으로 전달되는 인자입니다.

Callback Signature

handler(name: String, ...args)

Examples

quill.on('editor-change', function(eventName, ...args) {
  if (eventName === 'text-change') {
    // args[0] will be delta
  } else if (eventName === 'selection-change') {
    // args[0] will be old range
  }
})

on

이벤트 핸들러를 추가합니디.

Methods

on(name: String, handler: Function): Quill

Examples

quill.on('text-change', function(){
  console.log("Text change!");
});

once

한번만 동작할 이벤트 핸들러를 추가합니다.

Methods

  once(name:String, handler: Function): Quill

Examples

quill.once('text-change', function() {
  console.log('First text change!');
});

off

이벤트 핸들러를 제거합니다.

Methods

  off(name:String, handler: Function): Quill

Examples

  function handler() {
    console.log("Hello!");
  }

quill.on("text-change", handler);
quill.off('text-change', handler);

Model

find(테스트 중인 기능)

지정된 DOM 노드에 대한 Quill 또는 Blot 인스턴스를 반환하는 정적 메서드입니다. 후자의 경우 bubble 매개변수에 true를 입력하면 해당 Blot을 찾을 때까지 지정된 DOM의 상위 항목이 검색됩니다.

Methods

  Quill.find(domNode: Node, bubble: boolean = false): Blot | Quill

Examples

const container = document.querySelector("container");
const quill = new Quill(container);
console.log(Quill.find(container) === quill); //Should be true

quill.insertText(0, "Hello", "link", "https://world.com");
var linkNode = document.querySelector("#container a");
var linkBlot = Quill.find(linkNode);

getIndex(테스트 중인 기능)

문서의 시작에서 주어진 Blot 발생까지의 거리를 반환합니다.

Methods

getIndex(blot: Blot): Number

Examples

let [line, offset] = quill.getLine(10);
let index = quill.getIndex(line);   // index + offset should == 10

getLeaf(테스트 중인 기능)

문서 내의 지정된 인덱스에 있는 leaf Blot을 반환합니다.

Methods

getLeaf(index: Number): Blot

Examples

quill.setText('Hello Good World!');
quill.formatText(6, 4, "bold", true);

let [leaf, offset] = quill.getLeaf(7);
// leaf should be a Text Blot with value "Good"
// offset should be 1, since the returned leaf started at index 6

getLeaf(테스트 중인 기능)

문서 내의 지정된 인덱스에서 Blot line을 반환합니다.

Methods

getLine(index: Number): [Blot, Number]

Examples

quill.setText('Hello\nWorld!');

let [line, offset] = quill.getLine(7);
// line should be a Block Blot representing the 2nd "World!" line
// offset should be 1, since the returned line started at index 6

Extension

debug

"error" , "warn" "log" 또는 "info" 같이 지정된 레벨에 따라 메시지를 로깅하는 정적 메서드입니다. true를 사용하면 "log"를 전달하는 것과 같다. false를 사용하면 모든 메시지가 비활성화 된다.

Methods

Quill.debug(level: String | Boolean)

Examples

Quill.debug('info');

import

Quill library, format, module 또는 theme를 반환하는 정적 메서드입니다. 일반적으로 경로는 Quill 소스 코드 디렉터리 구조에 정확히 매핑되어야 합니다. 달리 명시되지 않은 한 반환된 엔터티를 수정하는 것은 필수 Quill 기능을 손상시킬 수 있으므로 강력히 권장되지 않습니다.

Methods

Quill.import(path): any

Examples

var Parchment = Quill.import('parchment');
var Delta = Quill.import('delta');

var Toolbar = Quill.import('modules/toolbar');
var Link = Quill.import('formats/link');
// Similar to ES6 syntax `import Link from 'quill/formats/link';`

register

module, theme 또는 format을 등록하여 에디터에 추가할 수 있도록 한다. 나중에 Quill.import를 사용하여 검색할 수 있다. theme, module, 또는 format을 등록할 때 각각 'themes/', 'modules/', 'formats'/, 경로 접두사를 사용합니다. 특히 format의 경우 format을 직접 전달하기 위한 약어가있으며 경로가 자동으로 생성됩니다. 기존 정의를 동일한 경로로 덮어씁니다.

Methods

Quill.register(format: Attributor | BlotDefinintion, supressWarning: Boolean = false)
Quill.register(path: String, def: any, supressWarning: Boolean = false)
Quill.register(defs: { [String]: any }, supressWarning: Boolean = false)

Examples

var Module = Quill.import('core/module');

class CustomModule extends Module {}

Quill.register('modules/custom-module', CustomModule);

Quill.register({
  'formats/custom-format': CustomFormat,
  'modules/custom-module-a': CustomModuleA,
  'modules/custom-module-b': CustomModuleB,
});

Quill.register(CustomFormat);
// CustomModuleA는 format이 아니기에 다음과 같이 등록할 수 없다.Quill.register(CustomModuleA)

getModule

에디터에 추가된 모듈을 가져옵니다.

Methods

getModule(name: String): any

Examples

var toolbar quill.getModule('toolbar');

원문
https://quilljs.com/docs/api/

onezerokang

블로그 이전 했습니다: https://techpedia.tistory.com

이전 포스트