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

一时失言乱红尘 2022-05-25 08:09 165阅读 0赞

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

![271450529766803.png][]

kindeditor版本：

4.1.7 [http://kindeditor.net/][http_kindeditor.net]

jmeditor版本 0.94 [http://www.jmeditor.com/][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> </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加载完成。

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> </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里面

<!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 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>
    
    
    <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>

完整版： [点击打开链接][Link 1]  
转自： [点击打开链接][Link 2]

[271450529766803.png]: /images/20220525/b00009a2c2ae49f9b488e6ceb4cbeff0.png
[http_kindeditor.net]: http://kindeditor.net/
[http_www.jmeditor.com]: http://www.jmeditor.com/
[Link 1]: https://download.csdn.net/download/guoqingshuang/10407824
[Link 2]: http://www.cnblogs.com/libaoting/p/KindEditor.html