Bin Code Editor

1 安裝

1.1 CDN 安裝

<!-- import Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- import stylesheet --> <link rel="stylesheet" href="https://unpkg.com/bin-code-editor@0.1.0/lib/styles/index.css"> <!-- import bin-code-editor --> <script src="https://unpkg.com/bin-code-editor@0.1.0/lib/bin-code-editor.min.js"></script>

@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。

<template> <div><b-code-editor v-model="jsonStr" :indent-unit="4" height="auto"/> </div> </template> <script>const jsonData = `{"title":"測試json數據","children":[{"name":"子項名稱", "desc":"子項說明" },{"name":"子項名稱1", "desc":"子項說明1" }]}`export default {data() {return {jsonStr: jsonData}}} </script>

4 其他配置項

參數說明類型可選值默認值

value	綁定數據，可用v-model	String	—	0
show-number	顯示行號	Boolean	—	true
mode	模式	String	‘application/json’,‘text/javascript’	‘application/json’
theme	提供若干個默認比較好看的皮膚	String	可選值參考其他配置項中列出	idea
lint	是否進行lint檢查	Boolean	暫時只支持json	true
readonly	只讀模式	Boolean	-	false
auto-format	是否自動格式化	Boolean	-	true
indent-unit	縮進字符	Number	-	2
smart-indent	是否自動縮進	Boolean	-	true
line-wrap	代碼換行	Boolean	-	true
gutter	代碼折疊	Boolean	-	true
height	默認編輯器高度	String	—	300px

5 Events 事件

<template><div><b-code-editor v-model="jsonStr" :indent-unit="4" height="auto"/><p><b-button @click="$refs['editor'].formatCode()">手動觸發格式化</b-button></p></div> </template> 事件名說明返回值

on-change	輸入項改變事件	value
formatCode	手動觸發格式化方法	-
refresh	手動刷新方法	-
getValue	自行獲取值	-

6 theme 皮膚屬性

theme屬性可選值

• idea
  

• eclipse
  

• duotone-light
  

• mdn-like
  

• xq-light
  

• dracula
  

• rubyblue
  

• monokai
  

• material
  

• material-darker
  

總結

以上是生活随笔為你收集整理的Bin Code Editor格式化JSON编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。