아이디어와 코드 세부정보를 강조하는 입력 상자 편집기 구문의 JavaScript 구현

텍스트 영역 요소는 웹 IDE에서 널리 사용되었습니다. 일반적으로 웹 사이트와 함께 제공되는 텍스트 영역 편집기는 우리의 요구를 충족할 수 없습니다. 개발자로서 우리는 종종 온라인으로 코드를 편집하고 코드를 강조 표시해야 하는 경우가 있습니다. 따라서 우리는 다른 오픈 소스 프로젝트를 통해 여기에 몇 가지 실용적인 기능을 추가할 수 있습니다. 기사에서는 JavaScript 라이브러리 ACE를 사용하여 입력 상자 효과를 생성합니다. 이것은 완전히 오픈 소스 스크립트입니다. 이 스크립트를 사용하면 개발자는 구문 강조를 지원하는 입력 상자를 만들 수 있습니다. 그런 다음 웹사이트 어디든 코드를 삽입할 수 있습니다.

라이브러리 다운로드 먼저 Github에서 ACE 코드를 다운로드해야 합니다. 다운로드 후 압축을 풀고 헤더 섹션에 js 파일을 삽입하세요.

<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>

편집기에 코드를 추가하세요.

먼저 편집자의 ID로 p를 설정한 다음 스크립트에서 ace.edit() 메서드를 호출하세요. 다음과 같이

var editor = ace.edit("editor"); 
editor.getSession().setMode("ace/mode/javascript");

변수 이름을 바꿀 수 있습니다. 편의상 var editor를 변수로 정의했는데, var decoeditor를 변수로 정의할 수도 있습니다. 두 번째 줄에서는 사용할 언어 강조 유형을 선언합니다. src 디렉터리에서 추가 언어 컬렉션을 선택할 수 있습니다. 다음은 지원되는 언어 모음입니다.

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
추가 매개변수 사용

editor.setTheme("ace/theme/dawn"); 
editor.getSession().setTabSize(2); 
editor.getSession().setUseWrapMode(true);

이 세 줄의 코드는 텍스트 입력 효과에 대한 것입니다. 첫 번째 줄 변경 코드의 기본 구문 색상과 테마. src 디렉토리에는 사용자 경험에 관한 테마 중 하나를 선택할 수 있습니다. 일반적으로 키보드의 Tab 키를 누르면 4개의 공백이 입력되는데 여기서는 2개의 공백으로 설정했습니다. 또한 기본적으로 텍스트가 자동으로 줄 바꿈되지 않고 제한을 초과하면 가로 스크롤 막대가 추가되어 바깥쪽으로 확장됩니다. . 하지만 이 setUseWrapMode(true) 메소드를 사용하면 단어 줄 바꿈 문제를 해결할 수 있습니다.
다른 명령도 있습니다. ACE 마법사를 참조하세요. 여기에는 커서 위치 변경, 새 콘텐츠 동적으로 추가 또는 텍스트 복사가 포함됩니다.

CSS 코드

#editor { 
margin-left: 15px; 
margin-top: 15px; 
width: 1000px; 
height: 400px; 
}

위 내용은 아이디어와 코드 세부정보를 강조하는 입력 상자 편집기 구문의 JavaScript 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!