kinditor 통합 jmeditor 공식 웹 편집기

최근 에 교육 프로그램 을 하 다가 공식 편집 문제 에 부 딪 혔 습 니 다. 인터넷 에서 검색 한 결과 jmeditor 라 는 플러그 인 을 찾 았 습 니 다. 이 플러그 인 을 kinditor 에 이식 하려 고 인터넷 에서 검색 한 결과 저 는 댓 글 을 찾 았 습 니 다. 이 게시 물 에 대해 저 는 일부분 을 썼 습 니 다. 댓 글 참고 주 소 는:http://www.liuchang.org/blog/JavaScript/245.html 。
http://www.cnblogs.com/libaoting/p/KindEditor.html?utm_source=tuicool&utm_medium=referral
저 는 KindEditor 4.1.10 을 사용 하고 있 습 니 다.  http://kindeditor.net/down.php
                       JMEditor-0.9.4       http://www.jmeditor.com/
     먼저 원본 코드 를 다운로드 한 후에 프로젝트 를 프레임 워 크 에 넣 었 습 니 다. 여기 서 저 는 여러 개의 kindeditor. js 를 정의 하여 프로젝트 의 자질구레한 활용 에 편리 하도록 했 습 니 다.

 1. jmeditor 아래 ckeditor \ plugins \ jme 를 kinditor 아래 plugins 로 복사 한 다음 jme 아래 plugins 를 복사 합 니 다. mathquill - 0.9.1 값 kinditor 아래 plugins / jme 중.복사 한 후 다음 그림 과 같다.
 
 
2. kinditor 아래 plugins / jme / plugin. js 를 수정 하고 plugin. js 를 jme. js 코드 로 이름 을 바 꾸 면 다음 과 같 습 니 다.
 

KindEditor.lang({
	jme : '    '
});
KindEditor.plugin('jme', function(e){
	var editor = this, name = 'jme';
    editor.clickToolbar(name, function() {
    	var dialog = editor.createDialog({
    		name : 'about',
	        width : 400,
	        height : 400,
	        title : editor.lang('about'),
	        body : '<div style="width:400px;height:400px;">' +
	        	'<iframe id="math_frame" style="width:400px;height:400px;" frameborder="no" src="' 
	        	+ KindEditor.basePath + 'plugins/jme/dialogs/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);
//		        	dialog.remove();
		        	return;		        	
                }
	        }
    	});
    });
});

function getIFrameDOM(fid){
	var fm = getIFrame(fid);
	return fm.document||fm.contentDocument;
}
function getIFrame(fid){
	return document.getElementById(fid)||document.frames[fid];
}

 3. kindeditor 아래 plugins / jme / dialog / dialog. js 를 수정 합 니 다. 주로 현재 작업 디 렉 터 리 와 전역 변 수 를 수정 합 니 다. 다음 과 같이 수정 합 니 다. 여기 서 주의해 야 할 것 은 뒤의 지연 함수 입 니 다. $가 정의 되 지 않 으 면 jquery 로드 가 완 료 될 때 까지 기다 릴 수 있 습 니 다.여기에 jquery 경로 가 있 습 니 다. 여러분 은 반드시 자신의 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-easyui/jquery.min.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);

 
 4, kinditor - 4.1.10 / plugins / jme / mathquill - 0.9.1 / mathquill. css 코드 를 kinditor - 4.1.10 / plugins / code / pretify. css 에 복사 합 니 다.
 
 5. kinditor - 4.1.10 / plugins / jme / icons / jme. png 공식 아이콘 로 고 를 kinditor - 4.1.10 / themes / default / 폴 더 에 복사 합 니 다.
 6, 수정 kindeditor - 4.1.10 / themes / default / default. css (공식 아이콘 로고 불 러 오기)
     ... 에 있다
        .ke-toolbar .ke-disabled {          cursor: default;       }
      아래
 
 

.ke-icon-jme{
    background: url(jme.png) 0 0  no-repeat;
    width: 16px;
    height: 16px;
}

 
7. kindeditor - 4.1.7 / lang / zh CN. js 를 수정 하여 다음 그림 과 같이 추가 합 니 다.

    

unlink : '      ',
fullscreen : '    ',
about : '  ',
jme : '    ',

 
 
  8, 수정 kindeditor - 4.1.10 / kindeditor. js.
 
 
 
 
 
 ok 이렇게 하면 프로젝트 가 표 시 됩 니 다. 어 떻 습 니까? 멋 있 지 않 습 니까? 당신 도 한번 해 보 세 요.
 
 
 
 자원 다운로드 주소:http://download.csdn.net/detail/guoluren009/9400675