富文本kindeditor整合公式编辑器jmeditor，及附上整合包

最新推荐文章于 2022-06-06 15:12:13 发布

CallMrStephen

最新推荐文章于 2022-06-06 15:12:13 发布

阅读量1.8k

点赞数 2

分类专栏：富文本整合文章标签： javaScript、富文本公式整合、kindeditor、jmedi

本文链接：https://blog.csdn.net/qq_37704264/article/details/100053604

版权

富文本整合专栏收录该内容

1 篇文章 0 订阅

订阅专栏

两个包：kindeditor和jmeditor

JMEditor 开源在线公式编辑器| http://www.jmeditor.com/bbs/read.php?tid=57&fid=2

kindeditor富文本编辑器 kindeditor V4.1.11 官网下载地址： http://kindeditor.net/down.php

一、解压压缩包：

**
1、解压公式编辑器如下目录

在这里插入图片描述
2、解压富文本目录如下：

在这里插入图片描述

二、转移文件到富文本目录下

1、复制JMEditor-0.9.4\jmeditor\ckeditor\plugins\jme文件夹到 kindeditor/plugins/，如下图：

在这里插入图片描述

2、然后再复制JMEditor-0.9.4\jmeditor\mathquill-0.9.1文件夹到 kindeditor-4.1.12/plugins/ jme/，如下图
在这里插入图片描述

3、复制kindeditor-4.1.12/plugins/jme/icons/jme.png 公式图标logo 到kindeditor/themes/default/ 文件夹下，如图
在这里插入图片描述

三|修改富文本代码：

1、修改kindeditor/kindeditor-all.js。添加jme，如下：
在这里插入图片描述

2、修改 kindeditor/plugins/jme/plugin.js，并重命名为jme.js 代码如下：

KindEditor.plugin('jme', function(e){
    	var self = this, name = 'jme';
        self.clickToolbar(name, function() {
        	var dialog = self.createDialog({
        		title : '公式',
    	        width : 400,
    	        height : 400,
    	        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>',
    	        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>';
    		        	
    		        	self.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];
}

截图如下：
在这里插入图片描述
（注意：这里的 src="’+ KindEditor.basePath + 'plugins/jme/dialogs/mathdialog.html" ）要修改成对应的公式窗口跳转HTML路径

3、修改 kindeditor 下面的 plugins/jme/dialog/dialog.js，（注：请使用本地的jquery，避免延迟加载），代码如下（注意修改js和css的路径，修改成自己富文本对应的路径）：
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 + "../../js/jquery-2.1.1.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、拷贝 kindeditor-4.1.12/plugins/jme/mathquill-0.9.1/mathquill.css 代码到 kindeditor/plugins/code/prettify.css里面，代码如下：

/*
 * LaTeX Math in pure HTML and CSS -- No images whatsoever
 * v0.xa
 * by Jay and Han
 * Lesser GPL Licensed: http: //www.gnu.org/licenses/lgpl.html
 *
 * This file is automatically included by mathquill.js
 *
 */
@font-face {
   font-family: Symbola;
   src: url(font/Symbola.eot);
   src: local("Symbola Regular"), local("Symbola"), url(font/Symbola.ttf) format("truetype"), url(font/Symbola.otf) format("opentype"), url(font/Symbola.svg#Symbola) format("svg");
}
.mathquill-editable {
   display: -moz-inline-box;
   display: inline-block;
}
.mathquill-editable .cursor {
   border-left: 1px solid black;
   margin-right: -1px;
   position: relative;
   z-index: 1;
   padding: 0;
   display: -moz-inline-box;
   display: inline-block;
}
.mathquill-editable .cursor.blink {
   visibility: hidden;
}
.mathquill-editable,
.mathquill-embedded-latex .mathquill-editable {
   border: 1px solid gray;
   padding: 2px;
}
.mathquill-embedded-latex .mathquill-editable {
   margin: 1px;
}
.mathquill-editable.hasCursor,
.mathquill-editable .hasCursor {
   -webkit-box-shadow: #68b4df 0 0 3px 2px;
   -moz-box-shadow: #68b4df 0 0 3px 2px;
   box-shadow: #68b4df 0 0 3px 2px;
}
.mathquill-editable .latex-command-input {
   color: inherit;
   font-family: "Courier New", monospace;
   border: 1px solid gray;
   padding-right: 1px;
   margin-right: 1px;
   margin-left: 2px;
}
.mathquill-editable .latex-command-input.empty {
   background: transparent;
}
.mathquill-editable .latex-command-input.hasCursor {
   border-color: ActiveBorder;
}
.mathquill-editable.empty:after,
.mathquill-textbox:after,
.mathquill-rendered-math .empty:after {
   visibility: hidden;
   content: 'c';
}
.mathquill-editable .cursor:only-child:after,
.mathquill-editable .textarea + .cursor:last-child:after {
   visibility: hidden;
   content: 'c';
}
.mathquill-textbox {
   overflow-x: auto;
   overflow-y: hidden;
}
.mathquill-rendered-math {
   font-variant: normal;
   font-weight: normal;
   font-style: normal;
   font-size: 115%;
   line-height: 1;
   display: -moz-inline-box;
   display: inline-block;
}
.mathquill-rendered-math .non-leaf,
.mathquill-rendered-math .scaled {
   display: -moz-inline-box;
   display: inline-block;
}
.mathquill-rendered-math var,
.mathquill-rendered-math .text,
.mathquill-rendered-math .nonSymbola {
   font-family: "Times New Roman", Symbola, serif;
   line-height: .9;
}
.mathquill-rendered-math * {
   font-size: inherit;
   line-height: inherit;
   margin: 0;
   padding: 0;
   border-color: black;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   white-space: pre-wrap;
}
.mathquill-rendered-math .empty {
   background: #ccc;
}
.mathquill-rendered-math.empty {
   background: transparent;
}
.mathquill-rendered-math .text {
   font-size: 87%;
}
.mathquill-rendered-math .font {
   font: 1em "Times New Roman", Symbola, serif;
}
.mathquill-rendered-math .font * {
   font-family: inherit;
   font-style: inherit;
}
.mathquill-rendered-math b,
.mathquill-rendered-math b.font {
   font-weight: bolder;
}
.mathquill-rendered-math var,
.mathquill-rendered-math i,
.mathquill-rendered-math i.font {
   font-syle: italic;
}
.mathquill-rendered-math var.florin {
   margin: 0 -0.1em;
}
.mathquill-rendered-math big {
   font-size: 125%;
}
.mathquill-rendered-math .roman {
   font-style: normal;
}
.mathquill-rendered-math .sans-serif {
   font-family: sans-serif, Symbola, serif;
}
.mathquill-rendered-math .monospace {
   font-family: monospace, Symbola, serif;
}
.mathquill-rendered-math .overline {
   border-top: 1px solid black;
   margin-top: 1px;
}
.mathquill-rendered-math .underline {
   border-bottom: 1px solid black;
   margin-bottom: 1px;
}
.mathquill-rendered-math .binary-operator {
   padding: 0 0.2em;
   display: -moz-inline-box;
   display: inline-block;
}
.mathquill-rendered-math .unary-operator {
   padding-left: 0.2em;
}
.mathquill-rendered-math sup,
.mathquill-rendered-math sub {
   position: relative;
   font-size: 90%;
}
.mathquill-rendered-math sup .binary-operator,
.mathquill-rendered-math sub .binary-operator {
   padding: 0 .1em;
}
.mathquill-rendered-math sup .unary-operator,
.mathquill-rendered-math sub .unary-operator {
   padding-left: .1em;
}
.mathquill-rendered-math sup.limit,
.mathquill-rendered-math sub.limit,
.mathquill-rendered-math sup.nthroot,
.mathquill-rendered-math sub.nthroot {
   font-size: 80%;
}
.mathquill-rendered-math sup .fraction,
.mathquill-rendered-math sub .fraction {
   font-size: 70%;
   vertical-align: -0.4em;
}
.mathquill-rendered-math sup .numerator,
.mathquill-rendered-math sub .numerator {
   padding-bottom: 0;
}
.mathquill-rendered-math sup .denominator,
.mathquill-rendered-math sub .denominator {
   padding-top: 0;
}
.mathquill-rendered-math sup {
   vertical-align: .5em;
}
.mathquill-rendered-math sup.limit,
.mathquill-rendered-math sup.nthroot {
   vertical-align: 0.8em;
}
.mathquill-rendered-math sup.nthroot {
   margin-right: -0.6em;
   margin-left: .2em;
   min-width: .5em;
}
.mathquill-rendered-math sub {
   vertical-align: -0.4em;
}
.mathquill-rendered-math sub.limit {
   vertical-align: -0.6em;
}
.mathquill-rendered-math .paren {
   padding: 0 .1em;
   vertical-align: bottom;
   -webkit-transform-origin: bottom center;
   -moz-transform-origin: bottom center;
   -ms-transform-origin: bottom center;
   -o-transform-origin: bottom center;
   transform-origin: bottom center;
}
.mathquill-rendered-math .array {
   vertical-align: middle;
   text-align: center;
}
.mathquill-rendered-math .array > span {
   display: block;
}
.mathquill-rendered-math .non-italicized-function {
   font-family: Symbola, "Times New Roman", serif;
   line-height: .9;
   font-style: normal;
   padding-right: .2em;
}
.mathquill-rendered-math .fraction {
   font-size: 90%;
   text-align: center;
   vertical-align: -0.5em;
   padding: 0 .2em;
}
.mathquill-rendered-math .fraction,
.mathquill-rendered-math x:-moz-any-link {
   display: -moz-groupbox;
}
.mathquill-rendered-math .fraction,
.mathquill-rendered-math x:-moz-any-link,
.mathquill-rendered-math x:default {
   display: inline-block;
}
.mathquill-rendered-math .numerator,
.mathquill-rendered-math .denominator {
   display: block;
}
.mathquill-rendered-math .numerator {
   padding: 0 0.1em;
   margin-bottom: -0.1em;
}
.mathquill-rendered-math .denominator {
   border-top: 1px solid;
   float: right;
   width: 100%;
   padding: .1em .1em 0 .1em;
   margin-right: -0.1em;
   margin-left: -0.1em;
}
.mathquill-rendered-math .sqrt-prefix {
   padding-top: 0;
   position: relative;
   top: .1em;
   vertical-align: top;
   -webkit-transform-origin: top;
   -moz-transform-origin: top;
   -ms-transform-origin: top;
   -o-transform-origin: top;
   transform-origin: top;
}
.mathquill-rendered-math .sqrt-stem {
   border-top: 1px solid;
   margin-top: 1px;
   padding-left: .15em;
   padding-right: .2em;
   margin-right: .1em;
}
.mathquill-rendered-math,
.mathquill-rendered-math .mathquill-editable {
   cursor: text;
   font-family: Symbola, "Times New Roman", serif;
}
.mathquill-rendered-math .selection,
.mathquill-editable .selection,
.mathquill-rendered-math .selection .non-leaf,
.mathquill-editable .selection .non-leaf,
.mathquill-rendered-math .selection .scaled,
.mathquill-editable .selection .scaled {
   background: #B4D5FE !important;
   background: Highlight !important;
   color: HighlightText;
   border-color: HighlightText;
}
.mathquill-rendered-math .selection .matrixed,
.mathquill-editable .selection .matrixed {
   background: #39F !important;
}
.mathquill-rendered-math .selection .matrixed-container,
.mathquill-editable .selection .matrixed-container {
   filter: progid:DXImageTransform.Microsoft.Chroma(color='#3399FF') !important;
}
.mathquill-rendered-math .selection.blur,
.mathquill-editable .selection.blur,
.mathquill-rendered-math .selection.blur .non-leaf,
.mathquill-editable .selection.blur .non-leaf,
.mathquill-rendered-math .selection.blur .matrixed,
.mathquill-editable .selection.blur .matrixed {
   background: #D4D4D4 !important;
   color: black;
   border-color: black;
}
.mathquill-rendered-math .selection.blur .matrixed-container,
.mathquill-editable .selection.blur .matrixed-container {
   filter: progid:DXImageTransform.Microsoft.Chroma(color='#D4D4D4') !important;
}
.mathquill-editable .textarea,
.mathquill-rendered-math .textarea {
   position: relative;
   -webkit-user-select: text;
   -moz-user-select: text;
   user-select: text;
}
.mathquill-editable .textarea textarea,
.mathquill-rendered-math .textarea textarea,
.mathquill-editable .selectable,
.mathquill-rendered-math .selectable {
   -webkit-user-select: text;
   -moz-user-select: text;
   user-select: text;
   position: absolute;
   clip: rect(1em 1em 1em 1em);
}
.mathquill-rendered-math .matrixed {
   background: white;
   display: -moz-inline-box;
   display: inline-block;
}
.mathquill-rendered-math .matrixed-container {
   filter: progid:DXImageTransform.Microsoft.Chroma(color='white');
   margin-top: -0.1em;
}

5、在kindeditor-4.1.12/plugins/jme/dialogs/下面新建一个跳转页面，代码如下（注意：2步骤的jme.js中src的跳转目录要换成这个文件的访问路径）：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>插入公式</title>
    <link href="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 class="help">-->
    <!--<p>-->
        <!--<a href="http://www.jmeditor.com" target="_blank">更多模板</a>-->
    <!--</p>-->
    <!--<p>-->
        <!--<a href="http://www.jmeditor.com" target="_blank">报告BUG</a>-->
    <!--</p>-->
    <!--<p>-->
        <!--<a href="http://www.jmeditor.com" target="_blank">关于JMEditor</a>-->
    <!--</p>-->
<!--</div>-->
<div id="mathDiv">
    <p>
        <span id="jme-math"></span>
    </p>
    <p>&nbsp;</p>
</div>
<div class="ad">
</div>
<script type="text/javascript" src="dialog.js"></script>
</body>
</html>

6、修改kindeditor-4.1.12/lang/zh_CN.js，如下图显示：

在这里插入图片描述

最后，测试页面代码：

html的div

<div class="form-group">
        <div class="row">
            <div class="col-sm-6">
                <label class="col-sm-3 control-label">备注</label>
                <div class="col-sm-9">
                    <textarea id="paperTitle" name="paperTitle" cols="100" rows="5" style="width:750px;height:260px;visibility:hidden;float:left;"></textarea>
                </div>
            </div>
        </div>
    </div

引用script和css如下

<link rel="stylesheet" href="${base}/resources/plugins/editor/themes/default/default.css" />
<link rel="stylesheet" href="${base}/resources/plugins/editor/plugins/code/prettify.css" />
<script charset="utf-8" src="${base}/resources/plugins/editor/kindeditor.js"></script>
<script charset="utf-8" src="${base}/resources/plugins/editor/lang/zh_CN.js"></script>
<script charset="utf-8" src="${base}/resources/plugins/editor/plugins/code/prettify.js"></script>

重要的script如下

<script type="text/javascript">
    KindEditor.ready(function(K) {
        var editor1 = K.create('textarea[name="paperTitle"]', {
            height: "350px",
            items: [
                "source", "|", "undo", "redo", "|", "preview", "print", "template", "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",
                "flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap", "pagebreak",
                "anchor", "link", "unlink","|", "jme"
            ],
            langType: lang,
            syncType: "form",
            filterMode: false,
            pagebreakHtml: '<hr class="pageBreak" \/>',
            filePostName: "file",
            cssPath : '${base}/resources/plugins/editor/plugins/code/prettify.css',
            uploadJson: framework.base + "/admin/file/upload.jhtml",
            fileManagerJson: framework.base + "/admin/file/browser.jhtml",
            uploadImageExtension: setting.uploadImageExtension,
            uploadFlashExtension: setting.uploadFlashExtension,
            uploadMediaExtension: setting.uploadMediaExtension,
            uploadFileExtension: setting.uploadFileExtension,
            extraFileUploadParams: {
                token: getCookie("token")
            },
            allowFileManager : true,
            autoHeightMode : true,
            afterCreate : function() {
                this.sync();
            }
        });
        prettyPrint();
    });
</script>

运行效果如下图：

在这里插入图片描述
整合包码云下载地址： https://gitee.com/CallMrStephen/kindeditorJmeditor.git

CallMrStephen

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
富文本kindeditor整合公式编辑器jmeditor，及附上整合包

两个包：kindeditor和jmeditorJMEditor 开源在线公式编辑器| http://www.jmeditor.com/bbs/read.php?tid=57&fid=2kindeditor富文本编辑器 kindeditor V4.1.11 官网下载地址： http://kindeditor.net/down.php**一、解压压缩包：**1、解压公式编辑器如...
复制链接

扫一扫

专栏目录