2017-10-12 13 views
0

我使用ckeditor在數據庫中插入數學公式和圖像。我收到來自數據庫以下響應..在div中顯示圖像和數學公式使用由ckeditor保存的vue js

的數學公式...

{ 
"questionM_ref_id": "c6L5SIUqgRC9ZV2Z", 
"subject_chapter_id": 1, 
"question": "<span style=\"font-size:12pt\"><span style=\"font-family:&quot;times new roman&quot;,serif\"><strong><span style=\"font-family:symbol\">\\</span> <span class=\"math-tex\">\\(x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\)</span></strong></span></span><br />\n<span style=\"font-size:12pt\"><span style=\"font-family:&quot;times new roman&quot;,serif\"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src=\"file:///c:\\users\\rajesh\\appdata\\local\\temp\\msohtmlclip1\\01\\clip_image006.gif\" style=\"height:17px; width:60px\" /></strong></span></span>", 
"marks": "2", 
"answer": "Abd", 

}

用於圖像和圖像...

{ 
"questionM_ref_id": "gdRWNUbgki9NJWSI", 
"subject_chapter_id": 1, 
"question": "<img alt=\"\" border=\"0\" hspace=\"0\" src=\"data:image/png;base64,ivborw0kggoaaaansuheugaaagaaaaiabamaaaagvsnjaaaaivbmveuaaab+fx1+fx1+fx1+fx1+fx1+fx1+fx1+fx1+fx1+fx1i2prsaaaacnrstlmaf/clme+kb9vesirxwqaacwpjrefuenrs3t1rveeububzs1+jlbgimkprew6lvrqvhbbckhesizwciqtsgezsksrcvordvrrxy/p+souejg7uzh7k3rbz3vf5cye9z87motnriiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiimo755fwdty931pfnju/25egoi73vby4akwzjpk75+iilbtlgf4x2oukw0kxq/npzrneputcemwsroyboef4rzo8wgi9um0gri5hsvzkxwh2mqo8yapdzjkz32txzydgg3jnzziehmcpqyjgm3lnzpnhb2pqosqksjqns+akhtjgr2+bekib02vyoywj3zyf6bxprp7t0hsya2jrqawdij+dgayd+clybgpgjqohm7ljkujizfuvyvztgmyur66ae/xt3bksoxsdlvd1hkxqplowpuzjblqqgsppm2cgssnptensqayizwbwu6iml57ggik0f5lcqr5aalk4g3bhu8b++teeusvbxkljh6djacq/xqn6vsi3s7vlcwqhasmmjszhcuse4uqvyvophrqbpkbcjsvy2vhrqib4looujnovajvtkuqwhjrmia6egbradjs6imu8tbvuozb9lqiykpvamnlghfoznbxdbuovwmawwjyesr4v6058emhjalgropqc2jlclakyn4zkq1bmp10ibpi3xhioqdunxulffnt22uisofoqggmvbyb1bhe3sgkjiugmzqnw1m2abccfpj7qrqni0jhngu6ybciaz8sbcki4e5hbcshtyxdn4adnre0ec6+awwii2qx2emwyhmkt57481eenqcdqrq1ai1bbdscgerzz7myklobc/bfqtic79wfamyghkwv1e+e8pthhl/0yoizj3v+hyrlnvegeiyngm0aegjjj33th6adqq5x8/racgge0awhjc+6aufqcaipj/jqyaojgcwbia+isoakaytqdok0efamvoakb/hkafaemuwahkb1h+z2togyp0rbetxbdmydg3x+khjbyxhpdh4rle+b81nic49/py9ios9koy9mps9opysvqyorienijofkwwvgpsfildxsxdd4vr4qsuzlqoipdzoro+rwcu9isghlejlgmsi0bogabzbpsulh5to39or4ftqhkgntqsyijuotdqhwlocgvrqay6mhq0znekrsfv9by+/mah+l4+0ev6+povgstalwkkrg24vyjwj70zexuicmj4ju4upaujbifffu4qlpitg6i3ehhbkwvicni/efjrwdxcemljjwpaf6xpjdgtwxq6j/owa7763qr5pnvpqq++qu6umpds/4skyrma8gkkeifcetqhf/xjtx10vz/dnecbybygt2/r4+v6/h76bf37z8pvtawitaewsgfmetapg7ghcnylbeqjfqlbvbu4yyoef7zighfjxmjyymjpbozdjjewwv4aie5jfwbeyyt9arcd50z4tvijrqgaymy2bod3jjg+yhwqzj2ye5znyeuyh2qtjpamggjt4iwel8uhes8jxoj9jjlgrvopy67nr7qe2cxhdzyktzasceihc8jazodwnro7l3bnpmxyyrsswyxcwp/9bmbcosmkckcxt/hdca0acjjspjesfnzhbemsnvenbtaoglujvdef/4tpjlss7gewtv+kmlpf0srz7lgc8q1ks1bksojvta6f03nwgivawvnu0doumzuj2v//nbsijjuraaxvy8g6/j00dr7g3p6cc/plqjahm7bmfwmimojpia+aefhvy4eh2yjdj7m/v4hhsm5itvvixbxer3m/v8jmbda2v3mjnyqpynfa6uf6uamgdvv8chfkih5hu/nsuohrttbq1daugfmft+efdi6hiwdpk7j8gxmcun11cnr++sajhwznx8smyyei1f/6eptuswklxc1ez6xqiwnoxrry7naxo08vns2laefysr+gb/i1aofs4l6ujte2s7vbcwwcr1j6hlwdahtrrubwu0zpzmjc/aoen8v0zdyxn78cwu05p8j6xm3kjdkr9uv0zteydzmboddpy5mgtm19xufimjmrf+bpubsnbxlr+esgdywnz7gmqv16sbzsgysaodrplhyvjixhy1kjdkgr329egvbxjgyi8rr7y+t4l0oiho+kjdhwmob9eexjwroe526n5m3rnuz6xb+flvzi4zutkcrj6qxgofe/+7hibqxyaie+vji6sr2vpealuepvmltgywovpod/+akey/yc54ra07or8k5v9tktjusg79cfsblg6bp7ww9ywts7emtdrrcrpwinwde+eeqmhtqza50zof8xz4q4blpdnjegczwwajlipwhvvqh0u2zqz1typn2z85y9w0inemkfzrb5zyqntojjq4xtlitdimkfzot/ragu8koocquipl87w8ge8hqhgpyaxg4w7qgahfc1b9pccfbuazqdulohuhza6r6a2qhmpsdqgxwf6whpzeana9d3d5revmtkordk4qu1sypo4au12q218uyrcihtytiqgvgqbngsyhkibodqgo2oafasncdcb9/pszdxgo/hlwbzrygwanjbac0ezimaxajibqg0ejananghibme8elaagab7sycb5qcqxby7xlaazdstkwlahkbxz4aicfeao7j2igfxicedfpfkrswglo0p5vnhp7pgai1liydnkfv47e2d5s2fjasif+ugbod01equacuaefehbiobchsslwtblclzytiml64ousombxmghcd8wozvickee6jyuqziguj4cabja0aj4f0gsbqcmxbq6cvwgi10mr7euxvvadrimx6y7hzcjyhas3xjdwo1hbmnaibs+a0dyjnwb95eluw/fspohqccs+wzqdzn2wzmbucumxwv4iyss22ou0xfgitakydpkoiwqcxpybohcr8efshnauenrbavtikij3hgd+xhwaibqhnoxynpwanst9msjxwvavjookjk4g5itens6dtitmg2kua8wmcnbnpc10xqbday4bmayd7w8qiu1olqb8anqaua2okqbaxon7tljy9lfj/hifclywtxg+oyxqivia+ri3tufekhbd/84aurveurveurveurveurveurveurveurveurveurveurveurveurfndhhyqaaaaaaj6/7ofoqiaaaaaaaaaapwegcg4smhdcskaaaaasuvork5cyii=\" style=\"border:0px solid black; height:512px; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; width:512px\" vspace=\"0\" />", 
"marks": "2", 
"answer": "Hhghj", 

}

圖像是以base64格式.... 現在在我的vue我正在做E採用

<div class="form-group"> 
    <div v-html="questions.question"></div> 
</div> 

我使用V-HTML,因爲我得到在其他語言如印地文的問題,並使用V-HTML其他語言的字體後正在表現出一個div,但不被顯示的圖像和數學公式...數學式的參考圖像是...

mathematical formula displaying in wrong format

和圖像沒有顯示在所有

no image is being displayed

檢查圖像元素上我得到

<img alt="" border="0" hspace="0" src="data:image/png;base64,ivborw0kggoaaaansuheugaaagaaaaiabamaaaagvsnjaaaaivbmveuaaab+fx1+fx1+fx1+fx1+fx1+fx1+fx1+fx1+fx1+fx1i2prsaaaacnrstlmaf/clme+kb9vesirxwqaacwpjrefuenrs3t1rveeububzs1+jlbgimkprew6lvrqvhbbckhesizwciqtsgezsksrcvordvrrxy/p+souejg7uzh7k3rbz3vf5cye9z87motnriiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiimo755fwdty931pfnju/25egoi73vby4akwzjpk75+iilbtlgf4x2oukw0kxq/npzrneputcemwsroyboef4rzo8wgi9um0gri5hsvzkxwh2mqo8yapdzjkz32txzydgg3jnzziehmcpqyjgm3lnzpnhb2pqosqksjqns+akhtjgr2+bekib02vyoywj3zyf6bxprp7t0hsya2jrqawdij+dgayd+clybgpgjqohm7ljkujizfuvyvztgmyur66ae/xt3bksoxsdlvd1hkxqplowpuzjblqqgsppm2cgssnptensqayizwbwu6iml57ggik0f5lcqr5aalk4g3bhu8b++teeusvbxkljh6djacq/xqn6vsi3s7vlcwqhasmmjszhcuse4uqvyvophrqbpkbcjsvy2vhrqib4looujnovajvtkuqwhjrmia6egbradjs6imu8tbvuozb9lqiykpvamnlghfoznbxdbuovwmawwjyesr4v6058emhjalgropqc2jlclakyn4zkq1bmp10ibpi3xhioqdunxulffnt22uisofoqggmvbyb1bhe3sgkjiugmzqnw1m2abccfpj7qrqni0jhngu6ybciaz8sbcki4e5hbcshtyxdn4adnre0ec6+awwii2qx2emwyhmkt57481eenqcdqrq1ai1bbdscgerzz7myklobc/bfqtic79wfamyghkwv1e+e8pthhl/0yoizj3v+hyrlnvegeiyngm0aegjjj33th6adqq5x8/racgge0awhjc+6aufqcaipj/jqyaojgcwbia+isoakaytqdok0efamvoakb/hkafaemuwahkb1h+z2togyp0rbetxbdmydg3x+khjbyxhpdh4rle+b81nic49/py9ios9koy9mps9opysvqyorienijofkwwvgpsfildxsxdd4vr4qsuzlqoipdzoro+rwcu9isghlejlgmsi0bogabzbpsulh5to39or4ftqhkgntqsyijuotdqhwlocgvrqay6mhq0znekrsfv9by+/mah+l4+0ev6+povgstalwkkrg24vyjwj70zexuicmj4ju4upaujbifffu4qlpitg6i3ehhbkwvicni/efjrwdxcemljjwpaf6xpjdgtwxq6j/owa7763qr5pnvpqq++qu6umpds/4skyrma8gkkeifcetqhf/xjtx10vz/dnecbybygt2/r4+v6/h76bf37z8pvtawitaewsgfmetapg7ghcnylbeqjfqlbvbu4yyoef7zighfjxmjyymjpbozdjjewwv4aie5jfwbeyyt9arcd50z4tvijrqgaymy2bod3jjg+yhwqzj2ye5znyeuyh2qtjpamggjt4iwel8uhes8jxoj9jjlgrvopy67nr7qe2cxhdzyktzasceihc8jazodwnro7l3bnpmxyyrsswyxcwp/9bmbcosmkckcxt/hdca0acjjspjesfnzhbemsnvenbtaoglujvdef/4tpjlss7gewtv+kmlpf0srz7lgc8q1ks1bksojvta6f03nwgivawvnu0doumzuj2v//nbsijjuraaxvy8g6/j00dr7g3p6cc/plqjahm7bmfwmimojpia+aefhvy4eh2yjdj7m/v4hhsm5itvvixbxer3m/v8jmbda2v3mjnyqpynfa6uf6uamgdvv8chfkih5hu/nsuohrttbq1daugfmft+efdi6hiwdpk7j8gxmcun11cnr++sajhwznx8smyyei1f/6eptuswklxc1ez6xqiwnoxrry7naxo08vns2laefysr+gb/i1aofs4l6ujte2s7vbcwwcr1j6hlwdahtrrubwu0zpzmjc/aoen8v0zdyxn78cwu05p8j6xm3kjdkr9uv0zteydzmboddpy5mgtm19xufimjmrf+bpubsnbxlr+esgdywnz7gmqv16sbzsgysaodrplhyvjixhy1kjdkgr329egvbxjgyi8rr7y+t4l0oiho+kjdhwmob9eexjwroe526n5m3rnuz6xb+flvzi4zutkcrj6qxgofe/+7hibqxyaie+vji6sr2vpealuepvmltgywovpod/+akey/yc54ra07or8k5v9tktjusg79cfsblg6bp7ww9ywts7emtdrrcrpwinwde+eeqmhtqza50zof8xz4q4blpdnjegczwwajlipwhvvqh0u2zqz1typn2z85y9w0inemkfzrb5zyqntojjq4xtlitdimkfzot/ragu8koocquipl87w8ge8hqhgpyaxg4w7qgahfc1b9pccfbuazqdulohuhza6r6a2qhmpsdqgxwf6whpzeana9d3d5revmtkordk4qu1sypo4au12q218uyrcihtytiqgvgqbngsyhkibodqgo2oafasncdcb9/pszdxgo/hlwbzrygwanjbac0ezimaxajibqg0ejananghibme8elaagab7sycb5qcqxby7xlaazdstkwlahkbxz4aicfeao7j2igfxicedfpfkrswglo0p5vnhp7pgai1liydnkfv47e2d5s2fjasif+ugbod01equacuaefehbiobchsslwtblclzytiml64ousombxmghcd8wozvickee6jyuqziguj4cabja0aj4f0gsbqcmxbq6cvwgi10mr7euxvvadrimx6y7hzcjyhas3xjdwo1hbmnaibs+a0dyjnwb95eluw/fspohqccs+wzqdzn2wzmbucumxwv4iyss22ou0xfgitakydpkoiwqcxpybohcr8efshnauenrbavtikij3hgd+xhwaibqhnoxynpwanst9msjxwvavjookjk4g5itens6dtitmg2kua8wmcnbnpc10xqbday4bmayd7w8qiu1olqb8anqaua2okqbaxon7tljy9lfj/hifclywtxg+oyxqivia+ri3tufekhbd/84aurveurveurveurveurveurveurveurveurveurveurveurveurfndhhyqaaaaaaj6/7ofoqiaaaaaaaaaapwegcg4smhdcskaaaaasuvork5cyii=" style="border:0px solid black; height:512px; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; width:512px" vspace="0"> 

,但它不是displayng圖像

請幫助我..我怎麼能在DIV正確顯示他們...爲fomulae我使用mathjax在我的ckeditor ...

回答

0

我解決了它通過使用不同的插件,而不是mathax,和base64圖像上傳加載器。我用公式編輯器替換了數學公式和kcfinder上傳圖片。現在它的工作很完美。