BeWithYou

胡搞的技术博客

  1. 首页
  2. web前端/Javascript
  3. Codeigniter集成UEditor

Codeigniter集成UEditor


UEditor是百度出品的一款富文本编辑器。简单来说还是蛮好用的,功能很全,所以构建博客的时候决定采用它。之前在duapp环境中用过,需要改很多东西,主要是因为duapp的环境关于存储和上传必须使用百度提供的特定api实现。现在直接在虚拟主机上使用,相比之下要改的东西少了好多。

这里简单记录一下集成UEditor遇到的一些问题。

1. 部署环境

用的是php框架Codeigniter,我直接把ueditor文件夹放在了项目根目录下的assets中,此处是用于放静态文件资源的。view层中用到ueditor相关的路径则设定为"/assets/ueditor/..."。文件上传功能,需要在根目录下建立ueditor/upload/php/文件夹,并且给予相应的权限。

2. 百度音乐功能

百度音乐把来自其他域名的请求都屏蔽掉了,于是我们只能采用iframe跨域大法。

修改ueditor的dialogs/music/music.js文件,将原本拼出来的embed标签改为iframe方式。如下,注释掉的是原来拼成的embed标签:

_buildMusicHtml:function (playerUrl) {
    var html = '<iframe hidden="true" style="display:none" src="'+ playerUrl +'" width="400" height="95">';

    //var html = '<embed class="BDE_try_Music" allowfullscreen="false" pluginspage="http://www.macromedia.com/go/getflashplayer"';
    //html += ' src="' + playerUrl + '"';
    //html += ' width="1" height="1" style="position:absolute;left:-2000px;"';
    //html += ' type="application/x-shockwave-flash" wmode="transparent" play="true" loop="false"';
    //html += ' menu="false" allowscriptaccess="never" scale="noborder">';
    return html;
},

 这样只能解决试听功能,插入内容照样是老的embed标签。所以还需要改ueditor.all.min.js,如下,改这一坨。由于是压缩过的js文件,所以直接贴图了,顺便测下ueditor的截图功能。

blob.png

但是还有个问题,在ios上浏览的时候,是不支持flash播放的,如果用这种iframe的方式,系统有时会自作主张把swf文件下载下来。所以后面应当避免使用这样的组件。可以考虑用H5的播放器,网上也见到过H5的音乐播放器,比如虾米音乐的。这个留到后面去做吧!

3. 去掉ctrl+enter自动提交表单的功能

编辑器本身自带这个快捷键,不人性。我们将它去掉。同样是改ueditor.all.min.js。找到相应的注册地方将其干掉。

UE.plugin.register("autosubmit",function(){return{shortcutkey:{autosubmit:"ctrl+13"},commands:{autosubmit:{execCommand:function(){var d=f.findParentByTagName(this.iframe,"form",!1);d&&!1!==this.fireEvent("beforesubmit")&&(this.sync(),
d.submit())}}}}});

4. 修复代码语法高亮插件不换行和行号错位的问题

Ueditor使用的是第三方语法高亮插件SyntaxHighlighter。也不知道是什么版本的,反正是有明显的bug的,开发人员为什么不来修一下呢。最大的问题就是如果一行代码太长,就会造成代码块过宽。这里网上搜索了解决方法:

首先解决不换行的问题,修改shCoreDefault.css,加上word-break:break-all:

.syntaxhighlighter {
    width: 100% !important;
    margin: .3em 0 .3em 0 !important;
    position: relative !important;
    overflow: auto !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    border-collapse: separate !important;
    word-break: break-all;
}

然后解决双击以后文本框大小不对错位问题,修改shCore.js,为文本框增加高度:

/**
 * Quick code mouse double click handler.
 */
function quickCodeHandler(e)
{
    var target = e.target,
        highlighterDiv = findParentElement(target, '.syntaxhighlighter'),
        container = findParentElement(target, '.container'),
        textarea = document.createElement('textarea'),
        highlighter
        ;

    if (!container || !highlighterDiv || findElement(container, 'textarea'))
        return;

    highlighter = getHighlighterById(highlighterDiv.id);

    // add source class name
    addClass(highlighterDiv, 'source');

    // Have to go over each line and grab it's text, can't just do it on the
    // container because Firefox loses all \n where as Webkit doesn't.
    var lines = container.childNodes,
        code = []
        ;

    for (var i = 0; i < lines.length; i++)
        code.push(lines[i].innerText || lines[i].textContent);

    // using \r instead of \r or \r\n makes this work equally well on IE, FF and Webkit
    code = code.join('\r');

    // For Webkit browsers, replace nbsp with a breaking space
    code = code.replace(/\u00a0/g, " ");

    // inject <textarea/> tag
    textarea.appendChild(document.createTextNode(code));
    textarea.style.height = "100%";//加上这一行,指定文本框的高度为100%
    container.appendChild(textarea);

    // preselect all text
    textarea.focus();
    textarea.select();

    // set up handler for lost focus
    attachEvent(textarea, 'blur', function(e)
    {
        textarea.parentNode.removeChild(textarea);
        removeClass(highlighterDiv, 'source');
    });
};

最后是代码行号显示错位的问题,加上一段js人工解决:

//处理syntaxHighlighter换行问题
$(function () {
    fixLineNum();
});

function fixLineNum()
{
    // Line wrap back
    var shLineWrap = function () {
        $('.syntaxhighlighter').each(function () {
            // Fetch
            var $sh = $(this),
                $gutter = $sh.find('td.gutter'),
                $code = $sh.find('td.code')
                ;
            // Cycle through lines
            $gutter.children('.line').each(function (i) {
                // Fetch
                var $gutterLine = $(this),
                    $codeLine = $code.find('.line:nth-child(' + (i + 1) + ')')
                    ;
                //alert($gutterLine);
                // Fetch height
                var height = $codeLine.height() || 0;
                if (!height) {
                    height = 'auto';
                }
                else {
                    height = height += 'px';
                    //alert(height);
                }
                // Copy height over
                $gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0
//                    console.log($gutterLine.height(), height, $gutterLine.text(), $codeLine);
            });
        });
    };

    // Line wrap back when syntax highlighter has done it's stuff
    var shLineWrapWhenReady = function () {
        if ($('.syntaxhighlighter').length === 0) {
            setTimeout(shLineWrapWhenReady, 10);
        }
        else {
            shLineWrap();
        }
    };

    // Fire
    shLineWrapWhenReady();
}

随便搜了一首周董的歌,测试下音乐功能   


装了一个91fm的插件,可以放其他源的音乐了

回到顶部