最近在搞一套在线的考试系统,一直为即支持公式编辑又得支持各种附件上传、图片上传、视频音频上传、文字编辑 的web编辑器而犯愁。于是乎试着把 kindeditor和jmeditor集成一下,多了不说了直接上图
kindeditor版本: 4.1.7 http://kindeditor.net/
jmeditor版本 0.94 http://www.jmeditor.com/
1、复制 JMEditor-0.9.4jmeditorckeditorpluginsjme文件夹 到 kindeditor-4.1.7/plugins/, 然后在复制JMEditor-0.9.4jmeditormathquill-0.9.1文件夹到 kindeditor-4.1.7/plugins/ jme/。
2、修改kindeditor-4.1.7/kindeditor.js。添加jme
items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'jme' ],
3、修改 kindeditor-4.1.7/plugins/jme/plugin.js,并重命名为jme.js 代码如下:
KindEditor.plugin('jme', function(e){ var editor = this, name = 'jme', lang = editor.lang(name + '.'); editor.clickToolbar(name, function() { var dialog = editor.createDialog({ name : name, width : 500, height : 300, title : editor.lang(name), body : '<div style='width:500px;height:300px;'>' + '<iframe id='math_frame' style='width:500px;height:300px;' frameborder='no' src='admin/testQuestions/mathdialog.html'></iframe></div>', closeBtn : { name : '关闭', click : function(e) { dialog.remove(); } }, yesBtn : { name : '确定', click : function(e) { var thedoc = document.frames ? document.frames('math_frame').document : getIFrameDOM('math_frame'); var mathHTML = '<span class='mathquill-rendered-math' style='font-size:' + '20px' + ';' >' + $('#jme-math',thedoc).html() + '</span><span> </span>'; editor.insertHtml(mathHTML).hideDialog().focus(); return; } } }); }); }); function getIFrameDOM(fid){ var fm = getIFrame(fid); return fm.document||fm.contentDocument; } function getIFrame(fid){ return document.getElementById(fid)||document.frames[fid]; }
admin/testQuestions/mathdialog.html ps: 加载页面方法,一般工程会屏蔽html、jsp的直接访问,会通过控制器跳转控制 4、修改 kindeditor-4.1.7/plugins/jme/dialogs/dialog.js,主要修改 为当前工作目录和全局变量,修改如下:这里 需要注意的是后面的延时函数,如果提示 $ 没有定义 可以适当延时,等待 jquery加载完成。
var KindEditor = parent.KindEditor || {}; document.write( '<link href='' + KindEditor.basePath + 'plugins/jme/mathquill-0.9.1/mathquill.css' rel='stylesheet' type='text/css' />' + '<script type='text/javascript' src='' + KindEditor.basePath + '../jquery/jquery.js'></script>' + '<script type='text/javascript' src='' + KindEditor.basePath + 'plugins/jme/mathquill-0.9.1/mathquill.min.js'></script>'); var jmeMath = [ [ '{/}frac{}{}','^{}/_{}','x^{}','x_{}','x^{}_{}','{/}bar{}','{/}sqrt{}','{/}nthroot{}{}', '{/}sum^{}_{n=}','{/}sum','{/}log_{}','{/}ln','{/}int_{}^{}','{/}oint_{}^{}' ], [ '{/}alpha','{/}beta','{/}gamma','{/}delta','{/}varepsilon','{/}varphi','{/}lambda','{/}mu', '{/}rho','{/}sigma','{/}omega','{/}Gamma','{/}Delta','{/}Theta','{/}Lambda','{/}Xi', '{/}Pi','{/}Sigma','{/}Upsilon','{/}Phi','{/}Psi','{/}Omega' ], [ '+','-','{/}pm','{/}times','{/}ast','{/}div','/','{/}bigtriangleup', '=','{/}ne','{/}approx','>','<','{/}ge','{/}le','{/}infty', '{/}cap','{/}cup','{/}because','{/}therefore','{/}subset','{/}supset','{/}subseteq','{/}supseteq', '{/}nsubseteq','{/}nsupseteq','{/}in','{/}ni','{/}notin','{/}mapsto','{/}leftarrow','{/}rightarrow', '{/}Leftarrow','{/}Rightarrow','{/}leftrightarrow','{/}Leftrightarrow' ] ]; function mathHtml(obj){ var cols = 8;//一行放几个 var slidLen = 34;//每个图标的宽或高 var html='<div class='mathIcon'>'; for(var i = 0 ; i < obj.count ; i ++){ html += '<li onclick='insert('' + jmeMath[obj.groupid][i] + '')' style='background-position:-' + (obj.x + Math.floor(i%8)*slidLen) + 'px -' + (obj.y + Math.floor(i/8)*slidLen) + 'px;'></li>'; } html += '</div>'; if(obj.count > cols * 2){ html += '<div class='more' mrows='' + Math.floor((obj.count + cols - 1) / cols) + '' isOpen='0'>更多</div>' } return html; } function insert(q){ $('#jme-math').focus().mathquill('write', q.replace('{/}','\')); } setTimeout(function(){ $(document).ready(function(){ //隐藏内容div $('.tabContent div.mathBox').hide(); //菜单点击事件 $('.tabTitle li').click(function(){ $('.tabContent div.mathBox').hide(); var n = 0; var obj = this; $('.tabTitle li').each(function(i,o){ if(obj == o){ n = i; } }); $('.tabTitle li').removeClass('current'); $(obj).addClass('current'); $('.tabContent div.mathBox:eq(' + n + ')').show(); }); //缺省显示第一个 $('.tabTitle li:eq(0)').click(); //公式定义 $('.tabContent div.mathBox:eq(0)').html(mathHtml({ groupid:0, x:0, y:272, count:14 })); $('.tabContent div.mathBox:eq(2)').html(mathHtml({ groupid:2, x:0, y:0, count:36 })); $('.tabContent div.mathBox:eq(1)').html(mathHtml({ groupid:1, x:0, y:170, count:22 })); //常用公式,更多按钮绑定的事件 $('.tabContent div.mathBox div.more').click(function(){ var rowHei = 40; var mi = $(this).parent().find('.mathIcon'); if($(this).attr('isOpen') == '0'){ mi.animate({'height':(rowHei * Number($(this).attr('mrows')))+'px'}); $(this).html('↑ 收起'); $(this).attr('isOpen','1'); }else{ mi.animate({'height':(rowHei * 2)+'px'}); $(this).html('更多'); $(this).attr('isOpen','0'); } }); //公式编辑框 $('#jme-math').html('').css('font-size', '30px').mathquill('editable').mathquill('write', ''); //验证版本信息 if(KindEditor.versionCode){ $.ajax({ url:'http://www.jmeditor.com/jme/v.php', type:'post', dataType:'html', async:true, data: { versionCode:KindEditor.versionCode }, success:function(data){ $('.ad').html(data); }, error:function(){ //alert('err'); } }); } }); },1000);
5、拷贝 kindeditor-4.1.7/plugins/jme/mathquill-0.9.1/mathquill.css 代码 到 kindeditor-4.1.7/plugins/code/prettify.css里面 6、新建mathdialog.jsp到 web工程/您希望放的位置 ps: 注意 第3步骤 admin/testQuestions/mathdialog.html 跳转到该页面
<%@ page language='java' import='java.util.*' pageEncoding='UTF-8'%> <%@include file='/WEB-INF/jsp/common/page/include.inc.jsp'%> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <base href='<%=basePath %>' /> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>插入公式?</title> <link href='<%=basePath %>common/kindeditor-4.1.7/plugins/jme/dialogs/dialog.css' rel='stylesheet' type='text/css' /> </head> <body> <div class='tabMenu'> <div class='tabTitle'> <li> 常用公式 </li> <li> 字母 </li> <li> 符号 </li> </div> <div class='tabContent'> <div class='mathBox'> </div> <div class='mathBox'> </div> <div class='mathBox'> </div> </div> </div> <div id='mathDiv'> <p> <span id='jme-math'></span> </p> <p> </p> </div> <div class='ad'> </div> <script type='text/javascript' src='<%=basePath %>common/kindeditor-4.1.7/plugins/jme/dialogs/dialog.js'></script> </body> </html>
7、拷贝kindeditor-4.1.7/plugins/jme/icons/jme.png 公式图标logo 到kindeditor-4.1.7/themes/default/ 文件夹下
8、修改kindeditor-4.1.7/themes/default/default.css (加载公式图标logo)
在
.ke-toolbar .ke-disabled {
cursor: default;
}下方
添加
.ke-icon-jme{ background: url(jme.png) 0 0 no-repeat; width: 16px; height: 16px; }
9、修改kindeditor-4.1.7/lang/zh_CN.js 添加
jme : '插入公式',
unlink : '取消超级链接', fullscreen : '全屏显示', about : '关于', jme : '插入公式',
以上步骤完成 jmeditor的公式插件已集成到kindeditor里面
10、新建测试页面,
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <base href='<%=basePath %>' /> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>新增试题</title> <!-- web编辑器str --> <link rel='stylesheet' href='<%=basePath %>common/kindeditor-4.1.7/themes/default/default.css' /> <link rel='stylesheet' href='<%=basePath %>common/kindeditor-4.1.7/plugins/code/prettify.css' /> <script charset='utf-8' src='<%=basePath %>common/kindeditor-4.1.7/kindeditor.js'></script> <script charset='utf-8' src='<%=basePath %>common/kindeditor-4.1.7/lang/zh_CN.js'></script> <script charset='utf-8' src='<%=basePath %>common/kindeditor-4.1.7/plugins/code/prettify.js'></script> <!-- web编辑器end --> <script type='text/javascript'> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name='paperTitle']', { cssPath : '<%=basePath %>common/kindeditor-4.1.7/plugins/code/prettify.css', uploadJson : '<%=basePath %>common/kindeditor-4.1.7/jsp/upload_json.jsp', fileManagerJson : '<%=basePath %>common/kindeditor-4.1.7/jsp/file_manager_json.jsp', allowFileManager : true, autoHeightMode : true, afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); document.forms['example'].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); document.forms['example'].submit(); }); } }); prettyPrint(); }); </script> </head> <body> <div class='control-group' > <label class='control-label' style='float:left;'> 试题题目: </label> <textarea id='paperTitle' name='paperTitle' cols='100' rows='5' style='width:750px;height:260px;visibility:hidden;float:left;'>${testQuestions.paperTitle}</textarea> <div class='clear'></div> </div> </body> </html>
so 我们已经完成所有步骤。如需交流 请可加QQ 1297229577
文章出自:http://www.cnblogs.com/libaoting/p/KindEditor.html 可自由引用,但请注明来源,谢谢。