項(xiàng)目要求:需要將 數(shù)理化公式公式插件 放入 Simditor編輯器,實(shí)現(xiàn) 公式 插入 編輯器
解決思路:A霍骄、先獲取SVG(因?yàn)閿?shù)理化公式公式插件? 最后結(jié)果會(huì)生成? SVG格式)
? ? ? ? ? ? ? ? ? B、將 SVG 轉(zhuǎn) base64格式的圖片浇辜,然后插入編輯器
注:KityFormula的鏈接地址 要保證 與當(dāng)前項(xiàng)目處于同一域名
學(xué)習(xí)網(wǎng)址:http://ueditor.baidu.com/website/kityformula.html
下載網(wǎng)址:http://ueditor.baidu.com/download/kityformula-plugin.zip
介紹
Kity Formula 為您提供公式表達(dá)式解析系冗,可視化公式編輯空闲,公式完美展示于一身的web端的整體解決方案丙挽。
KityFormula 包括:KityFormula-editor,KityFormula-parser 和 KityFormula-render匀借。
簡(jiǎn)單
Kity Formula 為你提供了一個(gè)非常簡(jiǎn)單的公式呈現(xiàn)和存儲(chǔ)方案颜阐。
你可以選擇 Kity Formula 的附屬項(xiàng)目中提供的解析器來(lái)完成各種公式表示法到可視化公式的轉(zhuǎn)換, 如果這樣做吓肋,你不用再在服務(wù)器端存儲(chǔ)各種公式的圖片或者其他的相關(guān)資源凳怨,僅僅只需要一個(gè)字符串, Kity Formula 就會(huì)為你呈現(xiàn)出完美的公式是鬼。
你也可以直接使用 Kity Formula 以編程的方式來(lái)構(gòu)建一個(gè)公式肤舞,這種方式更加靈活,也可以根據(jù)這種方式開(kāi)發(fā)出適合自己的解析器均蜜。
高效
Kity Formula 利用瀏覽器的原生支持來(lái)渲染公式李剖,以此保證了渲染的高效性。同時(shí)囤耳,Kity Formula 所使用的底層圖形庫(kù)Kity Graphic Lib 也對(duì)客戶(hù)端的渲染做了很多優(yōu)化篙顺,保證了上層應(yīng)用的運(yùn)行效率。
靈活
Kity Formula 提供了靈活的接口和高層抽象充择,可以幫助你以極小的成本進(jìn)行擴(kuò)展德玫。
美觀(guān)
Kity Formula 內(nèi)嵌了一套基本字符集和擴(kuò)展字符集,使得渲染出來(lái)的公式具有最佳的外觀(guān)椎麦,同時(shí)也保證了在任何客戶(hù)端下獲得了一致的體驗(yàn)效果宰僧。
自然
Kity Formula 的代碼書(shū)寫(xiě)方式非常自然,允許你以具有數(shù)學(xué)意義的方式去書(shū)寫(xiě)公式观挎,同時(shí)也允許你以其他更加復(fù)合你的方式書(shū)寫(xiě)撒桨。
跨平臺(tái)
Kity Formula 使用的是瀏覽器原生的技術(shù),比依賴(lài)于任何其他插件键兜;對(duì)于多平臺(tái)上的差異也通過(guò)其底層圖形庫(kù)來(lái)抹平差異凤类,達(dá)到了跨平臺(tái)運(yùn)行的目的。
輕量
Kity Formula 只需要引入一個(gè)獨(dú)立的JS文件就可以正常運(yùn)行于各個(gè)平臺(tái)普气,并且無(wú)需繁瑣的配置谜疤。
實(shí)際操作
1、下載 KityFormula 后现诀,將下載文件放在靜態(tài)文件夾目錄下
2夷磕、將 KityFormula的鏈接地址放入 iframe
? ? ? 注:KityFormula的鏈接地址 要保證 與當(dāng)前項(xiàng)目處于同一域名
3、獲取 KityFormula 的 SVG
4仔沿、將 SVG 轉(zhuǎn) base64格式的圖片坐桩,然后插入編輯器
5、具體代碼
//確定按鈕
iFormulaModalObj.off("click",".modal .btn-primary").on("click",".modal .btn-primary",function(){
????var iFormula = document.getElementById('iFormulaIframe'); //通過(guò)contentWindow獲取ifame子頁(yè)面的window窗體對(duì)象封锉。(不允許跨域名訪(fǎng)問(wèn))
????var win = iFormula.contentWindow; //獲取“數(shù)理化公式插件”的svg
????var iFormulaSVG_1 = win.kfe.container.childNodes[1].childNodes[0].childNodes[0];
????var iFormulaSVG_2 = iFormulaSVG_1.outerHTML; //添加svg轉(zhuǎn)base64格式的圖片
????var svgImg = document.createElement('img');
????svgImg.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(iFormulaSVG_2)));//給圖片對(duì)象寫(xiě)入base64編碼的svg流
????//設(shè)置圖片大小
????//將生成的base64格式圖片傳遞給編輯器
????thisObj.closest(".simditor").find(".simditor-body").html(svgImg);
????iFormulaModalObj.html("");
});