关于Rte编辑器和Htmlarea做文章的简介
文章列表在博客里的常用方法是标题加内容,然而大部份文章分有很少,如果全部显示则会影响版面显示效果。
出于这种情况,很多博客用的是加一个摘要字段,让用户填写一部份内容到摘要里。那么当用户不填写摘要时则由程序来截取文章的前一部份,但是如果用户用的是可视化编辑器的时候,直接截取会把HTML代码一起截下来,那么整个文章列表页显示时则造成HTML代码混乱,如果屏蔽HTML代码则列表内容又非常混乱。
为了达到不需要用户写简介的功能,下面我写个小方法可以解决这个问题(我已经测试过)。
由于最近我把Htmlarea(我们博客刚刚放弃的编辑器)和Rte(我们博客现在用的)都深入的研究了一下,并加了一些我写的小扩展。
首先介绍我们立刻能用到的Rte吧(Rte不支持Opera):
Rte源代码:http://www.zhuoda.org/blog/admin/editor/richtext.js
我加入了两个方法,不过只用到一个功能,另一个当做大家做参考用吧:
以上两个方法是加到Rte的JS文件中的,下面开始我们内容中的处理吧:
在表单中加入 <form *** *** onSubmit="javascript: compose_submit();" ***> 加来调用我们的JS程序,另外建一个Hidden表单来存我们的简介内容 <input type="hidden" name="intro" id="intro" value="">
/** 我定义了一些我喜欢用的JS方法,当然大家可以不用它 **/
Htmlarea和Rte的差不多,不同的是取文本内容的方法不一样:
文件:htmlarea.js,此方法最好放在此文件的最下面,如果你熟悉JS的话那么你可以灵活一些。
然后就是我们页面中的方法:
我主要思路是:
挺简单的JS程序。JS能实现太多相对PERFECT功能,例如我们现在编辑器用JS处理后可以实现:
这篇文章到这儿已经结束了,另外提醒一下是我们现在的Rte编辑窗口太小了。
建议大点:
出于这种情况,很多博客用的是加一个摘要字段,让用户填写一部份内容到摘要里。那么当用户不填写摘要时则由程序来截取文章的前一部份,但是如果用户用的是可视化编辑器的时候,直接截取会把HTML代码一起截下来,那么整个文章列表页显示时则造成HTML代码混乱,如果屏蔽HTML代码则列表内容又非常混乱。
为了达到不需要用户写简介的功能,下面我写个小方法可以解决这个问题(我已经测试过)。
由于最近我把Htmlarea(我们博客刚刚放弃的编辑器)和Rte(我们博客现在用的)都深入的研究了一下,并加了一些我写的小扩展。
首先介绍我们立刻能用到的Rte吧(Rte不支持Opera):
Rte源代码:http://www.zhuoda.org/blog/admin/editor/richtext.js
我加入了两个方法,不过只用到一个功能,另一个当做大家做参考用吧:
/** 此方法取得Rte编辑内容的编文本格式的内容 **/
function getRteText(rte) //rte为文本内容的ID
{
if(document.all) { //根据浏览器不同按不同的方式取Rte的内容
var oRTE = frames[rte].document;
}else {
var oRTE = document.getElementById(rte).contentWindow.document;
}
if(isIE) //isIE是Rte自带的全局变量
return oRTE.body.innerText;
else
return oRTE.body.textContent;
}
/** 此方法取得Rte编辑器的原内容,即HTML代码 **/
function getRteHTML(rte) //rte为文本内容的ID
{
if(document.all) {
var oRTE = frames[rte].document;
}else {
var oRTE = document.getElementById(rte).contentWindow.document;
}
return oRTE.body.innerHTML;
function getRteText(rte) //rte为文本内容的ID
{
if(document.all) { //根据浏览器不同按不同的方式取Rte的内容
var oRTE = frames[rte].document;
}else {
var oRTE = document.getElementById(rte).contentWindow.document;
}
if(isIE) //isIE是Rte自带的全局变量
return oRTE.body.innerText;
else
return oRTE.body.textContent;
}
/** 此方法取得Rte编辑器的原内容,即HTML代码 **/
function getRteHTML(rte) //rte为文本内容的ID
{
if(document.all) {
var oRTE = frames[rte].document;
}else {
var oRTE = document.getElementById(rte).contentWindow.document;
}
return oRTE.body.innerHTML;
}
以上两个方法是加到Rte的JS文件中的,下面开始我们内容中的处理吧:
在表单中加入 <form *** *** onSubmit="javascript: compose_submit();" ***> 加来调用我们的JS程序,另外建一个Hidden表单来存我们的简介内容 <input type="hidden" name="intro" id="intro" value="">
/** 我定义了一些我喜欢用的JS方法,当然大家可以不用它 **/
function fromID(id) //取id的对象
{
try {
return document.getElementById(id);
} catch (e) {
return null;
}
}
function text2html(t) //将纯文本格式转为HTML格式
{
return t.replace(/&/g, "&").replace(/ /g, " ").replace(/\t/g, " ").replace(/</g, "<").replace(/>/g, ">").replace(/\r?\n/g, "<br />\n");
}
/** 真正用到的方法 **/
function compose_submit()
{
if(!intro_size) intro_size = 200; //要截取的字符数,中文和英文在JS里都是算做一个字符。
val = getRteText(rte); //rte为文本内容的ID
if(val.length > 200)
fromID("intro").value = text2html(val.substr(0, intro_size) + "... ..."); //如果文章内容超过200个则在简介后面加上"... ...",否则取全部。
else
fromID("intro").value = text2html(val);
}
{
try {
return document.getElementById(id);
} catch (e) {
return null;
}
}
function text2html(t) //将纯文本格式转为HTML格式
{
return t.replace(/&/g, "&").replace(/ /g, " ").replace(/\t/g, " ").replace(/</g, "<").replace(/>/g, ">").replace(/\r?\n/g, "<br />\n");
}
/** 真正用到的方法 **/
function compose_submit()
{
if(!intro_size) intro_size = 200; //要截取的字符数,中文和英文在JS里都是算做一个字符。
val = getRteText(rte); //rte为文本内容的ID
if(val.length > 200)
fromID("intro").value = text2html(val.substr(0, intro_size) + "... ..."); //如果文章内容超过200个则在简介后面加上"... ...",否则取全部。
else
fromID("intro").value = text2html(val);
}
Htmlarea和Rte的差不多,不同的是取文本内容的方法不一样:
文件:htmlarea.js,此方法最好放在此文件的最下面,如果你熟悉JS的话那么你可以灵活一些。
/** 此方法取得Htmlarea编辑内容的编文本格式的内容 **/
HTMLArea.prototype.getText = function ()
{
if (HTMLArea.is_ie) {
return this._doc.body.innerText;
} else {
return this._doc.body.textContent;
}
}
{
if (HTMLArea.is_ie) {
return this._doc.body.innerText;
} else {
return this._doc.body.textContent;
}
}
然后就是我们页面中的方法:
/** 真正用到的方法 **/
function compose_submit()
{
if(!intro_size) intro_size = 200; //要截取的字符数,中文和英文在JS里都是算做一个字符。
val = editor.getText(); //editor为Htmlarea的全局变量,类型为Object
if(val.length > 200)
fromID("intro").value = text2html(val.substr(0, intro_size) + "... ..."); //如果文章内容超过200个则在简介后面加上"... ...",否则取全部。
else
fromID("intro").value = text2html(val);
}
{
if(!intro_size) intro_size = 200; //要截取的字符数,中文和英文在JS里都是算做一个字符。
val = editor.getText(); //editor为Htmlarea的全局变量,类型为Object
if(val.length > 200)
fromID("intro").value = text2html(val.substr(0, intro_size) + "... ..."); //如果文章内容超过200个则在简介后面加上"... ...",否则取全部。
else
fromID("intro").value = text2html(val);
}
我主要思路是:
- 当文章提交时取得整篇文章的纯文本格式。
- 取得想做成简介的纯文本内容。
- 转为HTML格式。
- 存入简介字段,再以HTML格式显示。
挺简单的JS程序。JS能实现太多相对PERFECT功能,例如我们现在编辑器用JS处理后可以实现:
- 两种编辑器在一个页面切换.
- 切换时内容和格式不会丢失.
- 可以以定义文章背景,两种编辑器都可行。
- 随时加高编辑窗口或宿小编辑窗口。
这篇文章到这儿已经结束了,另外提醒一下是我们现在的Rte编辑窗口太小了。
建议大点:
<script language="javaScript" type="text/javascript">
writeRichText('***', "", "100%", 260, true, false);
var tmp_html = "";
script>
meiking
2005-11-29 15:52:54
评论:1
阅读:2378
引用:0
谢谢
@2005-11-29 16:39:21 hofman
meiking这个忙帮得比较专业,谢谢啦。我自己对很多东西,不敢轻易碰,比如javascript,简单的页面制作,因为一个人的能力和精力实在太有限了。
