vue 使用ace编辑器

1、引入
"vue2-ace-editor": "^0.0.15",

2、实例代码
<template><!--    <editor v-model="content" @init="editorInit" lang="html" style="min-height: 88vh;overflow:scroll" :options="options"theme="chrome"/>--><editor v-model="content" @init="editorInit" lang="text" style="overflow:scroll" :options="options"theme="chrome"/>
</template><script>
import {decode} from 'js-base64';export default {components: {editor: require('vue2-ace-editor')},props: {fileId: {type: String},filePath: {type: String},data: {type: String}},data() {return {content: '', options: {// enableBasicAutocompletion: true, // 启用基本自动完成// enableSnippets: true, // 启用代码段// enableLiveAutocompletion: true, // 启用实时自动完成printMargin: false,//显示设置页边距printMarginColumn: 30,//设置页边距showPrintMargin: false, //去除编辑器里的竖线highlightGutterLine: false,//高亮边线// displayIndentGuides: false, // 显示参考线enableEmmet: true, // 启用EmmettabSize: 6, // 标签大小fontSize: 14, // 设置字号useWorker: true, // 使用辅助对象enableMultiselect: true, //     选中多处readOnly: true, // 是否只读showFoldWidgets: true, // 显示折叠部件fadeFoldWidgets: true, // 淡入折叠部件wrap: true, //换行animatedScroll: true//滚动动画}}},methods: {$init() {if (this.data === undefined) {this.getXml()} else {this.content = this.data}},editorInit: function () {require('brace/ext/language_tools') //language extension prerequsite...require('brace/mode/html')require('brace/mode/javascript')    //languagerequire('brace/mode/less')require('brace/theme/chrome')require('brace/snippets/javascript') //snippet},async getXml() {const {data} = await this.$http.post('fileView/getXml', {fileId: this.fileId,filePath: this.filePath,})if (data.success) {this.content = decode(data.data)}}},computed: {listenChange() {const {fileId, filePath} = thisreturn {fileId, filePath}},},watch: {listenChange() {this.getXml()}}
}
</script>
<style scoped>
</style>

3、引用组件

<ace v-else-if="fileType==='xmlType'" style="height: 100%;width: 100%":fileId="`${currentNode.data}`" :filePath="`${currentNode.id}`"/>

或者

vue 使用ace编辑器相关推荐

ACE编辑器ace-editor笔记
<template><div class="ace-editor" ref="ace"></div> </templa ...
html ace编辑器,Springboot 集成 Ace editor前端编辑器
一.引入Ace editor 本质上Ace editor只是一个js而已.而该js引用了其他js(如扩展.主题等js),因此将ace editor.js引入项目时最好复制整个文件夹,不能只复制一个ac ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Vue引入 mavon-editor 编辑器的详细步骤
Vue引入 mavon-editor 编辑器的详细步骤一.编辑器的引入如果你的项目之前没有安装过该编辑器,那就得先安装编辑器在自己的项目的根目录执行下列命令: npm install mavon ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
vue中使用图像编辑器tui-image-editor(一)
vue中使用图像编辑器tui-image-editor(一) 场景:需要对图片进行旋转.缩放.裁剪.涂鸦.标注.添加文本等. 效果-图1 1.基本介绍官网:https://ui.toast.com/ ...
vue中使用图像编辑器tui-image-editor(二)——应用示例
vue中使用图像编辑器tui-image-editor(二)--应用示例效果代码 mark.vue <template><div class="drawing-cont ...
Vue中富文本编辑器的使用
基于 Vue 的富文本编辑器有很多,例如官方就收录推荐了一些: https://github.com/vuejs/awesome-vue#rich-text-editing . 这里我们以 eleme ...
html ace编辑器,Tiny-editor
Tiny-editor是和jsFiddle一样具有在线运行js功能的在线代码编辑器,基于Ace. Usage 1.下载slidePage git clone https://github.com/li ...

vue 使用ace编辑器

vue 使用ace编辑器相关推荐

最新文章

热门文章