版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/q36835109/article/details/79169165
最近公司需要做一个带公式的HTML编辑器，网上找了很多插件都不是很满意，然后看到一个kindeditor集成jmeditor公式的，感觉还不错，下面是集成后的效果！
避免大家都踩坑，下面记录一下详细集成步骤：
1.下载kindeditor和jmeditor
kindeditor V4.1.11 官网下载地址： http://kindeditor.net/down.php
kindeditor V4.1.12 github下载地址：https://github.com/kindsoft/kindeditor
解压完目录如下：
jmeditor V0.9.4下载 http://www.jmeditor.com/bbs/read.php?tid=57&fid=2
解压完目录如下：
2.复制JMEditor-0.9.4\jmeditor\ckeditor\plugins\jme文件夹 到 kindeditor-4.1.12/plugins/，如下图：
3.然后再复制JMEditor-0.9.4\jmeditor\mathquill-0.9.1文件夹到 kindeditor-4.1.12/plugins/ jme/，如下图：
4.修改kindeditor-4.1.12/kindeditor-all.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', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'jme', 'about'
],5.修改 kindeditor-4.1.12/plugins/jme/plugin.js，并重命名为jme.js 代码如下：
KindEditor.plugin('jme', function(e){
var self = this, name = 'jme';
self.clickToolbar(name, function() {
var dialog = self.createDialog({
title : '公式',
width : 400,
height : 400,
body : '<div style="width:400px;height:400px;">' +
'<iframe id="math_frame" style="width:400px;height:400px;" frameborder="no" src="'
+ KindEditor.basePath + 'plugins/jme/dialogs/mathdialog.html"></iframe></div>',
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>';
self.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];
}6.修改 kindeditor 下面的 plugins/jme/dialog/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 + "plugins/jme/dialogs/jquery-1.11.0.min.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);7.拷贝 kindeditor-4.1.12/plugins/jme/mathquill-0.9.1/mathquill.css 代码 到 kindeditor-4.1.10/plugins/code/prettify.css里面
8.在kindeditor-4.1.12/plugins/jme/dialogs/下面新建一个跳转页面，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>JMEditor</title>
<link rel="stylesheet" type="text/css" href="dialog.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 class="mathquill-editable-box">
<span id="jme-math"></span>
</p>
</div>
<script type="text/javascript" src="dialog.js"></script>
</body>
</html>9.拷贝kindeditor-4.1.12/plugins/jme/icons/jme.png 公式图标logo 到kindeditor-4.1.12/themes/default/ 文件夹下
10.修改kindeditor-4.1.12/themes/default/default.css，代码如下：
首先找到
.ke-toolbar .ke-disabled {
cursor: default;
}
之后，把它删除，然后改为下面这个
.ke-toolbar .ke-icon-jme {
width: 16px;
height: 16px;
background: url(jme.png) 0 0 no-repeat;
}
最后，添加测试页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kindeditor集成jmeditor公式web富文本编辑器</title>
<link rel="stylesheet" href="./themes/default/default.css" />
<link rel="stylesheet" href="./plugins/code/prettify.css" />
<script type="text/javascript" src="./plugins/jme/dialogs/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./kindeditor-all.js"></script>
<script type="text/javascript" src="./lang/zh-CN.js"></script>
<script type="text/javascript" src="./plugins/code/prettify.js"></script>
<script type="text/javascript">
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="paperTitle"]', {
cssPath : './plugins/code/prettify.css',
uploadJson : './jsp/upload_json.jsp',
fileManagerJson : './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" >
<textarea id="paperTitle" name="paperTitle" cols="100" rows="8"></textarea>
</div>
</body>
</html>
附下载地址：
借鉴：