數(shù)理化公式KityFormula插件

項(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)文件夾目錄下

(圖1)
(圖2)

2夷磕、將 KityFormula的鏈接地址放入 iframe

? ? ? 注:KityFormula的鏈接地址 要保證 與當(dāng)前項(xiàng)目處于同一域名

(圖3)
(圖4)
(圖5)

3、獲取 KityFormula 的 SVG

(圖6:可以通過(guò)window.kfe取值)
(圖7:獲取SVG[一定要加X(jué)XX.outerHTML])
(圖8:效果圖)

4仔沿、將 SVG 轉(zhuǎn) base64格式的圖片坐桩,然后插入編輯器

(圖9)
(圖10:效果圖)

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("");

});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绵跷,一起剝皮案震驚了整個(gè)濱河市膘螟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌碾局,老刑警劉巖荆残,帶你破解...
    沈念sama閱讀 212,718評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異净当,居然都是意外死亡内斯,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)像啼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)俘闯,“玉大人,你說(shuō)我怎么就攤上這事忽冻”感欤” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,207評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵甚颂,是天一觀(guān)的道長(zhǎng)蜜猾。 經(jīng)常有香客問(wèn)我,道長(zhǎng)振诬,這世上最難降的妖魔是什么蹭睡? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,755評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮赶么,結(jié)果婚禮上肩豁,老公的妹妹穿的比我還像新娘。我一直安慰自己辫呻,他們只是感情好清钥,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著放闺,像睡著了一般祟昭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上怖侦,一...
    開(kāi)封第一講書(shū)人閱讀 50,050評(píng)論 1 291
  • 那天篡悟,我揣著相機(jī)與錄音,去河邊找鬼匾寝。 笑死搬葬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的艳悔。 我是一名探鬼主播急凰,決...
    沈念sama閱讀 39,136評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼猜年!你這毒婦竟也來(lái)了抡锈?” 一聲冷哼從身側(cè)響起疾忍,我...
    開(kāi)封第一講書(shū)人閱讀 37,882評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎企孩,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體袁稽,經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡勿璃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了推汽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片补疑。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖歹撒,靈堂內(nèi)的尸體忽然破棺而出莲组,到底是詐尸還是另有隱情,我是刑警寧澤暖夭,帶...
    沈念sama閱讀 34,477評(píng)論 4 333
  • 正文 年R本政府宣布锹杈,位于F島的核電站,受9級(jí)特大地震影響迈着,放射性物質(zhì)發(fā)生泄漏竭望。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3 317
  • 文/蒙蒙 一裕菠、第九天 我趴在偏房一處隱蔽的房頂上張望咬清。 院中可真熱鬧,春花似錦奴潘、人聲如沸旧烧。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,864評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)掘剪。三九已至,卻和暖如春奈虾,著一層夾襖步出監(jiān)牢的瞬間杖小,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,099評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工愚墓, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留予权,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2 362
  • 正文 我出身青樓浪册,卻偏偏與公主長(zhǎng)得像扫腺,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子村象,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2 351