Added: katex editor

src/i18n/index.js

@@ -17,7 +17,6 @@ for (let lang of languages) {
   Object.assign(m, require(`./admin/${locale}`).m)
   messages[locale] = {m: m}
 }
-console.log(messages)
 // load language packages
 export default new VueI18n({
   locale: 'en-US',

src/pages/admin/components/KatexEditor.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-form>
+    <el-form-item label="Input">
+      <el-input type="textarea" v-model="input" @change="changeInput" @keyup.enter.native="changeInput"></el-input>
+    </el-form-item>
+
+    <el-form-item label="Output">
+    </el-form-item>
+    <div v-html="text"></div>
+  </el-form>
+</template>
+
+<script>
+  import katex from 'katex'
+  export default {
+    name: '',
+    data () {
+      return {
+        input: 'c = \\pm\\sqrt{a^2 + b^2}',
+        text: ''
+      }
+    },
+    mounted () {
+      this.text = this.renderTex(this.input)
+    },
+    methods: {
+      renderTex (data) {
+        return katex.renderToString(data, {
+          displayMode: true,
+          throwOnError: false
+        })
+      },
+      changeInput () {
+        try {
+          this.text = this.renderTex(this.input)
+        } catch (e) {
+          this.text = '<p style="text-align: center"><span style="color:red">Error Input</span></p>'
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+</style>

src/pages/admin/index.js

@@ -11,6 +11,7 @@ import filters from '@/utils/filters'
 import router from './router'
 import { GOOGLE_ANALYTICS_ID } from '@/utils/constants'
 import VueAnalytics from 'vue-analytics'
+import katex from '@/plugins/katex'
 
 import Panel from './components/Panel.vue'
 import IconBtn from './components/btn/IconBtn.vue'
@@ -28,6 +29,7 @@ Vue.use(VueAnalytics, {
   router
 })
 Vue.use(Element, {locale})
+Vue.use(katex)
 Vue.component(IconBtn.name, IconBtn)
 Vue.component(Panel.name, Panel)
 Vue.component(Save.name, Save)

src/pages/admin/views/Home.vue

@@ -4,6 +4,7 @@
       <SideMenu></SideMenu>
     </div>
     <div id="header">
+      <i class="el-icon-fa-font katex-editor" @click="katexVisible=true" ></i>
       <screen-full :width="14" :height="14" class="screen-full"></screen-full>
       <el-dropdown @command="handleCommand">
         <span>{{user.username}}<i class="el-icon-caret-bottom el-icon--right"></i></span>
@@ -20,6 +21,10 @@
         Build Version: {{ version }}
       </div>
     </div>
+
+    <el-dialog title="Latex Editor" :visible.sync="katexVisible">
+      <KatexEditor></KatexEditor>
+    </el-dialog>
   </div>
 </template>
 
@@ -28,17 +33,20 @@
   import { mapGetters } from 'vuex'
   import SideMenu from '../components/SideMenu.vue'
   import ScreenFull from '@admin/components/ScreenFull.vue'
+  import KatexEditor from '@admin/components/KatexEditor.vue'
   import api from '../api'
 
   export default {
     name: 'app',
     data () {
       return {
-        version: process.env.VERSION
+        version: process.env.VERSION,
+        katexVisible: false
       }
     },
     components: {
       SideMenu,
+      KatexEditor,
       ScreenFull
     },
     beforeRouteEnter (to, from, next) {
@@ -135,6 +143,11 @@
     animation: fadeInUp .8s;
   }
 
+  .katex-editor {
+    margin-right: 5px;
+    /*font-size: 18px;*/
+  }
+
 
 
 </style>