update codeEditor

src/tool.js

@@ -4,7 +4,6 @@ import './statics/theme.less'
 import router from './tool.router'
 import optionBlock from './components/optionBlock'
 import {plugin as modelPlugin} from './tool/model'
-import codeEditor from "./views/tool/components/codeEditor";
 import cache from './tool/cache'
 import setting from './tool/setting'
 import App from './tool.vue'
@@ -19,7 +18,6 @@ const run = () => {
     Vue.use(ViewUI)
     Vue.use(modelPlugin)
     Vue.component('option-block', optionBlock);
-    Vue.component('code-editor', codeEditor);
 
     new Vue({
         router,

src/views/tool/code.vue

 <template>
     <div>
         <div style="border: 1px solid #dcdee2; border-radius: 4px">
-            <code-editor ref="editor" v-model="current.content" auto-height="220" :language="this.current.lang"></code-editor>
+            <code-editor ref="editor" v-model="current.content" :auto-height="220" :language="this.current.lang"></code-editor>
         </div>
         <option-block>
             <FormItem>
@@ -25,7 +25,11 @@
 </template>
 <script>
 import _ from "lodash";
+import codeEditor from "./components/codeEditor";
 export default {
+    components: {
+        codeEditor,
+    },
     computed:{
         buttonLang(){
             let data = _.slice(this.lang,0,8)
@@ -35,21 +39,25 @@ export default {
             return data
         }
     },
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData("content"))
+    },
     methods: {
         handle(language) {
-            this.current.lang = language;
-            setTimeout(()=>{
             if (this.current.content) {
-                    let oldContent = this.current.content;
-                    this.$refs.editor.getEditor().getAction('editor.action.formatDocument').run();
-                    setTimeout(()=>{
-                        if (oldContent !== this.current.content){
+                try {
+                    this.current.lang = language;
+                    this.$refs.editor.format(language);
                     this.$saveToolData(this.current);
                     return this.$Message.success('格式化完成');
                 }
-                    },300)
+                catch (e) {
+                    return this.$Modal.error({
+                        title:"格式化错误",
+                        content:`${e.message}`
+                    });
+                }
             }
-            },200)
         },
     },
     data() {
@@ -73,6 +81,7 @@ export default {
                 "less",
                 "graphql",
                 "markdown",
+                "vue",
             ],
         };
     },

src/views/tool/components/codeEditor.vue

 <template>
-    <div ref="container" class="monaco-editor"
-         :style="`height:${containerHeight};width:${width}`">
-    </div>
+     <div ref="container" class="code-editor" :style="`height:${containerHeight};width:${width}`"></div>
 </template>
 <script>
 import formatter from "../library/formatter";
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-// 注册文本格式化服务
-// html/typescript/javascript/json 使用内置服务
-const allowFormatterLanguage = [
-    {id: "css", format: "css"},
-    {id: "graphql", format: "graphql"},
-    {id: "java", format: "java"},
-    {id: "markdown", format: "markdown"},
-    {id: "php", format: "php"},
-    {id: "scss", format: "scss"},
-    {id: "sql", format: "sql"},
-    {id: "xml", format: "xml"},
-    {id: "yaml", format: "yaml"},
-]
-for (let lang of allowFormatterLanguage) {
-    monaco.languages.registerDocumentFormattingEditProvider(lang.id, {
-        provideDocumentFormattingEdits(model) {
-            return [
-                {
-                    range: model.getFullModelRange(),
-                    text: formatter(model.getValue(), lang.format),
-                },
-            ];
-        }
-    });
+const allowFormatterLanguage = {
+    html: "html",
+    typescript: "ts",
+    javascript: "js",
+    json: "json",
+    graphql: "graphql",
+    java: "java",
+    markdown: "markdown",
+    php: "php",
+    css: "css",
+    scss: "scss",
+    less: "less",
+    sql: "sql",
+    xml: "xml",
+    yaml: "yaml",
+    vue: "vue",
 }
 
 export default {
@@ -43,6 +33,10 @@ export default {
             type: String,
             default: ""
         },
+        autoHeight: {
+            type: Number,
+            default: 0
+        },
         theme: {
             type: String,
             default: 'vs'
@@ -51,10 +45,6 @@ export default {
             type: Boolean,
             default: true
         },
-        autoHeight: {
-            type: Number,
-            default: 0
-        },
         height: {
             type: String,
             default: "350px"
@@ -108,12 +98,20 @@ export default {
                 automaticLayout: true
             })
             this.editor.onDidChangeModelContent(() => {
+                if (this.value !== this.editor.getValue()){
                     this.$emit('input', this.editor.getValue())
+                }
             })
         },
         /** @return monaco.editor.IStandaloneCodeEditor*/
         getEditor() {
             return this.editor
+        },
+        format(lang,option = {}) {
+            if (!(lang in allowFormatterLanguage)){
+                throw new Error("当前代码无法格式化");
+            }
+            this.$emit('input', formatter(this.editor.getValue(), allowFormatterLanguage[lang],option))
         }
     }
 };

src/views/tool/ip.vue

@@ -22,8 +22,12 @@
 <script>
 import axios from "axios"
 import _ from "lodash"
+import codeEditor from "./components/codeEditor";
 
 export default {
+    components: {
+        codeEditor,
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData("input"))
     },
@@ -36,6 +40,7 @@ export default {
                 }).then(({data}) => {
                     this.current.output = JSON.stringify(_.isArray(data) && data.length < 2 ? data[0] : data,null, 4);
                     this.$saveToolData(this.current);
+                    this.$Message.success("查询成功")
                 }).catch((error) => {
                     return this.$Message.error("ip地址信息查询错误:" + error);
                 });

src/views/tool/json.vue

@@ -14,8 +14,12 @@
 </template>
 <script>
     import Unicode from "./library/unicode"
+    import codeEditor from "./components/codeEditor";
 
     export default {
+        components: {
+            codeEditor,
+        },
         created () {
             this.current = Object.assign(this.current, this.$getToolData('content'))
         },

src/views/tool/jsonToObject.vue

@@ -3,7 +3,7 @@
         <Col span="10">
             <Card :padding="0">
                 <p slot="title">JSON内容</p>
-                <code-editor v-model="current.json" auto-height="330" language="json"></code-editor>
+                <code-editor v-model="current.json" :auto-height="330" language="json"></code-editor>
             </Card>
             <option-block>
                 <FormItem>
@@ -28,18 +28,22 @@
                             @click="handle(item)">{{ item }}
                     </Button>
                 </template>
-                <code-editor v-model="current.output" auto-height="220" :language="languages[current.type]"></code-editor>
+                <code-editor v-model="current.output" :auto-height="220" :language="languages[current.type]"></code-editor>
             </Card>
         </Col>
     </Row>
 </template>
 <script>
+import codeEditor from "./components/codeEditor";
 import json2Go from './library/json2Go'
 import json2CSharp from './library/json2CSharp'
 import json2Java from './library/json2Java'
 import json2Dart from './library/json2Dart'
 
 export default {
+    components: {
+        codeEditor,
+    },
     created() {
         this.current = Object.assign(this.current, this.$getToolData())
     },

src/views/tool/library/formatter.js

@@ -25,15 +25,17 @@ const options = {
     yaml: {parser: "yaml", plugins: [parserYaml]},
     html: {parser: "html", plugins: [parserHtml]},
     angular: {parser: "angular", plugins: [parserHtml]},
-    json: {parser: "json5", plugins: [parserJson5]},
+    json: {parser: "json5", plugins: [parserJson5], quoteProps: "preserve", trailingComma: "none"},
     xml: {parser: "xml", plugins: [parserXml]},
     sql: {parser: "sql", plugins: [parserSql]},
     php: {parser: "php", plugins: [parserPhp]},
     java: {parser: "java", plugins: [parserJava]},
 };
-export default (code, lang) => {
+export default (code, lang, {tab = 4}) => {
     if (!(lang in options)) {
         throw new Error(`${lang} can't format`);
     }
-    return prettier.format(code, options[lang]);
+    let langOption = options[lang];
+    langOption.tabWidth = tab
+    return prettier.format(code, langOption);
 };