Quill을 사용해서 텍스트 에디터 만들기: API(#5)
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');
Author And Source
이 문제에 관하여(Quill을 사용해서 텍스트 에디터 만들기: API(#5)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@onezerokang/Quill을-사용해서-텍스트-에디터-만들기-API5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)