封装的组件,源代码点这里传送
只关注 npm 发包,可以点这里传送
只关注如何给项目增加 badge,可以点这里传送
封装给 vue 用的 ace editor
Ace Editor: https://github.com/ajaxorg/ace
封装依赖包 brace: https://github.com/thlorenz/brace
源码:
const ace = require('brace'),
defaultConfig = { // Editor 默认配置
lang: 'json', // 语言
theme: 'xcode', // 编辑器主题
options: { // Ace Editor 配置
useSoftTabs: true, // 默认 2 个空格缩进
tabSize: 2
}
};
let vm;
module.exports = {
template: '<div :style="{height: height, width: width}"></div>',
computed: {
editorConfig() { // 这里主要是防止 props `config` 中只配置了一部分,无法使用默认值
return Object.assign({}, defaultConfig, this.config);
}
},
props: {
value: {
type: String,
required: true
},
height: true,
width: true,
fontSize: {
type: Number,
default: 12
},
config: {
type: Object,
default: function () {
return defaultConfig
}
}
},
data() {
return {
editor: null
}
},
beforeDestroy: function () {
this.editor.destroy();
this.editor.container.remove();
},
mounted() {
let vm = this,
{
lang,
theme
} = this.editorConfig,
editor;
lang === 'html' && require('brace/ext/emmet');
require('brace/ext/language_tools');
require('brace/mode/' + lang);
require('brace/theme/' + theme);
require('brace/snippets/' + lang);
this.editor = editor = ace.edit(this.$el);
editor.setTheme('ace/theme/' + theme);
editor.setOption("enableEmmet", true);
editor.getSession().setMode('ace/mode/' + lang);
editor.$blockScrolling = Infinity;
editor.setFontSize(this.fontSize);
editor.setValue(this.value);
this.editorConfig.options && editor.setOptions(this.editorConfig.options);
this.$emit('init', editor);
editor.on('change', _ => {
vm.$emit('input', editor.getValue());
});
}
}
复制代码
npmjs.org注册
npm 发包
- 有一个源码项目
- 官网注册账号
- 执行下面的命令(注意设置要 ignore 的文件,以及完善 package.json 中的信息)
npm adduser
# 用户名 密码
npm publish
# 完成
复制代码
使用的话就 npm install xxx
。
badge
从这里获取:http://shields.io/ , 它能提供build(集成、测试等信息)、version(版本)、自定义的徽章,比如:
上面的代码如下:
# 自定义
![](https://img.shields.io/badge/vue-%3E2.0-brightgreen.svg)
# npm 版本
![](https://img.shields.io/npm/v/ace-editor-on-vue.svg)
# npm 下载数
![](https://img.shields.io/npm/dt/ace-editor-on-vue.svg)
# 项目根目录有 LICENSE 文件
![](https://img.shields.io/github/license/NoName4Me/ace-editor-on-vue.svg)
复制代码