Jul
12
xheditor是建立在JQ上的一个富文本编辑器。
今天就拿它来做了一个网站,但是却需要一个内容分页的功能。
最后决定在xheditor中加入一个分页符按钮来实现这个功能。
在xheditor中,我不用封装好的版本,而选用源代码版的xheditor-zh-cn.js
在xheditor-zh-cn.js中加入
在 var toolsThemes={ 中的 full: 中加入 Custom 一项
在 switch(cmd)中加入
当然,样式也自然是要改的
我们打开我选择的样式xheditor_skin/vista中的ui.css文件。
加入:
我们不要忘记了在img/buttonbg.gif这个图片的-692px 0的位置上加上分页符的小图标。
最后打开编辑器,就可以看到一个下拉框了,点击里面的分页,即可在文本域产生一个$show_page$的内容了。
然后我们就可以在php或aspx又或jsp中来对$show_page$进行操作了。
一般情况下都是分页生成隐藏/显示的层,通过JS来操作显示,其实是一种伪分页。当然,也可以用语句来操作。
那都是看各自的手段了。
今天就拿它来做了一个网站,但是却需要一个内容分页的功能。
最后决定在xheditor中加入一个分页符按钮来实现这个功能。
在xheditor中,我不用封装好的版本,而选用源代码版的xheditor-zh-cn.js
在xheditor-zh-cn.js中加入
var customList=[{s:'分页标签',v:'$show_page$',t:'分页标签'},{s:'Flv 视频',v:'[Flv width="400" height="300"]视频地址[/Flv]',t:'Flv视频'},{s:'插入引用',v:'[Quote title="引用"]引用代码[/Quote]',t:'运行代码'},{s:'插入代码',v:'[Code]运行代码
',t:'运行代码'}];[/code]在 var toolsThemes={ 中的 full: 中加入 Custom 一项
在 switch(cmd)中加入
case 'custom':
_this.showMenu(customList,function(v){_this.pasteText(v);});
break;
这一项。_this.showMenu(customList,function(v){_this.pasteText(v);});
break;
当然,样式也自然是要改的
我们打开我选择的样式xheditor_skin/vista中的ui.css文件。
加入:
.xhe_vista span.xhEdtSeparator {display:block;height:20px;width:4px;background:url(img/icons.gif) no-repeat -692px 0;margin:0 2px}
.xhe_vista span.xhEdtBtnCustom {background-position:-640px 0}
.xhe_vista span.xhEdtBtnCustom {background-position:-640px 0}
我们不要忘记了在img/buttonbg.gif这个图片的-692px 0的位置上加上分页符的小图标。
最后打开编辑器,就可以看到一个下拉框了,点击里面的分页,即可在文本域产生一个$show_page$的内容了。
然后我们就可以在php或aspx又或jsp中来对$show_page$进行操作了。
一般情况下都是分页生成隐藏/显示的层,通过JS来操作显示,其实是一种伪分页。当然,也可以用语句来操作。
那都是看各自的手段了。



JQ来打造网站图片延迟载
jQuery.Switc
