紅魔電競平板評測：大屏幕硬實力
前言：三年的疫情因為要上網課的原因激活了平板市場，如今網課的時代已經過去，大家的生活都恢復到了正軌，這也就意味著，真正考驗平板電腦生存的環(huán)境來了。也就是面對著這種殘酷的
hi, 大家好, 我是徐小夕. 上篇文章和大家分享了剛開發(fā)完的可視化搭建產品——橙子試卷. 收到了很多用戶的反饋和建議, 其中有一個建議我覺得非常有意思, 所以花了一天時間研究和實現了這個用戶需求。
具體需求如下:
對于高等數學類課程的試卷, 能不能實現編輯數學公式的功能呢?
經過了一系列的調研和可行性分析, 我覺得這個需求非常有價值, 而且應用面很廣, 技術上從 web 的角度也是可以實現的, 所以我花了一點時間實現了它。
在文章末尾我也會把集成了數學公式的可視化編輯器地址分享給大家, 供大學學習參考。
接下里我會和大家分享一下如何從零實現一個支持數學公式編輯器的組件, 并集成到 vue3 項目中。
首先要想實現展示我們熟知的數學公式, 在 web 里我們需要了解以下幾種表示法:
以上三種表示法實際上都是標記語言, 通過特定的語法格式來優(yōu)雅的展示數學公式, 簡單舉例如下:
如果大家熟悉這些標記語言, 我們就可以很容易的使用前端開源庫 MathJax 來編寫數學公式。
具體使用如下:
<template> <div class="Formula"> <p id="math"></p> <p ref="math" v-html=“str”></p> </div></template><script>export default { name: 'Formula', data() { return { str: '' } }, mounted() { this.$nextTick(() => { // typesetPromise 需要 [] 包裹 this.str = '//[x = {-b //pm //sqrt{b^2-4ac} //over 2a}.//]' window.MathJax.typesetPromise([this.$refs.math]).catch(err => err) // tex2chtml 不需要 [] 包裹 const str = `x = {-b //pm //sqrt{b^2-4ac} //over 2a}` document .querySelector('#math') .appendChild(window.MathJax.tex2chtml(str)) }) }}</script>但是作為極具產品觀念的我來說, 讓用戶學習這些標記語言是非常痛苦的, 所以我們要想一種更簡單的方式, 讓用戶不用學習, 也能可視化的編寫復雜數學公式。
我研究了一些成熟的庫之后發(fā)現, 有一個開源庫非常適合我的“簡單化”訴求, 它就是——mathlive。
MathLive 是一個功能強大的 Web 組件，它提供了一個易于使用的界面來編輯數學公式。
但是網上它的文檔和在 vue3 中的使用非常稀少, 可以說是完全沒有. 因為我做的橙子試卷搭建平臺采用 vue3 來實現的, 所以我需要研究一種支持 vue3 的方案。
好在我找到了它們純英文版的文檔, 咬了一遍它的文檔之后, 對 MathLive 有了更深的理解。
文檔里提供了原生 webcomponent 的使用方法 和 react的使用案例, 好在我有5年多的 react 駕齡, 看起來還是非常順手的. 下面我就直接分享如何把它集成到 vue3 項目里. 感興趣的朋友可以直接拿來應用到自己的項目里。
我們可以用 npm 或者 yarn 或者 pnpm(推薦) 安裝:
pnpm install mathlive接下來我們來注冊一下組件:
import * as MathLive from 'mathlive';import VueMathfield from '@/assets/vue-mathlive.mjs';app.use(VueMathfield, MathLive);這樣我們就可以在全局使用 mathlive 公式編輯器組件了。
為了實現上圖的效果, 我們需要在頁面里定義組件:
<mathlive-mathfield :options="{ smartFence: false }" @input="handleChange" :value="content"> {{ content }}</mathlive-mathfield>這個是 mathlive 默認是引入標簽, 當然我們可以修改它的定義, 如果你是 react 選手, 也可以直接這么使用:
// d.tsdeclare global { namespace JSX { interface IntrinsicElements { 'math-field': React.DetailedHTMLProps<React.HTMLAttributes<MathfieldElement>, MathfieldElement>; } }}// app.tsximport "./App.css";import "http://unpkg.com/mathlive";import { useState } from "react";function App() { const [value, setValue] = useState<string>(""); return ( <div className="App"> <math-field onInput={ (evt: React.ChangeEvent<HTMLElement>) => setValue(evt.target.value) } > {value} </math-field> <p>Value: {value}</p> </div> );}export default App;接下來就來學習一下它的屬性, 下面是 vue 版的 props, 非常重要, 大家可以收藏一下:
這里我整理了幾個常用的api:
當然如果你想修改它的顯示樣式, 可以通過操作 dom 或屬性, 也可以直接用 css 覆蓋:
.content { :deep(math-field) { width: 100%; }}通過以上步驟, 基本上能實現我們上面分享的公式編輯器了:
接下來分享一下如何集成到我們的橙子試卷零代碼搭建平臺中。
首先我們需要先在物料庫中添加數學公式編輯器組件, 具體思路如下:
UI代碼:
<template> <div> <div class="title" :style="{ color: editorStore.data[index].titleColor }"> <mathlive-mathfield :options="{ smartFence: false, readOnly: true, }" > {{ editorStore.data[index].titleText }} </mathlive-mathfield> </div> <a-radio-group :direction="editorStore.data[index].direction" v-model="editorStore.data[index].value" > <a-radio v-for="item in editorStore.data[index].options" :value="item.label" :key="item.label" :style="{ '--radio-options-color': editorStore.data[index].optionsColor }" @click.stop > {{ item.label }} . {{ item.value }}</a-radio > </a-radio-group> <Message :value="editorStore.data[index].value" :answer="editorStore.data[index].answer" :auto="editorStore.data[index].auto" :analysis="editorStore.data[index].analysis" /> </div></template>其中我們需要關注 mathlive-mathfield 的一個屬性: readonly, 它是讓我們把 latex 渲染成可視的數學公式的必備屬性, 否則我們只能在編輯模式下看到數學公式了。
接下來我們來編寫組件配置層代碼, 具體效果如下:
當我們編輯標題時, 會打開公式編輯器:
這部分我們是通過配置DSL自動生成的屬性面板, 這塊的知識我在分享H 5-Dooring 零代碼實現原理時有具體的介紹, 這里就不一一分析了, 直接上代碼:
export default class Math { component: any; constructor(id: string, arr=[{label:'A',value:'蘋果'},{label:'B',value:'香蕉'}]) { this.component = { component: 'math', type: 'editor.math', id, check: true, titleText: '數學題目', titleColor: 'black', options: arr, symbol: 'A,B,C...', direction: 'horizontal', optionsColor:'black', answer:undefined, analysis: '', auto: '', value:undefined, margin: [10, 10, 10, 10], scores:0, required:false, attrbite: [ { name: 'editor.titleText', field: 'titleText', component: 'math' }, { name: 'editor.titleColor', field: 'titleColor', component: 'color', props: { type: 'color' } }, { name: 'editor.optionConfig', field: 'options', component: 'options', props: { options:arr } }, { name: 'editor.optionSymbol', field: 'symbol', component: 'select', props: { options: [ {label:'A,B,C...',value:'A,B,C...'}, {label:'1,2,3...',value:'1,2,3...'}, {label:'a,b,c...',value:'a,b,c...'}, {label:'I,II,III...',value:'I,II,III...'} ], } }, { name: 'editor.optionDirection', field: 'direction', component: "select", props: { options: [{ label:'editor.horizontal', value: 'horizontal' }, { label: 'editor.vertical', value: 'vertical' }], } }, { name: 'editor.optionsColor', field: 'optionsColor', component: 'color', props: { type: 'color' } }, { name: 'editor.answerSettings', field: 'answer', component: 'select-lable', }, { name: 'editor.answerillustrate', field: 'analysis', component: 'textarea' }, { name: 'editor.grading', field: 'auto', component: 'switch' }, { name: 'editor.scores', field: 'scores', component: 'numberInput', props: { min: 0 } }, { name: 'editor.required', field: 'required', component: 'switch' }, { name: 'editor.margin', field: 'margin', component: "padding", props: { min: 0, type:'margin' } }, ] } }}這樣我們就能把編輯器組件成功變成一個零代碼可消費的組件, 當然這離不開我實現的零代碼渲染引擎, 這塊我會在后面的文章中詳細分享.
以上我們就實現了橙子試卷 可視化搭建系統的數學公式編輯器功能,
體驗地址: https://turntip.cn/formManager。
本文鏈接：http://www.www897cc.com/showinfo-26-73793-0.html基于Mathlive將數學公式編輯器集成到可視化搭建平臺
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 做好設計：架構模式
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號