两个包:kindeditor和jmeditor
JMEditor 开源在线公式编辑器| http://www.jmeditor.com/bbs/read.php?tid=57&fid=2
kindeditor富文本编辑器 kindeditor V4.1.11 官网下载地址: http://kindeditor.net/down.php
**
一、解压压缩包:
**
1、解压公式编辑器如下目录
2、解压富文本目录如下:
二、转移文件到富文本目录下
1、复制JMEditor-0.9.4\jmeditor\ckeditor\plugins\jme文件夹 到 kindeditor/plugins/,如下图:
2、然后再复制JMEditor-0.9.4\jmeditor\mathquill-0.9.1文件夹到 kindeditor-4.1.12/plugins/ jme/,如下图
3、复制kindeditor-4.1.12/plugins/jme/icons/jme.png 公式图标logo 到kindeditor/themes/default/ 文件夹下,如图
**
三|修改富文本代码:
**
1、修改kindeditor/kindeditor-all.js。添加jme,如下:
2、修改 kindeditor/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];
}
截图如下:
(注意:这里的 src="’+ KindEditor.basePath + 'plugins/jme/dialogs/mathdialog.html" )要修改成对应的公式窗口跳转HTML路径
3、修改 kindeditor 下面的 plugins/jme/dialog/dialog.js,(注:请使用本地的jquery,避免延迟加载),代码如下(注意修改js和css的路径,修改成自己富文本对应的路径):
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 + "../../js/jquery-2.1.1.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);
4、拷贝 kindeditor-4.1.12/plugins/jme/mathquill-0.9.1/mathquill.css 代码 到 kindeditor/plugins/code/prettify.css里面,代码如下:
/*
* LaTeX Math in pure HTML and CSS -- No images whatsoever
* v0.xa
* by Jay and Han
* Lesser GPL Licensed: http: //www.gnu.org/licenses/lgpl.html
*
* This file is automatically included by mathquill.js
*
*/
@font-face {
font-family: Symbola;
src: url(font/Symbola.eot);
src: local("Symbola Regular"), local("Symbola"), url(font/Symbola.ttf) format("truetype"), url(font/Symbola.otf) format("opentype"), url(font/Symbola.svg#Symbola) format("svg");
}
.mathquill-editable {
display: -moz-inline-box;
display: inline-block;
}
.mathquill-editable .cursor {
border-left: 1px solid black;
margin-right: -1px;
position: relative;
z-index: 1;
padding: 0;
display: -moz-inline-box;
display: inline-block;
}
.mathquill-editable .cursor.blink {
visibility: hidden;
}
.mathquill-editable,
.mathquill-embedded-latex .mathquill-editable {
border: 1px solid gray;
padding: 2px;
}
.mathquill-embedded-latex .mathquill-editable {
margin: 1px;
}
.mathquill-editable.hasCursor,
.mathquill-editable .hasCursor {
-webkit-box-shadow: #68b4df 0 0 3px 2px;
-moz-box-shadow: #68b4df 0 0 3px 2px;
box-shadow: #68b4df 0 0 3px 2px;
}
.mathquill-editable .latex-command-input {
color: inherit;
font-family: "Courier New", monospace;
border: 1px solid gray;
padding-right: 1px;
margin-right: 1px;
margin-left: 2px;
}
.mathquill-editable .latex-command-input.empty {
background: transparent;
}
.mathquill-editable .latex-command-input.hasCursor {
border-color: ActiveBorder;
}
.mathquill-editable.empty:after,
.mathquill-textbox:after,
.mathquill-rendered-math .empty:after {
visibility: hidden;
content: 'c';
}
.mathquill-editable .cursor:only-child:after,
.mathquill-editable .textarea + .cursor:last-child:after {
visibility: hidden;
content: 'c';
}
.mathquill-textbox {
overflow-x: auto;
overflow-y: hidden;
}
.mathquill-rendered-math {
font-variant: normal;
font-weight: normal;
font-style: normal;
font-size: 115%;
line-height: 1;
display: -moz-inline-box;
display: inline-block;
}
.mathquill-rendered-math .non-leaf,
.mathquill-rendered-math .scaled {
display: -moz-inline-box;
display: inline-block;
}
.mathquill-rendered-math var,
.mathquill-rendered-math .text,
.mathquill-rendered-math .nonSymbola {
font-family: "Times New Roman", Symbola, serif;
line-height: .9;
}
.mathquill-rendered-math * {
font-size: inherit;
line-height: inherit;
margin: 0;
padding: 0;
border-color: black;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: pre-wrap;
}
.mathquill-rendered-math .empty {
background: #ccc;
}
.mathquill-rendered-math.empty {
background: transparent;
}
.mathquill-rendered-math .text {
font-size: 87%;
}
.mathquill-rendered-math .font {
font: 1em "Times New Roman", Symbola, serif;
}
.mathquill-rendered-math .font * {
font-family: inherit;
font-style: inherit;
}
.mathquill-rendered-math b,
.mathquill-rendered-math b.font {
font-weight: bolder;
}
.mathquill-rendered-math var,
.mathquill-rendered-math i,
.mathquill-rendered-math i.font {
font-syle: italic;
}
.mathquill-rendered-math var.florin {
margin: 0 -0.1em;
}
.mathquill-rendered-math big {
font-size: 125%;
}
.mathquill-rendered-math .roman {
font-style: normal;
}
.mathquill-rendered-math .sans-serif {
font-family: sans-serif, Symbola, serif;
}
.mathquill-rendered-math .monospace {
font-family: monospace, Symbola, serif;
}
.mathquill-rendered-math .overline {
border-top: 1px solid black;
margin-top: 1px;
}
.mathquill-rendered-math .underline {
border-bottom: 1px solid black;
margin-bottom: 1px;
}
.mathquill-rendered-math .binary-operator {
padding: 0 0.2em;
display: -moz-inline-box;
display: inline-block;
}
.mathquill-rendered-math .unary-operator {
padding-left: 0.2em;
}
.mathquill-rendered-math sup,
.mathquill-rendered-math sub {
position: relative;
font-size: 90%;
}
.mathquill-rendered-math sup .binary-operator,
.mathquill-rendered-math sub .binary-operator {
padding: 0 .1em;
}
.mathquill-rendered-math sup .unary-operator,
.mathquill-rendered-math sub .unary-operator {
padding-left: .1em;
}
.mathquill-rendered-math sup.limit,
.mathquill-rendered-math sub.limit,
.mathquill-rendered-math sup.nthroot,
.mathquill-rendered-math sub.nthroot {
font-size: 80%;
}
.mathquill-rendered-math sup .fraction,
.mathquill-rendered-math sub .fraction {
font-size: 70%;
vertical-align: -0.4em;
}
.mathquill-rendered-math sup .numerator,
.mathquill-rendered-math sub .numerator {
padding-bottom: 0;
}
.mathquill-rendered-math sup .denominator,
.mathquill-rendered-math sub .denominator {
padding-top: 0;
}
.mathquill-rendered-math sup {
vertical-align: .5em;
}
.mathquill-rendered-math sup.limit,
.mathquill-rendered-math sup.nthroot {
vertical-align: 0.8em;
}
.mathquill-rendered-math sup.nthroot {
margin-right: -0.6em;
margin-left: .2em;
min-width: .5em;
}
.mathquill-rendered-math sub {
vertical-align: -0.4em;
}
.mathquill-rendered-math sub.limit {
vertical-align: -0.6em;
}
.mathquill-rendered-math .paren {
padding: 0 .1em;
vertical-align: bottom;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
}
.mathquill-rendered-math .array {
vertical-align: middle;
text-align: center;
}
.mathquill-rendered-math .array > span {
display: block;
}
.mathquill-rendered-math .non-italicized-function {
font-family: Symbola, "Times New Roman", serif;
line-height: .9;
font-style: normal;
padding-right: .2em;
}
.mathquill-rendered-math .fraction {
font-size: 90%;
text-align: center;
vertical-align: -0.5em;
padding: 0 .2em;
}
.mathquill-rendered-math .fraction,
.mathquill-rendered-math x:-moz-any-link {
display: -moz-groupbox;
}
.mathquill-rendered-math .fraction,
.mathquill-rendered-math x:-moz-any-link,
.mathquill-rendered-math x:default {
display: inline-block;
}
.mathquill-rendered-math .numerator,
.mathquill-rendered-math .denominator {
display: block;
}
.mathquill-rendered-math .numerator {
padding: 0 0.1em;
margin-bottom: -0.1em;
}
.mathquill-rendered-math .denominator {
border-top: 1px solid;
float: right;
width: 100%;
padding: .1em .1em 0 .1em;
margin-right: -0.1em;
margin-left: -0.1em;
}
.mathquill-rendered-math .sqrt-prefix {
padding-top: 0;
position: relative;
top: .1em;
vertical-align: top;
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
}
.mathquill-rendered-math .sqrt-stem {
border-top: 1px solid;
margin-top: 1px;
padding-left: .15em;
padding-right: .2em;
margin-right: .1em;
}
.mathquill-rendered-math,
.mathquill-rendered-math .mathquill-editable {
cursor: text;
font-family: Symbola, "Times New Roman", serif;
}
.mathquill-rendered-math .selection,
.mathquill-editable .selection,
.mathquill-rendered-math .selection .non-leaf,
.mathquill-editable .selection .non-leaf,
.mathquill-rendered-math .selection .scaled,
.mathquill-editable .selection .scaled {
background: #B4D5FE !important;
background: Highlight !important;
color: HighlightText;
border-color: HighlightText;
}
.mathquill-rendered-math .selection .matrixed,
.mathquill-editable .selection .matrixed {
background: #39F !important;
}
.mathquill-rendered-math .selection .matrixed-container,
.mathquill-editable .selection .matrixed-container {
filter: progid:DXImageTransform.Microsoft.Chroma(color='#3399FF') !important;
}
.mathquill-rendered-math .selection.blur,
.mathquill-editable .selection.blur,
.mathquill-rendered-math .selection.blur .non-leaf,
.mathquill-editable .selection.blur .non-leaf,
.mathquill-rendered-math .selection.blur .matrixed,
.mathquill-editable .selection.blur .matrixed {
background: #D4D4D4 !important;
color: black;
border-color: black;
}
.mathquill-rendered-math .selection.blur .matrixed-container,
.mathquill-editable .selection.blur .matrixed-container {
filter: progid:DXImageTransform.Microsoft.Chroma(color='#D4D4D4') !important;
}
.mathquill-editable .textarea,
.mathquill-rendered-math .textarea {
position: relative;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.mathquill-editable .textarea textarea,
.mathquill-rendered-math .textarea textarea,
.mathquill-editable .selectable,
.mathquill-rendered-math .selectable {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
position: absolute;
clip: rect(1em 1em 1em 1em);
}
.mathquill-rendered-math .matrixed {
background: white;
display: -moz-inline-box;
display: inline-block;
}
.mathquill-rendered-math .matrixed-container {
filter: progid:DXImageTransform.Microsoft.Chroma(color='white');
margin-top: -0.1em;
}
5、在kindeditor-4.1.12/plugins/jme/dialogs/下面新建一个跳转页面,代码如下(注意:2步骤的jme.js中src的跳转目录要换成这个文件的访问路径):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>插入公式</title>
<link href="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 class="help">-->
<!--<p>-->
<!--<a href="http://www.jmeditor.com" target="_blank">更多模板</a>-->
<!--</p>-->
<!--<p>-->
<!--<a href="http://www.jmeditor.com" target="_blank">报告BUG</a>-->
<!--</p>-->
<!--<p>-->
<!--<a href="http://www.jmeditor.com" target="_blank">关于JMEditor</a>-->
<!--</p>-->
<!--</div>-->
<div id="mathDiv">
<p>
<span id="jme-math"></span>
</p>
<p> </p>
</div>
<div class="ad">
</div>
<script type="text/javascript" src="dialog.js"></script>
</body>
</html>
6、修改kindeditor-4.1.12/lang/zh_CN.js,如下图显示:
最后,测试页面代码:
html的div
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="col-sm-3 control-label">备注</label>
<div class="col-sm-9">
<textarea id="paperTitle" name="paperTitle" cols="100" rows="5" style="width:750px;height:260px;visibility:hidden;float:left;"></textarea>
</div>
</div>
</div>
</div
引用script和css如下
<link rel="stylesheet" href="${base}/resources/plugins/editor/themes/default/default.css" />
<link rel="stylesheet" href="${base}/resources/plugins/editor/plugins/code/prettify.css" />
<script charset="utf-8" src="${base}/resources/plugins/editor/kindeditor.js"></script>
<script charset="utf-8" src="${base}/resources/plugins/editor/lang/zh_CN.js"></script>
<script charset="utf-8" src="${base}/resources/plugins/editor/plugins/code/prettify.js"></script>
重要的script如下
<script type="text/javascript">
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="paperTitle"]', {
height: "350px",
items: [
"source", "|", "undo", "redo", "|", "preview", "print", "template", "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",
"flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap", "pagebreak",
"anchor", "link", "unlink","|", "jme"
],
langType: lang,
syncType: "form",
filterMode: false,
pagebreakHtml: '<hr class="pageBreak" \/>',
filePostName: "file",
cssPath : '${base}/resources/plugins/editor/plugins/code/prettify.css',
uploadJson: framework.base + "/admin/file/upload.jhtml",
fileManagerJson: framework.base + "/admin/file/browser.jhtml",
uploadImageExtension: setting.uploadImageExtension,
uploadFlashExtension: setting.uploadFlashExtension,
uploadMediaExtension: setting.uploadMediaExtension,
uploadFileExtension: setting.uploadFileExtension,
extraFileUploadParams: {
token: getCookie("token")
},
allowFileManager : true,
autoHeightMode : true,
afterCreate : function() {
this.sync();
}
});
prettyPrint();
});
</script>
运行效果如下图:
整合包码云下载地址 : https://gitee.com/CallMrStephen/kindeditorJmeditor.git