vue2-ace-editor4
v1.0.2
Published
vue2-ace-editor4
Downloads
14
Readme
这是2升级后的,支持focus和Blur事件和自定义提示代码块。
How to use
Install
npm install --save-dev vue2-ace-editor4
Require it in
components
of Vue options{ data, methods, ... components: { editor: require('vue2-ace-editor4'), }, }
Require the editor's mode/theme module in custom methods
{ data, methods: { editorInit: function () { require("brace/ext/language_tools"); //language extension prerequsite... require("brace/ext/searchbox"); require("brace/mode/html"); require("brace/mode/json"); //language require("brace/mode/less"); require("brace/mode/xml"); require("brace/mode/yaml"); require("brace/mode/python"); require("brace/mode/javascript"); require("brace/mode/css"); require("brace/mode/text"); require("brace/theme/github"); require("brace/snippets/json"); //snippet require('brace/snippets/javascript'); this.$refs.editor.editor.setReadOnly(this.readOnly); //这里是设置readonly属性 看个人需要 } }, }
Use the component in template
<editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100" @focus="focus" @blur="blur"></editor>
prop
v-model
is requiredprop
lang
andtheme
is same as ace-editor's docprop
height
andwidth
could be one of these:200
,200px
,50%
自定义代码块 参考
https://blog.csdn.net/qq_41206359/article/details/104992168
只不过不用修改源码部分,源码部分已经修改