IT技术互动交流平台

首页 > 网页设计 > 网页实例教程 > 正文

kindeditor集成jmeditor公式web编辑器

作者：礼拜天001  发布日期：2014-06-27 20:58:33

最近在搞一套在线的考试系统，一直为即支持公式编辑又得支持各种附件上传、图片上传、视频音频上传、文字编辑 的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>&nbsp;</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>&nbsp;</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
可自由引用，但请注明来源，谢谢。 





				

				


				

					

						
延伸阅读：

						
					

				

				

					Tag标签：
										编辑器  					公式  				

				

										

						

							
							
							
							
						

					

										
				


				




			

			

              

				

					
					

						
						
						
					

				

				
				

				

					

																								
						
					

				


				

				

					
     
						
  • 专题推荐
    •  
					
 
					

																
											
											
											
															

				

				

				

					
     
						
  • 栏目推荐
    •  
					
 
					  

																					HTML/CSS
																																		网页实例教程
																																		酷站欣赏
																																		网页特效教程
																																		CMS教程
																		DedeCMS
												PhpCMS
												Wordpress
												Discuz
												PhpWind
												CMS综合
																												网页制作软件
																		DreamWeaver
												Flash
												FireWorks
												SharePoint
																												网页开发资讯
																												

				

			

		

		  
 
			About IT165 - 
			广告服务 - 
			隐私声明 - 
			版权申明 - 
			免责条款 - 
			网站地图 - 
			网友投稿 - 
			联系方式 
			
 本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规