Skip to content
This repository has been archived by the owner on Jan 6, 2023. It is now read-only.

Dev 1.3.0 grunt编译支持parse的编译, 修改表格排序的demo #44

Merged
merged 3 commits into from
Oct 25, 2013
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,20 @@ module.exports = function ( grunt ) {
Util = {

jsBasePath: '_src/',
parseBasePath: 'parse/',
cssBasePath: 'themes/default/_css/',

fetchScripts: function () {

var sources = fs.readFileSync( "_examples/editor_api.js" );

sources = /\[([^\]]+)\]/.exec( sources );
fetchScripts: function ( readFile, basePath) {

var sources = fs.readFileSync( readFile );
sources = /\[([^\]]+\.js'[^\]]+)\]/.exec( sources );
sources = sources[1].replace( /\/\/.*\n/g, '\n' ).replace( /'|"|\n|\t|\s/g, '' );

sources = sources.split( "," );

sources.forEach( function ( filepath, index ) {

sources[ index ] = Util.jsBasePath + filepath;

sources[ index ] = basePath + filepath;
} );

return sources;

},

fetchStyles: function () {
Expand All @@ -36,9 +30,7 @@ module.exports = function ( grunt ) {
src = [];

while ( filepath = pattern.exec( sources ) ) {

src.push( this.cssBasePath + filepath[ 1 ].replace( /'|"/g, "" ) );

}

return src;
Expand Down Expand Up @@ -68,13 +60,21 @@ module.exports = function ( grunt ) {
options: {
banner: banner + '(function(){\n\n',
footer: '\n\n})()',
process: function(src, filepath) {
process: function(src) {
return src.replace('/_css/', '/css/');
}
},
src: Util.fetchScripts(),
src: Util.fetchScripts( "_examples/editor_api.js", Util.jsBasePath ),
dest: disDir + '<%= pkg.name %>.all.js'
},
parse: {
options: {
banner: banner + '(function(){\n\n',
footer: '\n\n})()'
},
src: Util.fetchScripts( "ueditor.parse.js", Util.parseBasePath ),
dest: disDir + '<%= pkg.name %>.parse.js'
},
css: {
src: Util.fetchStyles(),
dest: disDir + 'themes/default/css/ueditor.css'
Expand All @@ -99,14 +99,18 @@ module.exports = function ( grunt ) {
dest: {
src: disDir + '<%= pkg.name %>.all.js',
dest: disDir + '<%= pkg.name %>.all.min.js'
},
dest1: {
src: disDir + '<%= pkg.name %>.parse.js',
dest: disDir + '<%= pkg.name %>.parse.min.js'
}
},
copy: {
base: {
files: [
{

src: [ 'themes/iframe.css', 'themes/default/dialogbase.css', 'themes/default/images/**', 'dialogs/**', 'lang/**', 'third-party/**', 'ueditor.parse.js' ],
src: [ 'themes/iframe.css', 'themes/default/dialogbase.css', 'themes/default/images/**', 'dialogs/**', 'lang/**', 'third-party/**' ],
dest: disDir

}
Expand Down
135 changes: 74 additions & 61 deletions _examples/sortableDemo.html
Original file line number Diff line number Diff line change
@@ -1,71 +1,84 @@
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>UEditor表格排序示例</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--使用版-->
<!--<script type="text/javascript" charset="utf-8" src="../dist/utf8-php/ueditor.config.js"></script>-->
<!--<script type="text/javascript" charset="utf-8" src="../dist/utf8-php/ueditor.all.js"></script>-->

<!--开发版-->
<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="editor_api.js"> </script>
<script type="text/javascript" charset="utf-8" src="../ueditor.parse.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="../ueditor.parse.js" type="text/javascript"></script>
<script>
// 语法
// uParse(selector,[option])
/*
selector支持
id,class,tagName
*/
/*
目前支持的参数
option:
highlightJsUrl 代码高亮相关js的路径 如果展示有代码高亮,必须给定该属性
highlightCssUrl 代码高亮相关css的路径 如果展示有代码高亮,必须给定该属性
liiconpath 自定义列表样式的图标路径,可以不给定,默认'http://bs.baidu.com/listicon/',
listDefaultPaddingLeft : 自定义列表样式的左边宽度 默认'20',
customRule 可以传入你自己的处理规则函数,函数第一个参数是容器节点
*/

<style type="text/css">
#btns {
margin: 20px 0px;
}
#btns .message{
color:red;
}
#preview {
padding: 10px;
width:1004px;
border: 2px dashed #EEE;
}
</style>
uParse('#content1',{
rootPath : '../'
})
uParse('#content2',{
rootPath : '../',
tableSortCompareFn: function(td1, td2){
var value1 = td1.innerText||td1.textContent,
value2 = td2.innerText||td2.textContent;
return parseInt(value1) % 10 > parseInt(value2) % 10;
}
})
</script>
<title></title>
</head>
<body>
<h1>UEditor表格排序示例</h1>
<div>
<script id="editor" type="text/plain" style="width:1024px;height:300px;">
<table data-sort="sortEnabled" width="992" class="sortEnabled" data-sort-type="reversebynum"> <tbody> <tr class="firstRow"> <td width="165"> 343 </td> <td width="165"> 352 </td> <td width="165"> 323 </td> <td width="165"> 234 </td> <td width="165"> 379 </td> <td width="166"> 782 </td> </tr> <tr> <td width="165"> 341 </td> <td width="165"> 163 </td> <td width="165"> 422 </td> <td width="165"> 234 </td> <td width="165"> 725 </td> <td width="166"> 833 </td> </tr> <tr> <td width="165"> 221 </td> <td width="165"> 456 </td> <td width="165"> 335 </td> <td width="165"> 423 </td> <td width="165"> 445 </td> <td width="166"> 793 </td> </tr> <tr> <td width="165"> 112 </td> <td width="165"> 277 </td> <td width="165"> 563 </td> <td width="165"> 423 </td> <td width="165"> 932 </td> <td width="166"> 425 </td> </tr> </tbody> </table> <p> <span style="font-size: 14px; color: rgb(127, 127, 127);">当前排序: 按照第一列数值大小降序排序</span> </p>
</script>
</div>
<div id="btns">
<input id="updateToPreview" type="button" value="更新编辑器内容到下面区域" />
<span class="message">点击下面表格第一行的单元格进行排序</span>
<h1>表格排序演示</h1>
<p>
<p>
<strong>默认排序方法有五种:</strong><br/>
reversecurrent : 逆序当前<br/>
orderbyasc : 按ASCII字符升序<br/>
reversebyasc : 按ASCII字符降序<br/>
orderbynum : 按数值大小升序<br/>
reversebynum : 按数值大小降序
</p>
<p>
<span style="font-size: 14px; color: rgb(127, 127, 127);">表格data-sort-type属性值为reversebynum,<span style="color:#ff511a; font-weight: bold;">按照数值大小降序排序</span>,点击第一行的单元格进行排序。</span>
</p>
<div id="content1" class="content">
<table data-sort="sortEnabled" width="992" class="sortEnabled" data-sort-type="reversebynum">
<tbody>
<tr class="firstRow"> <td width="165">343</td> <td width="165">352</td> <td width="165">323</td> <td width="165">234</td> <td width="165">379</td> <td width="166">782</td> </tr>
<tr> <td width="165">341</td> <td width="165">163</td> <td width="165">422</td> <td width="165">234</td> <td width="165">725</td> <td width="166">833</td> </tr>
<tr> <td width="165">221</td> <td width="165">456</td> <td width="165">335</td> <td width="165">423</td> <td width="165">445</td> <td width="166">793</td> </tr>
<tr> <td width="165">112</td> <td width="165">277</td> <td width="165">563</td> <td width="165">423</td> <td width="165">932</td> <td width="166">425</td> </tr>
<tr> <td width="165">587</td> <td width="165">175</td> <td width="165">159</td> <td width="165">734</td> <td width="165">582</td> <td width="166">458</td> </tr>
</tbody>
</table>
</div>
<div id="preview">
<p><br /></p>
</div>
</body>
<script type="text/javascript">

//实例化编辑器
var ue = UE.getEditor('editor');
ue.ready(updateToPreview);

//设置按钮监听
$G('updateToPreview').onclick = updateToPreview;

//预览编辑器数据
function updateToPreview(){
$G('preview').innerHTML = ue.getContent();
uParse('#preview',{
rootPath : '../'
});
}

//根据id获取dom
function $G(id){
return document.getElementById(id);
}

<p>
<br />
</p>
<p>
<span style="font-size: 14px; color: rgb(127, 127, 127);">自定义排序,<span style="color:#ff511a; font-weight: bold;">按照个位数排序</span>,点击第一行的单元格进行排序。</span>
</p>
<div id="content2" class="content">
<table data-sort="sortEnabled" width="992" class="sortEnabled">
<tbody>
<tr class="firstRow"> <td width="165">343</td> <td width="165">352</td> <td width="165">323</td> <td width="165">234</td> <td width="165">379</td> <td width="166">782</td> </tr>
<tr> <td width="165">341</td> <td width="165">163</td> <td width="165">422</td> <td width="165">234</td> <td width="165">725</td> <td width="166">833</td> </tr>
<tr> <td width="165">221</td> <td width="165">456</td> <td width="165">335</td> <td width="165">423</td> <td width="165">445</td> <td width="166">793</td> </tr>
<tr> <td width="165">112</td> <td width="165">277</td> <td width="165">563</td> <td width="165">423</td> <td width="165">932</td> <td width="166">425</td> </tr>
<tr> <td width="165">587</td> <td width="165">175</td> <td width="165">159</td> <td width="165">734</td> <td width="165">582</td> <td width="166">458</td> </tr>
</tbody>
</table>
</div>

</script>
</body>
</html>
File renamed without changes.
File renamed without changes.
87 changes: 70 additions & 17 deletions parse/parse.js → _parse/parse.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
(function(){
UE = window.UE || {};
var isIE = !!window.ActiveXObject,
trim = function (str) {
return str.replace(/(^[ \t\n\r]+)|([ \t\n\r]+$)/g, '');
};
var isIE = !!window.ActiveXObject;
//定义utils工具
var utils = {
removeLastbs : function(url){
Expand Down Expand Up @@ -126,7 +123,20 @@
arr.push(item)
}
},
trim:trim,
trim: function (str) {
return str.replace(/(^[ \t\n\r]+)|([ \t\n\r]+$)/g, '');
},
indexOf: function (array, item, start) {
var index = -1;
start = this.isNumber(start) ? start : 0;
this.each(array, function (v, i) {
if (i >= start && v === item) {
index = i;
return false;
}
});
return index;
},
hasClass: function (element, className) {
className = className.replace(/(^[ ]+)|([ ]+$)/g, '').replace(/[ ]{2,}/g, ' ').split(' ');
for (var i = 0, ci, cls = element.className; ci = className[i++];) {
Expand All @@ -138,7 +148,7 @@
},
addClass:function (elm, classNames) {
if(!elm)return;
classNames = trim(classNames).replace(/[ ]{2,}/g,' ').split(' ');
classNames = this.trim(classNames).replace(/[ ]{2,}/g,' ').split(' ');
for(var i = 0,ci,cls = elm.className;ci=classNames[i++];){
if(!new RegExp('\\b' + ci + '\\b').test(cls)){
cls += ' ' + ci;
Expand All @@ -147,27 +157,70 @@
elm.className = utils.trim(cls);
},
removeClass:function (elm, classNames) {
classNames = utils.isArray(classNames) ? classNames :
trim(classNames).replace(/[ ]{2,}/g,' ').split(' ');
classNames = this.isArray(classNames) ? classNames :
this.trim(classNames).replace(/[ ]{2,}/g,' ').split(' ');
for(var i = 0,ci,cls = elm.className;ci=classNames[i++];){
cls = cls.replace(new RegExp('\\b' + ci + '\\b'),'')
}
cls = trim(cls).replace(/[ ]{2,}/g,' ');
cls = this.trim(cls).replace(/[ ]{2,}/g,' ');
if(cls){
elm.className = cls;
}else{
elm.removeAttribute('class');
}
},
on: isIE ? function (element, type, fn) {
element.attachEvent(type, fn);
} : function (element, type, fn) {
element.addEventListener(type, fn);
on: function (element, type, handler) {
var types = this.isArray(type) ? type : type.split(/\s+/),
k = types.length;
if (k) while (k--) {
type = types[k];
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
if (!handler._d) {
handler._d = {
els : []
};
}
var key = type + handler.toString(),index = utils.indexOf(handler._d.els,element);
if (!handler._d[key] || index == -1) {
if(index == -1){
handler._d.els.push(element);
}
if(!handler._d[key]){
handler._d[key] = function (evt) {
return handler.call(evt.srcElement, evt || window.event);
};
}


element.attachEvent('on' + type, handler._d[key]);
}
}
}
element = null;
},
un: isIE ? function (element, type, fn) {
element.detachEvent(type, fn);
} : function (element, type, fn) {
element.removeEventListener(type, fn);
off: function (element, type, handler) {
var types = this.isArray(type) ? type : type.split(/\s+/),
k = types.length;
if (k) while (k--) {
type = types[k];
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
var key = type + handler.toString();
try{
element.detachEvent('on' + type, handler._d ? handler._d[key] : handler);
}catch(e){}
if (handler._d && handler._d[key]) {
var index = utils.indexOf(handler._d.els,element);
if(index!=-1){
handler._d.els.splice(index,1);
}
handler._d.els.length == 0 && delete handler._d[key];
}
}
}
},
loadFile : function () {
var tmpList = [];
Expand Down
16 changes: 4 additions & 12 deletions parse/table.js → _parse/table.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
UE.parse.register('table', function (utils) {
var root = this.root,
var me = this,
root = this.root,
tables = root.getElementsByTagName('table');
if (tables.length) {
var selector = this.selector;
Expand Down Expand Up @@ -36,10 +37,10 @@ UE.parse.register('table', function (utils) {
var target = e.target || e.srcElement,
cell = findParentByTagName(target, ['td', 'th']);
var table = findParentByTagName(target, 'table'),
colIndex = indexOf(table.rows[0].cells, cell),
colIndex = utils.indexOf(table.rows[0].cells, cell),
sortType = table.getAttribute('data-sort-type');
if(colIndex != -1) {
sortTable(table, colIndex, sortType);
sortTable(table, colIndex, me.tableSortCompareFn || sortType);
updateTable(table);
}
});
Expand All @@ -58,15 +59,6 @@ UE.parse.register('table', function (utils) {
}
return null;
}
//查找项在数组中的索引
function indexOf(arr, item) {
for (var i = 0; i < arr.length; i++) {
if(arr[i] === item) {
return i;
}
}
return -1;
}
//表格排序
function sortTable(table, sortByCellIndex, compareFn) {
var rows = table.rows,
Expand Down
Loading