Recently I am working on an online examination system. I have been struggling with the Web editor that supports not only formula editing but also all kinds of attachment uploading, picture uploading, video and audio uploading and text editing. So I tried to integrate Kindeditor and Jmeditor
Kindeditor version: 4.1.7 kindeditor.net/
Jmeditor version 0.94 www.jmeditor.com/
1, copy jmeditor-0.9.4 \ JMEditor \ckeditor\plugins\jme to kindeditor-4.1.7/plugins/, Then copy the jmeditor-0.9.4 \ JMEditor \mathquill-0.9.1 folder into kindeditor-4.1.7/plugins/ jme/.
2, modify kindeditor-4.1.7/kindeditor.js. Add 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'
],Copy the code
3, modify kindeditor – 4.1.7 / plugins/jme/plugin. Js, and rename for jme. Js code is as follows:
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="/mathdialog.action"></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];
}Copy the code
4, modify kindeditor 4.1.7 / plugins/jme/dialogs/dialog. The js, major changes to the current working directory and global variables, modify the following: If $is not defined, you can delay it until the jquery load is complete.var KindEditor = parent.KindEditor || {}; Document. Write ("<link href=\"" + KindEditor. BasePath + "plugins/jme/ 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'> more </div>"} return HTML; } function insert(q){ $("#jme-math").focus().mathquill("write", q.replace("{/}","\\")); } setTimeout(function(){$(document).ready(function(){// hide content 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). The HTML (" write up "); $(this).attr("isOpen",'1'); }else{ mi.animate({"height":(rowHei * 2)+"px"}); $(this). The HTML (" more "); $(this).attr("isOpen",'0'); }}); / formula/edit box $(" # jme - math "). The HTML (" "). The CSS (" the font, size, "' 30 px). Mathquill (' the editable). Mathquill (" write", ""); / / verification version information 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);Copy the code
5, copy kindeditor 4.1.7 / plugins/jme mathquill - 0.9.1 / mathquill. CSS code to kindeditor - 4.1.7 / plugins/code/prettify the CSS
6, Create mathdialog.jsp to the web project/where you want it to go ps: note mathdialog.action to go to this pageCopy the code<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <! PUBLIC DOCTYPE HTML "- / / / / 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 > insert formula < / title > < link href =" < % = basePath % > common/kindeditor - 4.1.7 / plugins/jme/dialogs/dialog. The CSS" Rel ="stylesheet" type="text/ CSS "/> </head> <body> <div class="tabMenu"> <div class="tabTitle"> <li> Common formula </li> <li> letter </li> <li> <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 >Copy the code7, copying kindeditor 4.1.7 / plugins/jme/ICONS/jme. The formula of PNG icon logo to kindeditor – 4.1.7 / themes/default/folder
8, modify kindeditor – 4.1.7 / themes/default/default CSS (load formula icon logo)
in
.ke-toolbar .ke-disabled { cursor: default; } below
add
.ke-icon-jme{
background: url(jme.png) 0 0 no-repeat;
width: 16px;
height: 16px;
}Copy the code9, modify kindeditor-4.1.7/lang/ zh_cn.js add
Jme: 'Insert formula ',Copy the codeUnlink: 'cancel hyperlink ', fullscreen:' display fullscreen ', about: 'about ', jme:' insert formula ',Copy the codeThe jmeditor formula plug-in has been integrated into Kindeditor
10. Create a test page.
<! PUBLIC DOCTYPE HTML "- / / / / 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> <! - web editor 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 editor 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>Copy the codeSo we have completed all the steps.
Copy the codeArticle source: http://www.cnblogs.com/libaoting/p/KindEditor.html are free to quote, but please indicate the source, thank you.Copy the code