https://imswengineer.tistory.com/770
[JS][Quill] quill editor - 자동 글머리기호 완성 비활성화 하기
https://stackoverflow.com/questions/43008547/how-to-disable-automatic-bullets-in-quill How to disable automatic bullets in Quill Just started using Quill and find it very useful. My projects require plain text editing. Specifically I'm using quill as a for
imswengineer.tistory.com
keyboard: {
bindings: {
'list autofill': {
prefix: /^\s*()$/
}
}
}keyboard.bindings
- bindings는 키보드 입력에 대한 사용자 정의 바인딩을 설정하는 객체입니다.
- bindings 내의 각 키는 바인딩 이름을 나타내며, 이 경우 'list autofill'입니다.
'list autofill'
- 'list autofill'는 이 특정 바인딩의 이름입니다. 이는 설명적인 이름이며, 실제 기능을 정의하는 데는 영향을 미치지 않습니다.
prefix
- prefix는 키 입력이 적용될 조건을 정규 표현식으로 정의합니다.
- /^\s*()$/ 정규 표현식은 공백 문자로 시작하고 아무것도 없는 문자열에 매칭됩니다.
이 설정 자체는 완전한 설정이 아니며, 보통 다음과 같은 추가 속성이 필요합니다:
- key: 반응할 키 코드 (예: 32는 스페이스바).
- handler: 키 입력이 일어났을 때 실행할 함수.
quill 에디터에서
- +공백 을 입력하니 글머리기호가 입력되는 현상을 막아 놓으려고 위와 같은 코드 삽입하여 설정하였는데,
그러니까 스페이스바를 누르면 숫자 글머리기호가 삽입되는현상이 일어나서 그것도 막아놓는 설정을 추가하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quill Editor Example</title>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<style>
#editor {
height: 300px;
}
</style>
</head>
<body>
<div id="editor"></div>
<script>
$(document).ready(function() {
var $target = $('#editor');
var _uid = 'toolbar'; // 필요한 경우 실제 툴바 아이디를 사용하세요
var options = {}; // 필요한 경우 다른 옵션을 여기에 추가
var editor = new Quill($target.get(0), Object.assign({
modules: {
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: '배경색:'
}
}
},
'toolbar': '#' + _uid,
keyboard: {
bindings: {
'list autofill': {
prefix: /^\s*()$/,
handler: function() {
// 기본 동작을 막기 위해 빈 핸들러 사용
return false;
}
}
}
}
},
placeholder: '내용을 입력해주십시오',
theme: 'snow',
}, options));
// 에디터의 스페이스바 눌림 방지
$(editor.root).on('keydown', function(event) {
if (event.key === ' ') {
event.preventDefault();
var range = editor.getSelection();
if (range) {
editor.insertText(range.index, ' ');
editor.setSelection(range.index + 1);
}
}
});
});
</script>
</body>
</html>
빨간색 코드 추가하여 해결
'Front > JS & jQuery' 카테고리의 다른 글
| [js][echarts] sunburst 유형 (0) | 2024.06.29 |
|---|---|
| [jQuery] :visible (0) | 2024.06.21 |
| [js] decodeURI() (0) | 2024.06.09 |
| [js] 강제로 pdf download (0) | 2024.06.07 |
| [js] .exec() (0) | 2024.06.06 |