html编码 #68

README.md

@@ -77,6 +77,7 @@ npm run build -adapter=[chrome|edge|utools|firefox|web]
 |jwt解码|`header`, `payload`|√|
 |Hex/String转换|`hex to string`, `string to hex`, `十六进制转字符串`, `字符串转十六进制`|√|
 |文本处理|`大小写转换`, `中英文标点转换`, `简繁转换`, `替换`, `字符统计`, `行去重`, `添加行号`, `行排序`, `过滤行首尾不可见字符`,`过滤空行`|√|
+|html编码|`html编码`|√|
 
 ## 第三方开源库
 
@@ -116,5 +117,6 @@ npm run build -adapter=[chrome|edge|utools|firefox|web]
 - [jian_fan](https://www.npmjs.com/package/jian_fan)
 - [axios](https://www.npmjs.com/package/axios)
 - [monaco-editor](https://www.npmjs.com/package/monaco-editor)
+- [js-htmlencode](https://www.npmjs.com/package/js-htmlencode)
 
 > 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢

package-lock.json

@@ -6955,6 +6955,11 @@
       "resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",
       "integrity": "sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw=="
     },
+    "js-htmlencode": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/js-htmlencode/-/js-htmlencode-0.3.0.tgz",
+      "integrity": "sha1-sc4pPflOlviooIsfM2j5d70lVzE="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",

package.json

 {
     "name": "c-tool",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
@@ -25,6 +25,7 @@
         "is-url": "^1.2.4",
         "jian_fan": "^1.0.3",
         "js-base64": "^2.6.4",
+        "js-htmlencode": "^0.3.0",
         "js-yaml": "^3.14.1",
         "json-to-properties": "^1.1.3",
         "jsonlint": "^1.6.3",

src/config.js

@@ -59,6 +59,7 @@ const tool = [
     {'name': 'jwt', 'title': 'JWT解码', 'cat': ['conversion']},
     {'name': 'hexString', 'title': 'Hex/String转换', 'cat': ['conversion']},
     {'name': 'text', 'title': '文本处理', 'cat': ['other']},
+    {'name': 'html', 'title': 'html编码', 'cat': ['conversion']},
 ]
 
 // 工具类功能配置

src/tool.router.js

@@ -133,6 +133,10 @@ const routes = [
     {
         path: '/tool/text',
         component: r => require(['./views/tool/text.vue'], r)
+    },
+    {
+        path: '/tool/html',
+        component: r => require(['./views/tool/html.vue'], r)
     }
 ]
 
@@ -144,4 +148,4 @@ router.afterEach(to => {
     stat('tool', {tool: to.path})
 })
 
-export default router
\ No newline at end of file
+export default router

src/views/tool/html.vue

 <template>
-    <heightResize ignore :append="['.page-option-block']" @resize="resize">
-        <autoHeightTextarea v-model="current.input" :height="inputHeight" :placeholder="$t('html_input')"/>
-        <option-block class="page-option-block">
+    <div>
+        <Input v-model="current.input" :rows="7" type="textarea" placeholder="内容"></Input>
+        <option-block>
             <FormItem>
                 <ButtonGroup>
-                    <Button type="primary" @click="handle('encode')">{{ $t('html_encode') }}</Button>
-                    <Button type="primary" @click="handle('decode')">{{ $t('html_decode') }}</Button>
+                    <Button type="primary" @click="handle('encode')">编码</Button>
+                    <Button type="primary" @click="handle('decode')">解密</Button>
                 </ButtonGroup>
             </FormItem>
         </option-block>
-        <autoHeightTextarea :value="current.output" :height="outputHeight" :placeholder="$t('html_output')"/>
-    </heightResize>
+        <Input v-model="current.output" :rows="7" type="textarea" placeholder="结果"></Input>
+    </div>
 </template>
 <script>
-import heightResize from "./components/heightResize";
-import autoHeightTextarea from "./components/autoHeightTextarea";
 
 export default {
-    components: {
-        heightResize,
-        autoHeightTextarea
-    },
     created() {
-        this.$initToolData('input')
+        this.current = Object.assign(this.current, this.$getToolData("input"))
     },
     methods: {
         handle(v) {
@@ -36,10 +30,6 @@ export default {
                 this.$clipboardCopy(this.current.output);
                 this.$saveToolData(this.current);
             }
-        },
-        resize(height) {
-            this.inputHeight = Math.min(160, Math.ceil(height / 2))
-            this.outputHeight = height - this.inputHeight
         }
     },
     data() {
@@ -48,9 +38,7 @@ export default {
                 input: "",
                 output: "",
                 operation: ""
-            },
-            inputHeight: 100,
-            outputHeight: 100
+            }
         }
     },
 }