Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue

Kata Pengantar

Dalam proses penyepaduan Ace, saya mendapati bahawa maklumat yang terdapat di Internet agak berpecah-belah, dan terdapat sedikit bahan Cina terutamanya merekod dan menyusunnya untuk rujukan seterusnya

• Sepadukan editor kod Ace ke dalam projek Vue
• Perbandingan Cina item konfigurasi Ace
• Penyelesaian Masalah: Menyelesaikan kursor editor Ace masalah salah jajaran
• Pengoptimuman: Gunakan ace-build atas permintaan

Pengenalan

Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).

• Tapak web rasmi Ace
• Demo dalam talian: ace.c9.io/build/kitch…

Ciri

• Penyertaan sintaks dalam lebih 110 bahasa (boleh mengimport TextMate/Sublime Text .tmlanguage fail)
• Lebih daripada 20 tema (boleh mengimport TextMate/Sublime Text .tmtheme files)
• Lekukan automatik dan naik taraf
• Baris arahan pilihan
• memproses dokumentasi yang besar (empat juta garisan nampaknya adalah had!)
• Ikatan kekunci yang boleh disesuaikan sepenuhnya, termasuk mod vim dan Emacs
• Cari dan ganti menggunakan ungkapan biasa
• Serlahkan kurungan yang sepadan
• Beralih antara tab lembut dan sebenar
• Tunjukkan aksara tersembunyi
• Gunakan tetikus untuk menyeret dan melepaskan teks
• Balut
• Lipatan kod
• Berbilang kursor dan pilihan
• Pemeriksa sintaks langsung (kini JavaScript/CoffeeScript/CSS/XQuery)
• Fungsi potong, salin dan tampal

Permulaan Pantas

• Anda juga boleh menggunakan vue2-ace-editor secara langsung dan ikuti langkah-langkah untuk menyepadukan
• Di sini kami merakam terutamanya penggunaan ace-build dan merangkum komponen Ace dalam projek

Pemasangan

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

Kesan selepas pemasangan adalah seperti berikut:

Integrasi

Buat folder baharu AceEditor

Dalam fail AceEditor, buat index.vue baharu, kodnya adalah seperti berikut:

<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>

Mengenai pengoptimuman webpack-resolver.js

Dalam persekitaran webpack, webpack-resolver.js perlu diimport. Mari kita lihat node_modules/ace-builds dahulu. /webpack-resolver.js, kebanyakan modul di dalamnya tidak digunakan oleh kami Jika diimport secara langsung, ia akan meningkatkan saiz pakej projek, jadi kami perlu mengoptimumkan di sini: Perkenalkan atas permintaanDalam fail AceEditor, cipta webpack-resolver.js baharu, kodnya adalah seperti berikut:

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'))

Dalam direktori src projek, buat registerAce.js baharu

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

Dalam fail kemasukan projek Vue Modul Ace diperkenalkan dalam main.js, dan Vue.use() mendaftarkan komponen ace secara global

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

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

Gunakan komponen ace (global komponen)

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

Perkara di atas telah dilengkapkan dalam projek Vue Dengan penyepaduan mudah Ace, anda boleh merujuk ke laman web rasmi untuk lebih banyak fungsi:

laman web rasmi Ace

Item konfigurasi

Tapak web rasmi wiki:

github.com/ajaxorg/ ace…

Komponen ace teras (

, editor, session, renderer) implement optionProvider interfacemouseHandler

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

Berikut ialah senarai pilihan konfigurasi. Melainkan dinyatakan sebaliknya, nilai pilihan adalah Boolean.

juga akan mengubah suai editor.setOption pilihan yang berkaitan dengannyasession/renderer/$mouseHandler

pilihan editor

选项名	值类型	默认值	可选值	功能
selectionStyle	String	text	line | text	选中样式
highlightActiveLine	Boolean	true	-	高亮当前行
highlightSelectedWord	Boolean	true	-	高亮选中文本
readOnly	Boolean	false	-	是否只读
cursorStyle	String	ace	ace | slim | smooth | wide	光标样式
mergeUndoDeltas	String | Boolean	false	always	合并撤销
behavioursEnabled	Boolean	true	-	启用行为
wrapBehavioursEnabled	Boolean	true	-	启用换行
autoScrollEditorIntoView	Boolean	false	-	启用滚动
copyWithEmptySelection	Boolean	true	-	复制空格
useSoftTabs	Boolean	false	-	使用软标签
navigateWithinSoftTabs	Boolean	false	-	软标签跳转
enableMultiselect	Boolean	false	-	选中多处

pilihan pemapar

选项名	值类型	默认值	可选值	功能
hScrollBarAlwaysVisible	Boolean	false	-	纵向滚动条始终可见
vScrollBarAlwaysVisible	Boolean	false	-	横向滚动条始终可见
highlightGutterLine	Boolean	true	-	高亮边线
animatedScroll	Boolean	false	-	滚动动画
showInvisibles	Boolean	false	-	显示不可见字符
showPrintMargin	Boolean	true	-	显示打印边距
printMarginColumn	Number	80	-	设置页边距
printMargin	Boolean | Number	false	-	显示并设置页边距
fadeFoldWidgets	Boolean	false	-	淡入折叠部件
showFoldWidgets	Boolean	true	-	显示折叠部件
showLineNumbers	Boolean	true	-	显示行号
showGutter	Boolean	true	-	显示行号区域
displayIndentGuides	Boolean	true	-	显示参考线
fontSize	Number | String	inherit	-	设置字号
fontFamily	String	inherit		设置字体
maxLines	Number	-	-	至多行数
minLines	Number	-	-	至少行数
scrollPastEnd	Boolean | Number	0	-	滚动位置
fixedWidthGutter	Boolean	false	-	固定行号区域宽度
theme	String	-	-	主题引用路径，例如"ace/theme/textmate"

pilihan pengendali tetikus

选项名	值类型	默认值	可选值	备注
scrollSpeed	Number	-	-	滚动速度
dragDelay	Number	-	-	拖拽延时
dragEnabled	Boolean	true	-	是否启用拖动
focusTimout	Number	-	-	聚焦超时
tooltipFollowsMouse	Boolean	false	-	鼠标提示

pilihan sesi

选项名	值类型	默认值	可选值	备注
firstLineNumber	Number	1	-	起始行号
overwrite	Boolean	-	-	重做
newLineMode	String	auto	auto | unix | windows	新开行模式
useWorker	Boolean	-	-	使用辅助对象
useSoftTabs	Boolean	-	-	使用软标签
tabSize	Number	-	-	标签大小
wrap	Boolean	-	-	换行
foldStyle	String	-	markbegin | markbeginend | manual	折叠样式
mode	String	-	-	代码匹配模式，例如“ace/mode/text"

pilihan editor yang ditakrifkan oleh sambungan

选项名	值类型	默认值	可选值	备注
enableBasicAutocompletion	Boolean	-	-	启用基本自动完成
enableLiveAutocompletion	Boolean	-	-	启用实时自动完成
enableSnippets	Boolean	-	-	启用代码段
enableEmmet	Boolean	-	-	启用Emmet
useElasticTabstops	Boolean	-	-	使用弹性制表位

Menyelesaikan masalah salah jajaran kursor

Apabila memasukkan kandungan dalam editor, mesej ralat akan muncul Masalah salah penjajaran kursor kelihatan biasa pada mulanya Semakin banyak kandungan yang anda masukkan, semakin banyak salah penjajaran kursor Selepas penyiasatan menyeluruh, didapati ia berpunca daripada penggunaan fon bukan monospace, yang mengakibatkan pengiraan tidak tepat Menetapkan fon dalam kotak edit kepada fon lebar tunggal akan menyelesaikan masalah

⚠️Nota: Terdapat lubang kecil di sini antara Mac dan Windows apabila menetapkan fon lebar mono

Fon
• boleh digunakan di bawah Macmonospace
Fon
• boleh digunakan di bawah WindowsConsolas

Tapak web rujukan/kod sumber

• Tapak web rasmi Ace
• vue2-ace-editor

Atas ialah kandungan terperinci Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!