正文

在线编辑器2008-11-11 18:25:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/lovebugs/39353.html

分享到:

你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤:

1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。
你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>

这样你就可以在这个iframe区域里写字了。

2,选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时,一般是先打字,再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本,返回一个对象,你可以通过访问该对象的text属性得到被选中的文本。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>

3,改变被选中文本的样式。selection.createRange()选中文本,返回一个对象,该对象有一个方法execCommand(),可以用来改变被选中文本的样式。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>

execCommand()的常用用法:
字体--宋体、黑体、楷体等
execCommand("fontname","",字体)
字号--字号大小
execCommand("fontsize","",字号)
加重
execCommand("Bold")
斜体
execCommand("Italic")
下划线
execCommand("Underline")
删除线
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷贝
execCommand("Copy")
粘贴
execCommand("Paste")
取消操作--IE5.0以后可以无限取消
execCommand("Undo")
重复操作
execCommand("Redo")

把上面的每个用法用按钮来实现,你就已经完成了一个简单的可视文本编辑器。

阅读(1893) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册