2017-10-12 16 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上传图片。现在它的工作很完美。