IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

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标签:编辑器  公式  
  • 专题推荐