試題公式解決方案--kindeditor集成jmeditor公式web編輯器

最近在搞一套在線的考試系統，一直為即支持公式編輯又得支持各種附件上傳、圖片上傳、視頻音頻上傳、文字編輯 的web編輯器而犯愁。於是乎試着把 kindeditor和jmeditor集成一下，多了不說了直接上圖

kindeditor版本： 4.1.7 http://kindeditor.net/

jmeditor版本 0.94 http://www.jmeditor.com/

1、復制 JMEditor-0.9.4\jmeditor\ckeditor\plugins\jme文件夾 到 kindeditor-4.1.7/plugins/， 然后在復制JMEditor-0.9.4\jmeditor\mathquill-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="/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>&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];
}

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步驟 mathdialog.action 跳轉到該頁面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!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 我們已經完成所有步驟。

文章出自：http://www.cnblogs.com/libaoting/p/KindEditor.html
可自由引用，但請注明來源，謝謝。