ubb编辑器
分享一个简单好用的UBB编辑器文章来自:http://www.
这个编辑器是来自Discuz论坛,现提供给大家用于非商业性用途,比如学习或研究。
使用方法步骤:
1. 下载压缩包[seaofchina-ubbeditor.zip],解压到本地任意目录下,点击edit.html 就可以看到效果了。
2. 该编辑器有三部分构成:
第一部分:<textarea name="content" cols="80" rows="2" style="display:none"></textarea>
是一个名字为content的文本域
第二部分:<iframe ID="Editor" name="Editor" src="edit.html?ubb=1&id=content" frameBorder="0" marginHeight="0" marginWidth="0" scrolling="No" style="height:400px;width:650px"></iframe><br/>
是一个iframe, 用来提供真正的编辑框。注意该编辑框的src参数, 它有3个值:edit.html ->你的编辑器文件名,ubb=1表示你想让"所见即所得模式"页先显示,ubb=0表示你想让"ubb代码模式"页先显示,id=content 表示你的上一个文本域的名字这样你的第二部分就和第一部分关联上了。
第三部分:是一个javascript程序,目的是当你编辑完成后,提交表单的时候得到编辑器里面的内容。
function jsgetcontent(){
if(typeof(window.frames['Editor'].editdoc.body)=="undefined")
document.writeform.content.value = window.frames['Editor'].document.getElementById('posteditor_textarea').value;
else
document.writeform.content.value = window.frames['Editor'].editdoc.body.innerHTML;
document.writeform.submit();
}
3. 那么具体如何集成到你的网页或表单中呢?
分两种情况,一种是没有内容的空白编辑器提供给用户输入,这时候在第一部分文本域中无需任何初始化内容。
<FORM name="writeform" action="/servlet/SubforumServlet" method="post"> <!-- form开始,定义好你的action-->
<textarea name="content" cols="80" rows="2" style="display:none"></textarea> <!-- 第一部分-->
<iframe ID="Editor" name="Editor" src="edit.html?ubb=1&id=content" frameBorder="0" marginHeight="0" marginWidth="0" scrolling="No" style="height:400px;width:650px"></iframe><br/> <!-- 第二部分-->
function jsgetcontent(){ <!-- 第三部分-->
if(typeof(window.frames['Editor'].editdoc.body)=="undefined")
document.writeform.content.value = window.frames['Editor'].document.getElementById('posteditor_textarea').value;
else
document.writeform.content.value = window.frames['Editor'].editdoc.body.innerHTML;
document.writeform.submit();
}
<!-- form结束-->
<INPUT type="button" value="发表" name="sendbutton" onclick="jsgetcontent()"></form>
实例演示: http://www.
另外一种是有初始内容的提供给用户修改,这时候在第一部分文本域中需要有你提供初始内容,这个初始内容的提供取决于你使用何种web技术,可以是jsp,asp或者其他的动态程序语句,一般是从数据库中取得。比如jsp,可以是像这样子的<textarea name="content" cols="80" rows="2" style="display:none"><%=post.getPost2UBB()%></textarea>
<FORM name="writeform" action="/servlet/SubforumServlet" method="post"> <!-- form开始,定义好你的action-->
<!-- 第一部分,只有这里有所不同--><textarea name="content" cols="80" rows="2" style="display:none"><%=post.getPost2UBB()%></textarea>
<iframe ID="Editor" name="Editor" src="edit.html?ubb=1&id=content" frameBorder="0" marginHeight="0" marginWidth="0" scrolling="No" style="height:400px;width:650px"></iframe><br/> <!-- 第二部分-->
function jsgetcontent(){ <!-- 第三部分-->
if(typeof(window.frames['Editor'].editdoc.body)=="undefined")
document.writeform.content.value = window.frames['Editor'].document.getElementById('posteditor_textarea').value;
else
document.writeform.content.value = window.frames['Editor'].editdoc.body.innerHTML;
document.writeform.submit();
}
<!-- form结束-->
<INPUT type="button" value="发表" name="sendbutton" onclick="jsgetcontent()"></form>
实例演示: http://www.