RubyGems - ueditor_rails - Versions diffs - 0.0.2 → 0.0.4 - Mend

ueditor_rails 0.0.2 → 0.0.4

Files changed (105) hide show

data/vendor/assets/javascripts/ueditor/dialogs/template/template.js ADDED

@@ -0,0 +1,53 @@
+/**
+ * Created with JetBrains PhpStorm.
+ * User: xuheng
+ * Date: 12-8-8
+ * Time: 下午2:09
+ * To change this template use File | Settings | File Templates.
+ */
+(function () {
+    var me = editor,
+            preview = $G( "preview" ),
+            preitem = $G( "preitem" ),
+            tmps = templates,
+            currentTmp;
+    var initPre = function () {
+        var str = "";
+        for ( var i = 0, tmp; tmp = tmps[i++]; ) {
+            str += '<div class="preitem" onclick="pre(' + i + ')"><img src="' + "images/" + tmp.pre + '" ' + (tmp.title ? "alt=" + tmp.title + " title=" + tmp.title + "" : "") + '></div>';
+        }
+        preitem.innerHTML = str;
+    };
+    var pre = function ( n ) {
+        var tmp = tmps[n - 1];
+        currentTmp = tmp;
+        clearItem();
+        domUtils.setStyles( preitem.childNodes[n - 1], {
+            "background-color":"lemonChiffon",
+            "border":"#ccc 1px solid"
+        } );
+        preview.innerHTML = tmp.preHtml ? tmp.preHtml : "";
+    };
+    var clearItem = function () {
+        var items = preitem.children;
+        for ( var i = 0, item; item = items[i++]; ) {
+            domUtils.setStyles( item, {
+                "background-color":"",
+                "border":"white 1px solid"
+            } );
+        }
+    };
+    dialog.onok = function () {
+        if ( !$G( "issave" ).checked ){
+            me.execCommand( "cleardoc" );
+        }
+        var obj = {
+            html:currentTmp && currentTmp.html
+        };
+        me.execCommand( "template", obj );
+    };
+    initPre();
+    window.pre = pre;
+    pre(2)
+})();

data/vendor/assets/javascripts/ueditor/dialogs/video/video.html.erb CHANGED

@@ -2,66 +2,77 @@
         "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' %>" />
+  <title></title>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+  <%= stylesheet_link_tag '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 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>
+<%= javascript_include_tag 'ueditor/dialogs/internal.js' %>
+<%= javascript_include_tag 'ueditor/dialogs/video/video.js' %>
 <script type="text/javascript">
-    window.onload = function(){
-        video.init();
-        $focus($G("videoUrl"));
-    };
+  window.onload = function () {
+    video.init();
+    $focus($G("videoUrl"));
+  };
 </script>
 </body>
 </html>

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

@@ -0,0 +1,409 @@
+/**
+ * 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.align_directions = {
+    center: "<%= asset_path 'ueditor/dialogs/video/images/center_focus.jpg' %>",
+    left: "<%= asset_path 'ueditor/dialogs/video/images/left_focus.jpg' %>",
+    none: "<%= asset_path 'ueditor/dialogs/video/images/none_focus.jpg' %>",
+    right: "<%= asset_path 'ueditor/dialogs/video/images/right_focus.jpg' %>"
+  };
+  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(" + video.align_directions[j] + ");";
+        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();
+      }
+    })
+  }
+})();