试题公式解决方案--kindeditor集成jmeditor公式web编辑器

2022-07-12 20:13:24

最近在搞一套在线的考试系统，一直为即支持公式编辑又得支持各种附件上传、图片上传、视频音频上传、文字编辑 的web编辑器而犯愁。于是乎试着把 kindeditor和jmeditor集成一下，多了不说了直接上图

试题公式解决方案--kindeditor集成jmeditor公式web编辑器

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

可*引用，但请注明来源，谢谢。 





上一篇：linux性能优化

下一篇：基于jstree的 对混乱的 命名系统进行归类的 计算机软件