Bin Code Editor

1 安装

1.1 CDN 安装

@0.1.0 表示版本号，我们建议锁定版本号来保证代码的稳定性

1.2 npm 安装

推荐使用npm安装，它能更好地和webpack打包工具配合使用。而且可以更好的和 es6配合使用。并且支持按需引入

npm i bin-code-editor -S

# or

yarn add bin-code-editor

2 引入

在 main.js 中写入以下内容：

import Vue from 'vue';

import CodeEditor from 'bin-code-editor';

import 'bin-code-editor/lib/style/index.css';

import App from './App.vue';

Vue.use(CodeEditor);

new Vue({

el: '#app',

render: h => h(App)

});

3 用法

注意，初始化如果有数据，则会默认格式化一次，格式化快捷键默认为F7,使用时可以进行格式化结构!

JSON.stringify(JSON.parse(jsonData),null,2)可以将默认json进行预格式化,也可以手动触发formatCode()来格式化 JSON.stringify(value[, replacer[, space]])

参数说明：

value:必需， 要转换的 JavaScript 值（通常为对象或数组）。replacer:可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

4 其他配置项

参数说明类型可选值默认值value绑定数据，可用v-modelString—0show-number显示行号Boolean—truemode模式String‘application/json’,‘text/javascript’‘application/json’theme提供若干个默认比较好看的皮肤String可选值参考其他配置项中列出idealint是否进行lint检查Boolean暂时只支持jsontruereadonly只读模式Boolean-falseauto-format是否自动格式化Boolean-trueindent-unit缩进字符Number-2smart-indent是否自动缩进Boolean-trueline-wrap代码换行Boolean-truegutter代码折叠Boolean-trueheight默认编辑器高度String—300px

5 Events 事件

事件名说明返回值on-change输入项改变事件valueformatCode手动触发格式化方法-refresh手动刷新方法-getValue自行获取值-

6 theme 皮肤属性

theme属性可选值

idea eclipse duotone-light mdn-like xq-light dracula rubyblue monokai material material-darker

精彩内容

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：