vue3 + vite中按需使用ace-builds实现编辑器

vue3-ace-editor (opens new window)

ace-builds (opens new window)

在线 ace-builds (opens new window)

一、安装使用 vue3-ace-editor

其实vue3-ace-editor也是在 ace-builds 上面再次封装的，可以在 node_modules/vue3-ace-editor/types.d.ts中看到继承自ace-builds

1. npm i vue3-ace-editor 安装完成后看下node_modules下有没有ace-builds,没有也安装下，一般是根据依赖会自动安装的

2. 引入组件

<v-ace-editor
  v-model:value="dataForm.textareashow"
  @init="initFail"
  @blur="blurFn"
  :lang="aceConfig.lang"
  :theme="aceConfig.theme"
  :options="aceConfig.options"
  :readonly="aceConfig.readOnly"
  style="height: 37vh"
  class="json-editor"
/>

import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';

// 如果你想做的是 json 编辑器， 可以在上面vue3-ace-editor的git地址看下官方提供的
import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'; // For vite
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);

import searchboxUrl from 'ace-builds/src-noconflict/ext-searchbox?url'; // For vite
ace.config.setModuleUrl('ace/ext/searchbox', searchboxUrl);

// ace主题包
// import 'ace-builds/src-min-noconflict/theme-kuroir';
import 'ace-builds/src-noconflict/theme-chrome';
// ace语言包
// import 'ace-builds/src-min-noconflict/mode-javascript';
// import 'ace-builds/src-min-noconflict/mode-xml';
import 'ace-builds/src-min-noconflict/mode-json5';
import 'ace-builds/src-min-noconflict/mode-json';

setup(props, context) {
  // ace.edit().execCommand('find');
  //ace编辑器配置
  const aceConfig = reactive({
    lang: 'json', //解析json
    mode: 'ace/mode/json',
    theme: 'chrome', //主题
    readOnly: false, //是否只读
    options: {
      enableBasicAutocompletion: true, // 启用基本自动完成
      enableSnippets: true, // 启用代码段
      enableLiveAutocompletion: true, // 启用实时自动完成
      tabSize: 4,
      showPrintMargin: false,
      fontSize: 13,
      highlightActiveLine: true,
      useWorker: true,
    },
  });

  //form
  const dataForm = reactive({
    Example: {
      initiator: {
        role: 'guest',
        party_id: '10002',
      },
    },
    textareashow: '',
  });
  //init
  const value = toRaw(props.value);
  // console.log(value);
  const initFail = () => {
    dataForm.textareashow = JSON.stringify(value ? value : dataForm.Example, null, 2);
  };
  const blurFn = () => {
    aaa(dataForm.textareashow).then((res) => {
      console.log('失去焦点：更新', res);
      // console.log(res);
      context.emit('upd', res ? dataForm.textareashow : res);
    });
  };

  // 监听data的数据
  watch(
    () => dataForm.textareashow,
    (val, old) => {
      dataForm.textareashow = val;
    },
    {
      deep: true, // 深度监听
      immediate: false,
    }
  );
  function aaa(jsonString) {
    return new Promise((res, rej) => {
      //判断字符串是否为json格式
      try {
        var obj = JSON.parse(jsonString);
        if (typeof obj == 'object' && obj) {
          res(true);
          //对字符串进行格式化展示
          ...
        } else {
          res(false);
        }
      } catch (error) {
        res(false);
      }
    });
  }

  // 返回值
  return {
    aceConfig,
    dataForm,
    initFail,
    blurFn,
  };
}

setModuleUrl方法是引用模块包， 可以在node_modules/ace-builds/ace-modules.d.ts看到模块包的注册表，这是 v3 的用法，setModuleUrl方法可以在四个文件夹下中ace.js中大概 1131 行找到,

exports.setModuleUrl = function (name, subst) {
    return options.$moduleUrls[name] = subst;
};

所以setModuleUrl中包路径也有一定讲究，也没有找到相关说明。如果没有写对引用路径的话，会在加载这个包的时候出现加载失败

父组件使用 <JsonEditor :key="keyNum" :value="dslJson" @upd="dslJsonFn" /> keyNum 是会每次更新value值的时候自增， 以此来更新组件

---

选项名	值类型	默认	可选值	功能
selectionStyle	String	text	line	text
highlightActiveLine	Boolean	true	-	高亮当前行
highlightSelectedWord	Boolean	true	-	高亮选中文本
readOnly	Boolean	false	-	是否只读
cursorStyle	String	ace	ace	slim
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	-	选中多处
hScrollBarAlwaysVisible	Boolean	false	-	纵向滚动条始终可见
vScrollBarAlwaysVisible	Boolean	false	-	横向滚动条始终可见
highlightGutterLine	Boolean	true	-	高亮边线
animatedScroll	Boolean	false	-	滚动动画
showInvisibles	Boolean	false	-	显示不可见字符
showPrintMargin	Boolean	false	-	显示打印边距
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"
scrollSpeed	Number	-	-	滚动速度
dragDelay	Number	-	-	拖拽延时
dragEnabled	Boolean	true	-	是否启用拖动
focusTimout	Number	-	-	聚焦超时
tooltipFollowsMouse	Boolean	false	-	鼠标提示
firstLineNumber	Number	1	-	起始行号
overwrite	Boolean	-	-	重做
newLineMode	String	auto	auto	unix
useWorker	Boolean	-	-	使用辅助对象
useSoftTabs	Boolean	-	-	使用软标签
tabSize	Number	-	-	标签大小
wrap	Boolean	-	-	换行
foldStyle	String	-	markbegin	markbeginend
mode	String	-	-	代码匹配模式，例如“ace/mode/text"
enableBasicAutocompletion	Boolean	-	-	启用基本自动完成
enableLiveAutocompletion	Boolean	-	-	启用实时自动完成
enableSnippets	Boolean	-	-	启用代码段
enableEmmet Boolean	-	-	启用 Emmet
useElasticTabstops	Boolean	-	-	使用弹性制表位

3. ace-editor 修改滚动条样式

直接设置编辑器容器无法改动滚动条样式，深度监听 ace 生成的 ace_scrollbar 类名

// 设置编辑器的滚动条样式
:deep(.ace_scrollbar)::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}
:deep(.ace_scrollbar)::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #272822; /* Matches ace monokai */
  border-radius: 10px;
}
:deep(.ace_scrollbar)::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
  border-radius: 10px;
}