neditor实现配置数学公式

首先还是需要官方插件的，毕竟neditor底层还是ueditor，下载地址及文档

接下来我们来根据文档进行配置，页面引入script标签、toolbars增加kityformula，这时就可以正常看到数学公式的界面了，如果工具栏图标显示空白暂且不用管，我们后面描述。

我们先随便选择一个标签来F12看一下：

可以看到，这里的图片是base64位格式的，所以按常理来说应该把他转成neditor本地图片再做上传处理，但是，毕竟neditor不同于ueditor，这层配置我是怎么也找不到，ne呢他的请求位置又是在neditor.services配置，（不懂的可以看我的这一片博客：上传图片这里不做累缀），索性一恒心，干脆不要这一层配置，直接以base64格式上传。

首先，我们不需要配置涂鸦上传，我们用自己的一套配置
1、此步需要官方文档中的 ue.getKfContent(function(content){“你自己的提交逻辑”})，我们需要这个方法，在提交之前把图片格式转换成服务器地址图片。

form.on('submit(save)', function () {
        ue.getKfContent(function(content){
            $.post(
                    '/sectionHandle/save',
                    {
                        'section.id': '${section?.id}',
                        'section.content': ue.getContent()
                    },
                    function (result) {
                        if (result == 'success')
                            layer.msg("成功！")
                        else
                            layer.msg(result);
                    }
            );
        })

      return false;
    });

2、neditor.config.js中加入如下配置

3、neditor.service.js增加如下方法（此方法为接收base64的图片的方法，我用的是oss上传，后台写法自行百度）：

4、最重要一步走：

打开getKfContent.js文件，修改代码：

/**
 * Created by zhangbo21 on 14-9-2.
 */
/*
 * getKfContent : 将image的src从base64替换为文件名
 * param : callback -- 回调函数 其参数为替换之后的内容
 * return : void
 * */

UE.Editor.prototype.getKfContent = function(callback){


    var me = this;
    var actionUrl = me.getActionUrl(me.getOpt('base64ActionName')),
        params = UE.utils.serializeParam(me.queryCommandValue('serverparam')) || '',
        url = UE.utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
    // 找到所有的base64
    var count = 0;
    var imgs =me.body.getElementsByTagName('img');
    var base64Imgs = [];
    UE.utils.each(imgs, function(item){
        var imgType = item.getAttribute('src').match(/^[^;]+/)[0];
        if ( imgType === 'data:image/png') {
            base64Imgs.push(item);
        }
    });

    if (base64Imgs.length == 0){
        execCallback();
    } else {
        UE.utils.each(base64Imgs, function(item){

            var base64str = item.getAttribute('src');
            $.post(
                url,
                {
                    'base64str': base64str,
                },
                function (result) {
                    if (result.code == 200){
                        item.setAttribute('src', result.url);
                        item.setAttribute('_src', result.url);

                        count++;

                        execCallback();
                    }else{
                        console.error("上传图片服务返回失败："+result.message);
                        count++;
                        execCallback();
                    }
                }
            );
           /* var opt ={};
            opt[me.getOpt('scrawlFieldName')]= item.getAttribute('src').replace(/^[^,]+,/, '');
            opt.onsuccess = function(xhr){
                var json = UE.utils.str2json(xhr.responseText),
                    url = me.options.scrawlUrlPrefix + json.url;

                item.setAttribute('src', url);
                item.setAttribute('_src', url);

                count++;

                execCallback();
            }
            opt.onerror = function(err){
                console.error(err);
                count++;

                execCallback();
            }


            UE.ajax.request(url, opt);*/

        });
    }

    function execCallback(){
        if (count >= base64Imgs.length) {
            me.sync();
            callback(me.getContent());
        }
    }
};

到这里就可以正常使用了：

5、最后，如果有工具栏图标显示空白的那么找到neditor.css，加入如下代码：

.edui-for-插入kityformula .edui-button-wrap{
    background: url("../images/kf-icon.png") no-repeat center; /* 图片位置自行选择*/
    background-size: 15px 15px;
    /*background: red;*/
}