相信很多人都使用过多种富文本编辑器,富文本编辑器常用于编辑博客、用户交互,富文本编辑器分为两种:所见即所得和非所见即所得
两种富文本编辑器的实现原理是不相同的。
1. 非所见即所得编辑器
这种编辑器的实现原理很简单,用textarea元素就可以实现,假如要实现粗体、斜体、下划线、颜色字、图片的效果,只需在字的中间加上自定义标签即可,例如:
[b]富文本编辑器[b] ,[img]src=”http://www.google.com.hk/intl/zh-CN/images/logo_cn.png”[img]当然这些规则你得自己通过js进行定制。当POST提交后,再把这些标签转换为html标签。
2. 所见即所得编辑器
在1中我提到的几种效果,我们无法在textarea中见到立竿见影的效果(所见即所得),而文本域本身也只是支持一些字符的输入,并不支持显示html。
如何做到编辑像文本域,又能够即时所见呢?答案就是使用iframe作为内容编辑区域。iframe本身也是一个嵌套页面,它如何能够被编辑呢?这里有一些关键的属性,它们可以做到让iframe可以被编辑。
还是直接上代码来得方便一些,代码也很少。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
< html >
< script language = "javascript" type = "text/javascript" >
//初始化编辑器
function init() {
var ifr = document.getElementById("editor");
var doc = ifr.contentDocument || ifr.contentWindow.document; // W3C || IE
doc.designMode="on";
doc.contentEditable= true;
doc.write('< html >< head >< style >body{ margin:3px; word-wrap:break-word; word-break: break-all; }</ style ></ head >< body >GoodNessEditor</ body ></ html >');
alert(doc.body.innerHTML);
}
//设置选定的文本为粗体/正常
function setBold() {
var win=document.getElementById("editor").contentWindow;
win.document.execCommand("Bold",false,null);
win.focus();
}
</ script >
< p >
< input type = "button" id = "bBtn" value = "B" style = "font-weight:bold" onclick = "setBold();" />
</ p >
< p >
< iframe id = "editor" width = "600px" height = "400px" style = "border:solid 1px;" ></ iframe >
</ p >
< script type = "text/javascript" >
init();
</ script >
|
很重要的几点
(1). 用ifr.contentDocument ||
ifr.contentWindow.document方式获取iframe的文档对象
(2). 分别设置designMode属性为’on’,contentEditable属性为’true’让iframe可编辑
(3).
通过doc.body.innerHTML方法获取内容,这个内容是我们最终要插入到数据库或显示在页面上的(例如用户评论)
大家可以运行上面的代码,可以看到如下截图中的效果:
但是在实际运行的时候,你是否发现除了chrome浏览器外(用IETester, Firefox,
Chrome测试)打开这个页面都处于正在加载的状态(那个轮子转啊转,转个不停…)
只要在doc.write()方法前后加上doc.open(),
doc.close()就可以了(在写之前开启,写完之后关闭)。
最后,我们的Web程序中经常使用jQuery作为基础类库,那就把上面的代码也改造为jQuery吧。代码如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >KF富文本编辑器</ title >
< script type = "text/javascript" src = "jquery.min.js" >
</ script >
< script type = "text/javascript" >
$(function(){
$d = $("#editor")[0].contentWindow.document; // IE、FF都兼容
$d.designMode="on";
$d.contentEditable= true;
$d.open();
$d.close();
$("body", $d).append("< div >A</ div >< div >B</ div >< div >C</ div >");
$('#insert_img').click(function(){
// 在iframe中插入一张图片
var img = '< img src = "' + $('#path').val() +'" />';
$("body", $d).append(img);
});
$('#preview').click(function(){
// 获取iframe的body内容,用于显示或者插入到数据库
alert($('#editor').contents().find('body').html());
$('#preview_area').html($('#editor').contents().find('body').html());
});
});
</ script >
</ head >
< body >
< p >< iframe id = "editor" width = "600px" height = "200px" style = "border:solid 1px;" ></ iframe ></ p >
< input type = "text" id = "path" value = "http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" />
< input type = "button" id = "insert_img" value = "插入图片" />
< input type = "button" id = "preview" value = "预览" />
< p style = "border: 1px dashed #ccc;" id = "preview_area" ></ p >
</ body >
</ html >
|
效果图如下:
是不是觉得很简单呢?
分享到:
相关推荐
作为一本讲述T-SQL高级查询的专业图书,《Microsoft SQL Server 2008技术内幕:T-SQL查询》旨在结合实践中的各种常见问题,教读者如何用SQL作为语言工具来思考问题,揭示基于集合查询的强大威力。《Microsoft SQL ...
《Microsoft SQL Server 2008技术内幕:T-SQL查询》全面深入地介绍了Microsoft SQL Server 2008中高级T-SQL查询、性能优化等方面的内容,以及SQL Server 2008新增加的一些特性。主要内容包括SQL的基础理论、查询优化...
《Microsoft SQL Server 2008技术内幕:T-SQL查询》全面深入地介绍了Microsoft SQL Server 2008中高级T-SQL查询、性能优化等方面的内容,以及SQL Server 2008新增加的一些特性。主要内容包括SQL的基础理论、查询优化...
而在这两种不同的使用方式中, 语言的语法结构是一致的,从而为用户使 第1章结构化查询语言简介 用提供了极大的方使性和灵活性。 高度非过程化 语言是·种非过程化语言。用户只需指出“做什么”,而不需指出...
使用书签功能,可以在大量SQL语句里,快速定位某个语句所在位置 SQL Editor本身具有强大的编辑功能,非常方便编辑SQL语句。 强大的快捷键支持和工具栏快速按钮的支持,更加高效编写(很多快捷键可以自己...
将 SELECT 语句的查询结果显示在工作表,可以直接对查询结果进行再操作,如 修改、插入行、删除行、提 交(将表格中的数据改变写入相应的数据库表中)、多功能拷贝、将选择的单元格数据导出为 XLS /CSV /INSERT SQL ...
在ASP.Net中两种利用CSS实现多界面的方法 如何在客户端调用服务端代码 页面一postback,它就显示页面的最顶端,怎样让它定位在某一位置? 如何保证页面刷新后的滚动条位置 清除网页历史记录,屏蔽后退按钮! 如何传值...
角色是一组权限的集合,将角色赋给一个用户,这个用户就拥有了这个角色中的所有权限。 系统预定义角色 预定义角色是在数据库安装后,系统自动创建的一些常用的角色。下面我们就简单介绍些系统角色: CONNECT...
2.4.1 在WSS安装中创建第一个网站 24 2.4.2 创建第一个MOSS网站 24 2.5 配置网站 25 2.6 小结 26 第3章 使用网站和页面 27 3.1 设计网站结构 27 3.1.1 定义与网站有关的术语 28 3.1.2 规划顶级网站 28 3.1.3 定义...
FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上...
FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上...
" " " "具有支持并行操作所需的技术,如并行装载,并行" " " "查询,并行创建索引等 " " " "提供分区索引视图功能 " " " "提供筛选索引的功能 " " " "提供高级稀疏列的功能 " " "BI决策支持 "在数据库产品中提供...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件,支持很多特性例如文件传输、...
4.2 何在TABLE CONTROL中实现选中一行或多行的效果 15 4.3 DIALOG 开发的常用几个控件是什么? 15 5. BDC 16 5.1 BDC录屏的事务代码 16 5.2 BDC与BAPI之间的区别 16 5.3 BDC录屏的注意事项 16 5.4谈谈BDC的运行模式...
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件,支持很多特性例如文件传输、...
修改外部数据库在4.12版中导致的不兼容问题,并增加了对MS SQL Server数据库中image和text字段类型的说明。 7. 修改扩展界面支持库一,禁止透明标签在父窗口刷新时自动刷新,以解决其导致窗口刷新缓冲的问题。 8....
LemonSMS 这个Java库可以让开发者在应用程序中集成使用GSM调制解调器或兼容电话来发送SMS消息。 远程桌面 Java Remote Desktop.tar Java Remote Desktop 是一个Java 的远程桌面软件,支持很多特性例如文件传输、...