JavaScript kindeditor jmeditor 整合 网页公式编辑器

admin

由于项目需求，需要实现在线编辑 数学公式 等，搜了很久找到了一个 jmeditor，公式编辑功能很强大，但是其他的功能有点弱，kindeditor 的 富文本编辑功能很强大，所以打算把这给两个编辑器结合一下。

 

kindeditor版本： 4.1.7

jmeditor版本 0.94

 

1、复制 jmeditor 下面的ckeditor\plugins\jme 到 kindeditor下面的 plugins， 然后在复制 jme下的 mathquill-0.9.1 值 kindeditor下面的plugins/ jme中。

 

2、修改 kindeditor 下面的 plugins/jme的 plugin.js，代码如下：

KindEditor.lang({
	jme : '插入公式'
});
KindEditor.plugin('jme', function(e){
	var editor = this, name = 'jme';
    editor.clickToolbar(name, function() {
    	var dialog = editor.createDialog({
    		name : 'about',
	        width : 500,
	        height : 300,
	        title : editor.lang('about'),
	        body : '<div style="width:500px;height:300px;">' +
	        	'<iframe id="math_frame" style="width:500px;height:300px;" frameborder="no" src="' 
	        	+ KindEditor.basePath + 'plugins/jme/dialogs/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>&nbsp;</span>';
		        	
		        	editor.insertHtml(mathHTML);
		        	return;		        	
                }
	        }
    	});
    });
});

function getIFrameDOM(fid){
	var fm = getIFrame(fid);
	return fm.document||fm.contentDocument;
}
function getIFrame(fid){
	return document.getElementById(fid)||document.frames[fid];
}

3、修改 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 + "../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);

4、在编辑器页面加载 plugins.js

5、在 编辑器 中 加载插件以及样式：

KindEditor.create(textarea, {
	resizeType : 0,
	width : '100%',
	cssPath : 'assets/commons/kindeditor/plugins/jme/mathquill-0.9.1/mathquill.css',
	items : [
		'jme'
	]
});

6、在显示页面 加载 样式：

assets/commons/kindeditor/plugins/jme/mathquill-0.9.1/mathquill.css

到此修改工作结束，时间仓促，可能有些地方不完整，如有问题，欢迎随时点击上面的 QQ ，以前讨论研究。。。

发表评论