RubyGems - ueditor_rails - Versions diffs - 0.0.1 - Mend

ueditor_rails 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (355) hide show

data/vendor/assets/javascripts/ueditor/dialogs/video/images/center_focus.jpg ADDED Viewed

Binary file

data/vendor/assets/javascripts/ueditor/dialogs/video/images/left_focus.jpg ADDED Viewed

Binary file

data/vendor/assets/javascripts/ueditor/dialogs/video/images/none_focus.jpg ADDED Viewed

Binary file

data/vendor/assets/javascripts/ueditor/dialogs/video/images/right_focus.jpg ADDED Viewed

Binary file

data/vendor/assets/javascripts/ueditor/dialogs/video/video.css ADDED Viewed

@@ -0,0 +1,59 @@
+@charset "utf-8";
+.wrapper{ width: 570px;_width:575px;margin: 10px auto; zoom:1;position: relative}
+.tabbody{height:335px;}
+.panel { position: absolute;width:100%; height:100%;background: #fff;}
+.panel table td{vertical-align: middle;}
+#videoUrl {
+    width: 490px;
+    height: 21px;
+    line-height: 21px;
+    margin: 8px 5px;
+    background: #FFF;
+    border: 1px solid #d7d7d7;
+}
+#videoSearchTxt{margin-left:15px;background: #FFF;width:200px;height:21px;line-height:21px;border: 1px solid #d7d7d7;}
+#searchList{width: 570px;overflow: auto;zoom:1;height: 270px;}
+#searchList div{float: left;width: 120px;height: 135px;margin: 5px 15px;}
+#searchList img{margin: 2px 8px;cursor: pointer;border: 2px solid #fff} /*不用缩略图*/
+#searchList p{margin-left: 10px;}
+#videoType{
+    width: 65px;
+    height: 23px;
+    line-height: 22px;
+    border: 1px solid #d7d7d7;
+}
+#videoSearchBtn,#videoSearchReset{
+    /*width: 80px;*/
+    height: 25px;
+    line-height: 25px;
+    background: #eee;
+    border: 1px solid #d7d7d7;
+    cursor: pointer;
+    padding: 0 5px;
+}
+#preview{width: 420px; margin-left: 10px; _margin-left:5px; height: 280px;background-color: #ddd;float: left}
+#videoInfo {width: 120px;float: left;margin-left: 10px;_margin-left:7px;}
+fieldset{
+    border: 1px solid #ddd;
+    padding-left: 5px;
+    margin-bottom: 20px;
+    padding-bottom: 5px;
+    width: 115px;
+}
+fieldset legend{font-weight: bold;}
+fieldset p{line-height: 30px;}
+fieldset input.txt{
+    width: 65px;
+    height: 21px;
+    line-height: 21px;
+    margin: 8px 5px;
+    background: #FFF;
+    border: 1px solid #d7d7d7;
+}
+label.url{font-weight: bold;margin-left: 5px;color: #06c;}
+#videoFloat div{cursor:pointer;opacity: 0.5;filter: alpha(opacity = 50);margin:9px;_margin:5px;width:38px;height:36px;float:left;}
+#videoFloat .focus{opacity: 1;filter: alpha(opacity = 100)}
+span.view{display: inline-block;width: 30px;float: right;cursor: pointer;color: blue}

data/vendor/assets/javascripts/ueditor/dialogs/video/video.html.erb ADDED Viewed

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+        "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <script type="text/javascript" src="<%= asset_path 'ueditor/dialogs/internal.js' %>"></script>
+    <link rel="stylesheet" type="text/css" href="<%= asset_path 'ueditor/dialogs/video/video.css' %>" />
+</head>
+<body>
+<div class="wrapper">
+    <div id="videoTab">
+        <div id="tabHeads" class="tabhead">
+            <span tabSrc="video" class="focus"><var id="lang_tab_insertV"></var></span>
+            <span tabSrc="videoSearch"><var id="lang_tab_searchV"></var></span>
+        </div>
+        <div id="tabBodys" class="tabbody">
+            <div id="video" class="panel">
+               <table><tr><td><label for="videoUrl" class="url"><var id="lang_video_url"></var></label></td><td><input id="videoUrl" type="text"></td></tr></table>
+               <div id="preview"></div>
+               <div id="videoInfo">
+                   <fieldset>
+                       <legend><var id="lang_video_size"></var></legend>
+                       <table>
+                           <tr><td><label for="videoWidth"><var id="lang_videoW"></var></label></td><td><input class="txt" id="videoWidth" type="text"/></td></tr>
+                           <tr><td><label for="videoHeight"><var id="lang_videoH"></var></label></td><td><input class="txt" id="videoHeight" type="text"/></td></tr>
+                       </table>
+                   </fieldset>
+                   <fieldset>
+                      <legend><var id="lang_alignment"></var></legend>
+                      <div id="videoFloat"></div>
+                  </fieldset>
+               </div>
+            </div>
+            <div id="videoSearch" class="panel" style="display: none">
+                <table style="margin-top: 5px;">
+                    <tr>
+                        <td><input id="videoSearchTxt"  type="text" /></td>
+                        <td>
+                            <select id="videoType">
+                                <option value="0"></option>
+                                <option value="29"></option>
+                                <option value="1"></option>
+                                <option value="5"></option>
+                                <option value="15"></option>
+                                <option value="21"></option>
+                                <option value="31"></option>
+                            </select>
+                        </td>
+                        <td><input id="videoSearchBtn" type="button"/></td>
+                        <td><input id="videoSearchReset" type="button" /></td>
+                    </tr>
+                </table>
+                <div id="searchList"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="<%= asset_path 'ueditor/dialogs/video/video.js' %>"></script>
+<script type="text/javascript">
+    window.onload = function(){
+        video.init();
+        $focus($G("videoUrl"));
+    };
+</script>
+</body>
+</html>

data/vendor/assets/javascripts/ueditor/dialogs/video/video.js ADDED Viewed

@@ -0,0 +1,402 @@
+/**
+ * Created by JetBrains PhpStorm.
+ * User: taoqili
+ * Date: 12-2-20
+ * Time: 上午11:19
+ * To change this template use File | Settings | File Templates.
+ */
+var video = {};
+(function(){
+    video.init = function(){
+        switchTab("videoTab");
+        createAlignButton( ["videoFloat"] );
+        addUrlChangeListener($G("videoUrl"));
+        addOkListener();
+        addSearchListener();
+        //编辑视频时初始化相关信息
+        (function(){
+            var img = editor.selection.getRange().getClosedNode(),url;
+            if(img && img.className == "edui-faked-video"){
+                $G("videoUrl").value = url = img.getAttribute("_url");
+                $G("videoWidth").value = img.width;
+                $G("videoHeight").value = img.height;
+                var align = domUtils.getComputedStyle(img,"float"),
+                    parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");
+                updateAlignButton(parentAlign==="center"?"center":align);
+            }
+            createPreviewVideo(url);
+        })();
+    };
+    /**
+     * 监听确认和取消两个按钮事件，用户执行插入或者清空正在播放的视频实例操作
+     */
+    function addOkListener(){
+        dialog.onok = function(){
+            $G("preview").innerHTML = "";
+            var currentTab =  findFocus("tabHeads","tabSrc");
+            switch(currentTab){
+                case "video":
+                    return insertSingle();
+                    break;
+                case "videoSearch":
+                    return insertSearch("searchList");
+                    break;
+            }
+        };
+        dialog.oncancel = function(){
+            $G("preview").innerHTML = "";
+        };
+    }
+    function selectTxt(node){
+        if(node.select){
+            node.select();
+        }else{
+            var r = node.createTextRange && node.createTextRange();
+            r.select();
+        }
+    }
+    /**
+     * 依据传入的align值更新按钮信息
+     * @param align
+     */
+    function updateAlignButton( align ) {
+        var aligns = $G( "videoFloat" ).children;
+        for ( var i = 0, ci; ci = aligns[i++]; ) {
+            if ( ci.getAttribute( "name" ) == align ) {
+                if ( ci.className !="focus" ) {
+                    ci.className = "focus";
+                }
+            } else {
+                if ( ci.className =="focus" ) {
+                    ci.className = "";
+                }
+            }
+        }
+    }
+    /**
+     * 将单个视频信息插入编辑器中
+     */
+    function insertSingle(){
+        var width = $G("videoWidth"),
+            height = $G("videoHeight"),
+            url=$G('videoUrl').value,
+            align = findFocus("videoFloat","name");
+        if(!url) return false;
+        if ( !checkNum( [width, height] ) ) return false;
+        editor.execCommand('insertvideo', {
+            url: convert_url(url),
+            width: width.value,
+            height: height.value,
+            align: align
+        });
+    }
+    /**
+     * 将元素id下的所有代表视频的图片插入编辑器中
+     * @param id
+     */
+    function insertSearch(id){
+        var imgs = domUtils.getElementsByTagName($G(id),"img"),
+            videoObjs=[];
+        for(var i=0,img; img=imgs[i++];){
+            if(img.getAttribute("selected")){
+                videoObjs.push({
+                    url:img.getAttribute("ue_video_url"),
+                    width:420,
+                    height:280,
+                    align:"none"
+                });
+            }
+        }
+        editor.execCommand('insertvideo',videoObjs);
+    }
+    /**
+     * 找到id下具有focus类的节点并返回该节点下的某个属性
+     * @param id
+     * @param returnProperty
+     */
+    function findFocus( id, returnProperty ) {
+        var tabs = $G( id ).children,
+                property;
+        for ( var i = 0, ci; ci = tabs[i++]; ) {
+            if ( ci.className=="focus" ) {
+                property = ci.getAttribute( returnProperty );
+                break;
+            }
+        }
+        return property;
+    }
+    function convert_url(s){
+        return s.replace(/http:\/\/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i,"http://www.tudou.com/v/$1")
+            .replace(/http:\/\/www\.youtube\.com\/watch\?v=([\w\-]+)/i,"http://www.youtube.com/v/$1")
+            .replace(/http:\/\/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i,"http://player.youku.com/player.php/sid/$1")
+            .replace(/http:\/\/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "http://player.56.com/v_$1.swf")
+            .replace(/http:\/\/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "http://player.56.com/v_$1.swf")
+            .replace(/http:\/\/v\.ku6\.com\/.+\/([^.]+)\.html/i, "http://player.ku6.com/refer/$1/v.swf");
+    }
+    /**
+      * 检测传入的所有input框中输入的长宽是否是正数
+      * @param nodes input框集合，
+      */
+     function checkNum( nodes ) {
+         for ( var i = 0, ci; ci = nodes[i++]; ) {
+             var value = ci.value;
+             if ( !isNumber( value ) && value) {
+                 alert( lang.numError );
+                 ci.value = "";
+                 ci.focus();
+                 return false;
+             }
+         }
+         return true;
+     }
+    /**
+     * 数字判断
+     * @param value
+     */
+    function isNumber( value ) {
+        return /(0|^[1-9]\d*$)/.test( value );
+    }
+    /**
+     * tab切换
+     * @param tabParentId
+     * @param keepFocus   当此值为真时，切换按钮上会保留focus的样式
+     */
+    function switchTab( tabParentId,keepFocus ) {
+        var tabElements = $G( tabParentId ).children,
+                tabHeads = tabElements[0].children,
+                tabBodys = tabElements[1].children;
+        for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
+            var head = tabHeads[i];
+            domUtils.on( head, "click", function () {
+                //head样式更改
+                for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
+                    if(!keepFocus)tabHeads[k].className = "";
+                }
+                this.className = "focus";
+                //body显隐
+                var tabSrc = this.getAttribute( "tabSrc" );
+                for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
+                    var body = tabBodys[j],
+                        id = body.getAttribute( "id" );
+                    if ( id == tabSrc ) {
+                        body.style.display = "";
+                        if(id=="videoSearch"){
+                            selectTxt($G("videoSearchTxt"));
+                        }
+                        if(id=="video"){
+                            selectTxt($G("videoUrl"));
+                        }
+                    } else {
+                        body.style.display = "none";
+                    }
+                }
+            } );
+        }
+    }
+    /**
+      * 创建图片浮动选择按钮
+      * @param ids
+      */
+     function createAlignButton( ids ) {
+         for ( var i = 0, ci; ci = ids[i++]; ) {
+             var floatContainer = $G( ci ),
+                     nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight, "center":lang.block};
+             for ( var j in nameMaps ) {
+                 var div = document.createElement( "div" );
+                 div.setAttribute( "name", j );
+                 if ( j == "none" ) div.className="focus";
+                 div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
+                 div.setAttribute( "title", nameMaps[j] );
+                 floatContainer.appendChild( div );
+             }
+             switchSelect( ci );
+         }
+     }
+    /**
+     * 选择切换
+     * @param selectParentId
+     */
+    function switchSelect( selectParentId ) {
+        var selects = $G( selectParentId ).children;
+        for ( var i = 0, ci; ci = selects[i++]; ) {
+            domUtils.on( ci, "click", function () {
+                for ( var j = 0, cj; cj = selects[j++]; ) {
+                    cj.className = "";
+                    cj.removeAttribute && cj.removeAttribute( "class" );
+                }
+                this.className = "focus";
+            } )
+        }
+    }
+    /**
+     * 监听url改变事件
+     * @param url
+     */
+    function addUrlChangeListener(url){
+        if (browser.ie) {
+            url.onpropertychange = function () {
+                createPreviewVideo( this.value );
+            }
+        } else {
+            url.addEventListener( "input", function () {
+                createPreviewVideo( this.value );
+            }, false );
+        }
+    }
+    /**
+     * 根据url生成视频预览
+     * @param url
+     */
+    function createPreviewVideo(url){
+        if ( !url )return;
+		var matches = url.match(/youtu.be\/(\w+)$/) || url.match(/youtube\.com\/watch\?v=(\w+)/) || url.match(/youtube.com\/v\/(\w+)/),
+            youku = url.match(/youku\.com\/v_show\/id_(\w+)/),
+            youkuPlay = /player\.youku\.com/ig.test(url);
+        if(!youkuPlay){
+            if (matches){
+                url = "https://www.youtube.com/v/" + matches[1] + "?version=3&feature=player_embedded";
+            }else if(youku){
+                url = "http://player.youku.com/player.php/sid/"+youku[1]+"/v.swf"
+            }else if(!endWith(url,[".swf",".flv",".wmv"])){
+                $G("preview").innerHTML = lang.urlError;
+                return;
+            }
+        }else{
+            url = url.replace(/\?f=.*/,"");
+        }
+        $G("preview").innerHTML = '<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
+        ' src="' + url + '"' +
+        ' width="' + 420  + '"' +
+        ' height="' + 280  + '"' +
+        ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" ></embed>';
+    }
+    /**
+     * 末尾字符检测
+     * @param str
+     * @param endStrArr
+     */
+    function endWith(str,endStrArr){
+        for(var i=0,len = endStrArr.length;i<len;i++){
+            var tmp = endStrArr[i];
+            if(str.length - tmp.length<0) return false;
+            if(str.substring(str.length-tmp.length)==tmp){
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * ajax获取视频信息
+     */
+    function getMovie(){
+        var keywordInput =  $G("videoSearchTxt");
+        if(!keywordInput.getAttribute("hasClick") ||!keywordInput.value){
+            selectTxt(keywordInput);
+            return;
+        }
+        $G( "searchList" ).innerHTML = lang.loading;
+        var keyword = keywordInput.value,
+                type = $G("videoType").value,
+            str="";
+        ajax.request(editor.options.getMovieUrl,{
+            searchKey:keyword,
+            videoType:type,
+            onsuccess:function(xhr){
+                try{
+                    var info = eval("("+xhr.responseText+")");
+                }catch(e){
+                    return;
+                }
+                var videos = info.multiPageResult.results;
+                var html=["<table width='530'>"];
+                for(var i=0,ci;ci = videos[i++];){
+                    html.push(
+                        "<tr>" +
+                            "<td><img title='"+lang.clickToSelect+"' ue_video_url='"+ci.outerPlayerUrl+"' alt='"+ci.tags+"' width='106' height='80' src='"+ci.picUrl+"' /> </td>" +
+                            "<td>" +
+                                "<p><a target='_blank' title='"+lang.goToSource+"' href='"+ci.itemUrl+"'>"+ci.title.substr(0,30)+"</a></p>" +
+                                "<p style='height: 62px;line-height: 20px' title='"+ci.description+"'> "+ ci.description.substr(0,95) +" </p>" +
+                            "</td>" +
+                       "</tr>"
+                    );
+                }
+                html.push("</table>");
+                $G("searchList").innerHTML = str = html.length ==2 ?lang.noVideo : html.join("");
+                var imgs = domUtils.getElementsByTagName($G("searchList"),"img");
+                if(!imgs)return;
+                for(var i=0,img;img = imgs[i++];){
+                    domUtils.on(img,"click",function(){
+                        changeSelected(this);
+                    })
+                }
+            }
+        });
+    }
+    /**
+     * 改变对象o的选中状态
+     * @param o
+     */
+    function changeSelected(o){
+        if ( o.getAttribute( "selected" ) ) {
+            o.removeAttribute( "selected" );
+            o.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
+        } else {
+            o.setAttribute( "selected", "true" );
+            o.style.cssText = "filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;border:2px solid blue;";
+        }
+    }
+    /**
+     * 视频搜索相关注册事件
+     */
+    function addSearchListener(){
+        domUtils.on($G("videoSearchBtn"),"click",getMovie);
+        domUtils.on($G( "videoSearchTxt" ),"click",function () {
+            if ( this.value == lang.static.videoSearchTxt.value ) {
+                this.value = "";
+            }
+            this.setAttribute("hasClick","true");
+            selectTxt(this);
+        });
+        $G( "videoSearchTxt" ).onkeyup = function(){
+            this.setAttribute("hasClick","true");
+            this.onkeyup = null;
+        };
+        domUtils.on($G( "videoSearchReset" ),"click",function () {
+            var txt = $G( "videoSearchTxt" );
+            txt.value = "";
+            selectTxt(txt);
+            $G( "searchList" ).innerHTML = "";
+        });
+        domUtils.on($G( "videoType" ),"change", getMovie);
+        domUtils.on($G( "videoSearchTxt" ), "keyup", function ( evt ) {
+            if ( evt.keyCode == 13 ) {
+                getMovie();
+            }
+        } )
+    }
+})();