Web在线文字编辑器实现方案初探

鉴于目前部分舟友对制作留言系统,信息发布以及论坛系统很感兴趣,但大多在所见及所得的网络文字编辑上卡壳(不肯用别人做的现成的插件^_^!),特写了这篇文章,旨在为大家能够自己动手编写自己的WebEditor有所帮助和启发,本人写作能力有限,如有表述不清之处还望见谅!

一.如何装载用户输入的信息
WebEditor最基本的是首先解决如何得到用户输入的信息文字,也就是"编辑框",大家可能都能想到,传统的Html表单元素中有<TextArea></TextArea>可以作到
[run]
<textarea>输入文字<textarea>
[/run]
但是,從textarea輸入的資料, 到了後台必須將分行符號轉換成為 <br>才能夠達到分行的效果,不但不方便,而且它也只能局限于纯文本的输入和显示,功能十分有限

那么,目前大多数的再线编辑器他们是怎么实现如此功能丰富的"编辑框"的呢?
请看以下代码:
[run]
<iframe width="400" height="100" id="editor">
</iframe>

<script language="Javascript">
<!--
editor.document.designMode = "on";
-->
</script>
[/run]

是不是大出意料之外?iframe居然还能用来多编辑框!
我们只需把iframe的designMode (編輯模式) 屬性調為 "on" 就可以得到一个意想不到的编辑框.


                                                                                                              >......后续

二.获取用户的输入
   由于iframe(内嵌框架)的特性:能夠在一份網頁中以內嵌的方式顯示另一份網頁. 所以,iframe中的内容是以Html代码传递给浏览器解析的,也就是说他和textarea有着本质的不同,他的内容是完完全全的Html,而textarea却只能是纯文本!
由于iframe不是表单元素,所以无法象一般表单那样传送数据,也就是说Request.QueryForm()没用,得不到iframe的数据,但是,和div一样,我们还是有办法拿到他的内容
来看下面的示例:
[run]
<iframe width="300" height="100" id="editor">
</iframe>
<script language="Javascript">
<!--
editor.document.designMode = "on";
function showHTML()
{
alert(editor.document.body.innerHTML);
}
-->
</script><br>
<form><input type="button" value="获取輸入信息" onClick="showHTML();"></form>
[/run]
在iframe編輯模式中输入的内容会自动转换成HTML,是不是方便多了?

                                                                                    >.....待续

三.如何实现文字编辑功能
    基本的东西搞定.现在我们发现光是这样还是不够,怎么样能想别人的编辑器一样对文字进行多样化的处理呢?是不是心动了,下面就会给出你满意的答复
请看这段代码:
[run]
<form>
<input type="button" value="B" onClick="setFont('b');">
<input type="button" value="I" onClick="setFont('i');"><br>
<iframe width="300" height="100" id="editor">
</iframe>
<script language="Javascript">
<!--
editor.document.designMode = "on";
function showHTML()
{
      alert(editor.document.body.innerHTML);
}

function setFont(tag)
{
      editor.focus();       
               Sel = editor.document.selection.createRange();
      Sel.type = editor.document.selection.type;
      Sel.pasteHTML(" <"+tag+">" + Sel.text + "</"+tag+"> ");
}
-->
</script><br>
<input type="button" value="获取輸入信息" onClick="showHTML();">
</from>
[/run]

选中其中的文字,点击"B"按钮,再看看html代码,是不是加上了<b></b>粗体标签了?
下面解释一下:
editor.focus();
激活editor iframe,使下面的document指向iframe内嵌页面而不是当前页面,否则就会在错误的地方添加<b></b>标签了

Sel = editor.document.selection.createRange();
通过使用selection对象的createRange()方法方便地创建当前文本的TextRange对象。通过访问其text属性，我们可以得到editor中选定的文本(纯文本哦)

Sel.pasteHTML(" <"+tag+">" + Sel.text + "</"+tag+"> ");
利用pasteHTML(), 可以在所选择的文本上加上特定的Html标签了,这里如果点了"B",就加上了<b></b>标签,如果点的是"I",就加上<i></i>标签

触类旁通,相信大家都等不及要自己亲自下手了^_^!


完结!希望对广大舟友们有所帮助!实践出真知,路是自己走出来的,千万不要忘了这一点!

好帖!

顶啊`！
我先看看

哈哈
这个我好象在坛子里贴过的哦
[url]http://bbs.7880.com/read.php?tid=3496&u=3427[/url] [s:13]

顶订顶

顶订顶

顶订顶