Vue 프로젝트에 Ace 코드 편집기를 통합하는 방법에 대한 자세한 그래픽 설명

서문

에이스를 통합하는 과정에서 인터넷에서 찾은 정보가 상대적으로 단편적이고 중국어 자료가 상대적으로 적다는 것을 알게 되었습니다. 이 글에서는 차후 참고를 위해 주로 기록하고 정리했습니다. Vue 프로젝트에 Ace 코드 편집기

Ace 구성 항목의 중국어 비교
• 함정: Ace 편집기 커서 정렬 문제 해결
• 최적화: 필요에 따라 ace 빌드 사용
• 소개

Ace는 작성된 내장형 코드 편집기입니다. 자바스크립트에서. Sublime, Vim 및 TextMate와 같은 기본 편집기의 기능 및 성능과 일치합니다. 모든 웹페이지와 JavaScript 애플리케이션에 쉽게 삽입할 수 있습니다. Ace는

Cloud9 IDE

의 메인 편집자로 유지되며 Mozilla Skywriter(Bespin) 프로젝트의 후속 버전입니다.

Ace 공식 웹사이트

• 온라인 데모: ace.c9.io/build/kitch…
• Features

110개 이상의 언어 ​​

구문 강조 표시

(TextMate/Sublime Text를 가져올 수 있음
• . tm언어 파일) 20개 이상의 테마(TextMate/Sublime Text .tmtheme 파일을 가져올 수 있음)
• 자동 들여쓰기 및 업그레이드
옵션 명령줄
• 대용량 문서 처리(400만 줄이 한계인 것 같습니다!)
vim 및 Emacs 모드를 포함한 완전히 사용자 정의 가능한 키 바인딩
• 정규식을 사용하여 검색 및 바꾸기
• 일치하는 괄호 강조
• 소프트 탭과 실제 탭 간 전환
숨겨진 문자 표시
• 마우스로 텍스트 드래그 앤 드롭
• 줄 바꿈
코드 접기
• 다중 커서 및 선택
• 실시간 구문 검사기(현재 JavaScript/CoffeeScript/CSS/XQuery)
• 잘라내기, 복사 및 붙여넣기 기능
• 빠른 시작

vue2-ace-도 사용할 수 있습니다.

직접 통합 단계를 따르세요
• 여기에서는 주로 ace-build의 사용을 기록하고 프로젝트의 Ace 구성 요소를 직접 패키징합니다
• 설치

npm install ace-builds --save-dev复制代码

설치 후 효과는 다음과 같습니다.

통합

새 폴더 AceEditor

AceEditor 파일에서 새 index.vue를 생성하고 코드는 다음과 같습니다.

<template>
  <div
    ref="editorform"
   
    style="height: 250px"
  >
  </div>
</template>

<script>
import ace from &#39;ace-builds&#39;
import &#39;./webpack-resolver&#39; // 自定义webpack-resolver，按需引入
import &#39;ace-builds/src-noconflict/mode-json&#39;
import &#39;ace-builds/src-noconflict/mode-mysql&#39;
import &#39;ace-builds/src-noconflict/mode-text&#39;
import &#39;ace-builds/src-noconflict/theme-tomorrow&#39;
import &#39;ace-builds/src-min-noconflict/ext-language_tools&#39;
import { onMounted, onBeforeUnmount, ref, watch } from &#39;@vue/composition-api&#39;

export default {
  name: &#39;AceEditor&#39;,
  emits: [&#39;onChange&#39;],
  props: {
    value: {
      type: String,
      default: &#39;&#39;,
    },
    // 这里可以接收更多组件传递的参数，做一些自定义效果
  },
  setup(props, vm) {
    let editor = null
    const editorform = ref(null)
    let options = {
      theme: &#39;ace/theme/tomorrow&#39;, // 主题
      mode: &#39;ace/mode/mysql&#39;, // 代码匹配模式
      tabSize: 2, //标签大小
      fontSize: 14, //设置字号
      wrap: true, // 用户输入的sql语句，自动换行
      enableSnippets: true, // 启用代码段
      showLineNumbers: true, // 显示行号
      enableLiveAutocompletion: true, // 启用实时自动完成功能 （比如：智能代码提示）
      enableBasicAutocompletion: true, // 启用基本自动完成功能
      scrollPastEnd: true, // 滚动位置
      highlightActiveLine: true, // 高亮当前行
    }

    const init = () => {
      if (editor) {
        //实例销毁
        editor.destroy()
      }
      //初始化
      editor = ace.edit(editorform.value, options)
      editor.setValue(props.value ? props.value : &#39;&#39;) // 设置内容
      editor.on(&#39;change&#39;, () => {
        vm.emit(&#39;onChange&#39;, editor.getValue())
      })
    }
    
    onMounted(() => {
      init()
    })
    
    onBeforeUnmount(() => {
      editor.destroy()
      editor.container.remove()
    })
    return {
      editorform
    }
  },
}
</script>

<style>
@import &#39;~ace-builds/css/ace.css&#39;;
</style>

webpack-resolver.js 최적화에 대해

에서 webpack 환경에서는 webpack-resolver.js를 가져와야 합니다. 먼저 node_modules/ace-builds/webpack-resolver.js 파일을 살펴보겠습니다. , 비용이 크게 증가하므로 여기에서 최적화해야 합니다. Introduce on Demand

AceEditor 파일에서 새 webpack-resolver.js를 생성합니다. 코드는 다음과 같습니다.

ace.config.setModuleUrl('ace/mode/mysql', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-mysql.js'))
ace.config.setModuleUrl('ace/mode/text', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-text.js'))
ace.config.setModuleUrl('ace/mode/json', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-json.js'))
ace.config.setModuleUrl('ace/theme/tomorrow', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-tomorrow.js'))
ace.config.setModuleUrl('ace/ext/language_tools', require('file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js'))

프로젝트의 src 디렉터리에 새로운 RegisterAce.js를 생성합니다

import ACE from '@/components/AceEditor' // 这里是你创建的AceEditor文件夹的路径
 
export default {
  install(Vue) {
    Vue.component('ace', ACE)
  },
}

Vue 프로젝트의 항목 파일 main.js에 Ace 모듈을 도입하고, Vue.use()를 사용하여 ace 컴포넌트를 전역적으로 등록합니다

import ace from 'ace-builds'
import RegistAce from './registAce'

Vue.use(ace)
Vue.use(RegistAce)

사용 ace 구성요소(전역 구성요소)

<ace v-model="content" @onChange="onChange"> </ace>

위는 Vue 프로젝트에 Ace의 간단한 통합을 완료합니다. 더 많은 기능을 보려면 공식 웹사이트를 참조하세요:

Ace 공식 웹사이트

구성 항목

공식 웹사이트 위키:

github.com/ajaxorg/ace…

핵심 ace 구성 요소(editor, session, renderer, mouseHandler code>) optionProvider 인터페이스 구현

setOption(optionName, optionValue)
setOptions({
    optionName : optionValue
    ...
})
getOption(optionName)
getOptions()

다음은 구성 옵션 목록입니다. 달리 명시하지 않는 한 옵션 값은 Boolean입니다.

editor, session, renderer, mouseHandler) implement optionProvider interface

rrreee

以下是配置选项的列表。除非另有说明，否则选项值为布尔值。

editor.setOption也会修改session/renderer/$mouseHandlereditor.setOption은 session/renderer/$mouseHandler와 관련된 옵션도 수정합니다

editor options

거짓항상병합 실행 취소 behaviorsEnabledBooleantrue-EnableBehaviorsEnabledBooleantrue- 줄 바꿈 활성화autoScrollEditorIntoViewBooleanfalse -스크롤 활성화copyWithEmptySelectionBooleantrue -공백 복사useSoftTabsBooleanfalse -소프트 탭 사용navigateWithinSoftTabs 부울 false-소프트 태그 점프enableMultiselectBooleanfalse-여러 장소 선택

옵션 이름	값 유형	기본값	선택적 값	함수
selectionStyle	String	text	줄 | 텍스트	스타일 선택
highlightActiveLine	Boolean	true	-	현재 줄 강조
highlightSelectedWord	Boolean	true	-	선택한 텍스트 강조
readOnly	Boolean	false	-	읽기 전용인지
cursorStyle	String	ace	ace | 슬림 | 와이드	커서 스타일
mergeUndoDeltas	String |
				렌더러 옵션

옵션 이름

값 유형기본값선택값FunctionhScrollBarAlwaysVisibleBooleanfalse-세로 스크롤 막대가 항상 표시됩니다.vScrollBar항상 표시됨Booleanfalse- 가로 스크롤 막대가 항상 표시됩니다.highlightGutterLineBooleantrue-강조 표시된 테두리animatedScrollBooleanfalse-스크롤 애니메이션showInvisibles 부울 false-보이지 않는 문자 표시showPrintMarginBooleantrue-인쇄 여백 표시printMarginColumnNumber80-설정 페이지 여백 printMarginBoolean | 숫자false-여백 표시 및 설정fadeFoldWidgetsBooleanfalse- Fade FoldWidgetsshowFoldWidgets Boolean true-접힌 위젯 표시showLineNumbersBooleantrue-줄 번호 표시showGutter Boolean true-줄번호 영역 표시displayIndentGuidesBooleantrue-표시 가이드fontSizeNumber | Stringinherit-글꼴 크기 설정fontFamilyString inheritmaxLinesNumber--을 줄 수minLinesNumber로 설정 적어도 줄 수는scrollPastEnd부울 | 숫자0-스크롤 위치fixedWidthGutterBooleanfalse-고정 줄 번호 영역 너비 themeString- -테마 참조 경로(예: "ace/theme/textmate")옵션 이름값 유형

		글꼴
		mouseHandler 옵션

기본값

선택값Re 마크scrollSpeedNumber--스크롤 속도 dragDelayNumber--드래그 지연dragEnabledBooleantrue -드래그 활성화 여부focusTimoutNumber--Focus TimeouttooltipFollowsMouseBooleanfalse -마우스 팁

세션 옵션

확장자에 의해 정의된 편집기 옵션기본값Boolean

옵션 이름	값 유형	기본값	선택값	Remarks
firstLineNumber	Number	1	-	시작 줄 번호
overwrite	Boolean	-	-	overwrite
newLineMode	String	auto	auto | unix | windows	새 줄 모드
useWork 어	Boolean	-	-	도우미 개체 사용
useSoftTabs	Boolean	-	-	소프트 탭 사용
tabSize	Number	-	-	라벨 크기
wrap	부울 ㅋㅋㅋ	-	-	코드 매칭 "ace/mode/text"와 같은 패턴
			옵션 이름	값 유형
선택값	설명			기본 자동 완성 활성화

-

-기본 자동 완성 활성화실시간 자동 완성 활성화 커서 정렬 문제 해결편집기에서 내용을 입력할 때 커서 정렬 문제가 발생합니다. 처음에는 정상적인 것처럼 보이지만 더 많은 내용을 입력할수록 더 많은 커서 정렬 문제를 발견하게 됩니다. Non-monowidth 글꼴Monospace 글꼴Mac에서 사용할 수 있습니다. Consolas 글꼴은 Windows

	enableLiveAutocompletion	Boolean	-	-
enableSnippets	Boolean	-	-	활성화 조각
enableEmmet	Boolean	-	-	Emmet 활성화
useElasticTabstops	Boolean	-	-	유연한 탭 정지 사용
		으로 인해 부정확한 계산이 발생합니다. 문제를 해결하려면 편집 상자에서 글꼴을	으로 설정하세요.	⚠️참고: 여기에는 고정 폭을 설정할 때 Mac과 구별해야 합니다. 글꼴, monospace 글꼴은 Windows
		에서 사용할 수 있습니다. 참고 웹사이트/소스 코드		Ace 공식 웹사이트

vue2-ace-editor

위 내용은 Vue 프로젝트에 Ace 코드 편집기를 통합하는 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!