Kaynağa Gözat

vue 中使用 mathjax 来渲染 tinymce 的 mathjax 插件生成的 latex 格式公式时, 需要从 CDN 引入 mathjax 相关依赖, 这里使用的是 CDN 是 cdnjs.cloudflare.com

reghao 1 yıl önce
ebeveyn
işleme
fc2bbb67fc
4 değiştirilmiş dosya ile 70 ekleme ve 1 silme
  1. 1 0
      public/index.html
  2. 51 0
      src/assets/js/mathjax.js
  3. 6 0
      src/main.js
  4. 12 1
      src/views/exam/ExamQuestion.vue

+ 1 - 0
public/index.html

@@ -7,6 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>logo.png">
 <!--    <title><%= htmlWebpackPlugin.options.title %></title>-->
     <title>tnb</title>
+    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
   </head>
   <body>
     <noscript>

+ 51 - 0
src/assets/js/mathjax.js

@@ -0,0 +1,51 @@
+// mathjax 配置
+// 标识 mathjax 是否已配置
+let isMathjaxConfig = false
+const initMathjaxConfig = () => {
+  if (!window.MathJax) {
+    console.log('mathjax not exist')
+    return
+  }
+
+  window.MathJax.Hub.Config({
+    showProcessingMessages: false, // 关闭js加载过程信息
+    messageStyle: 'none', // 不显示信息
+    jax: ['input/TeX', 'output/HTML-CSS'],
+    tex2jax: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']], // 行内公式选择符
+      displayMath: [['$$', '$$'], ['\\[', '\\]']], // 段内公式选择符
+      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] // 避开某些标签
+    },
+    'HTML-CSS': {
+      availableFonts: ['STIX', 'TeX'], // 可选字体
+      showMathMenu: false // 关闭右击菜单显示
+    }
+  })
+  isMathjaxConfig = true // 配置完成,改为true
+}
+
+const MathQueue = function(elementId) {
+  if (!window.MathJax) {
+    console.log('mathjax not exist')
+    return
+  }
+
+  console.log('render')
+  window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementById(elementId)])
+}
+
+const MathQueue1 = function(className) {
+  if (!window.MathJax) {
+    console.log('mathjax not exist')
+    return
+  }
+
+  window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementsByClassName(className)])
+}
+
+export default {
+  isMathjaxConfig,
+  initMathjaxConfig,
+  MathQueue,
+  MathQueue1
+}

+ 6 - 0
src/main.js

@@ -25,6 +25,12 @@ Vue.use(AudioPlayer)
 import VueClipboards from 'vue-clipboard2'
 Vue.use(VueClipboards)
 
+// 先引入 MathJax 配置, 再从 mathjax 包中引入 tex-mml-chtml
+// 这里不使用 mathjax 的 npm 包, 而是使用 CDN 引入
+import MathJax from './assets/js/mathjax'
+// import 'mathjax/es5/tex-mml-chtml'
+Vue.prototype.MathJax = MathJax
+
 import '@/permission'
 
 Vue.config.productionTip = false // 阻止控制台打印生产模式下的消息

+ 12 - 1
src/views/exam/ExamQuestion.vue

@@ -432,7 +432,7 @@
 </template>
 
 <script>
-import {getExamSubjectKV, postExamQuestion, getExamQuestion, getExamQuestion1, deleteExamQuestion} from '@/api/exam'
+import { getExamSubjectKV, postExamQuestion, getExamQuestion, getExamQuestion1, deleteExamQuestion } from '@/api/exam'
 import { validFormAndInvoke } from '@/utils/util'
 
 export default {
@@ -665,6 +665,16 @@ export default {
     this.getData(this.searchForm)
   },
   methods: {
+    renderByMathjax() {
+      // tinymce 的 mathjax 插件生成的 latex 格式公式放在 className 为 math-tex 的 span 标签内
+      const className = 'math-tex'
+      this.$nextTick(function() {
+        if (this.MathJax.isMathjaxConfig) {
+          this.MathJax.initMathjaxConfig()
+        }
+        this.MathJax.MathQueue1(className)
+      })
+    },
     getData(searchForm) {
       this.dataList = []
       getExamQuestion(this.currentPage).then(resp => {
@@ -1095,6 +1105,7 @@ export default {
         if (resp.code === 0) {
           this.questionDetail = resp.data
           this.questionDetailDialog = true
+          this.renderByMathjax()
         } else {
           this.$notify({
             title: 'Tips',