相信很多人都使用过多种富文本编辑器，富文本编辑器常用于编辑博客、用户交互，富文本编辑器分为两种：所见即所得和非所见即所得
两种富文本编辑器的实现原理是不相同的。
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可以被编辑。
还是直接上代码来得方便一些，代码也很少。
<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吧。代码如下：
<!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>
效果图如下：
是不是觉得很简单呢？
相关推荐
这个"AngularJS实现所见即所得富文本编辑器源码.zip"文件显然包含了使用AngularJS框架开发的富文本编辑器的源代码。 AngularJS的核心特性包括双向数据绑定、依赖注入、模块化和指令系统，这些都为构建富文本编辑器...
react-froala-wysiwyg, Froala所见即所得HTML富文本编辑器的反应组件 反应 JS Froala所见即所得编辑器 react-froala-wyswiyg为 Froala WYSIWYG编辑器版本 2提供了响应绑定。安装npm install react-froala-wysiwyg --
这款所见即所得的jQuery文本编辑器利用jQuery的强大功能，提供了一系列便捷的API和插件，如插入图片、创建链接、格式化文本等，使开发者能轻松实现复杂的功能。 编辑器支持多国语言，这意味着它可以满足全球用户的...
富文本编辑器是一种在网页上实现用户可以直观编辑和格式化文本的工具，"Textricheditor"就是这样一个轻量级的、所见即所得（WYSIWYG）的富文本编辑器。它主要基于JavaScript技术，使得网页开发者能够轻松地在网页中...
《jQuery-notebook：一款轻量级的所见即所得富文本编辑器》 在Web开发领域，富文本编辑器是不可或缺的一部分，它使得用户能够像在Word文档中一样编辑网页内容。今天我们要介绍的是一款名为jQuery-notebook的富文本...
例如，你可以创建一个HTML页面，使用TinyMCE或CKEditor等开源富文本编辑器，然后在.NET应用中嵌入这个页面。 3. RichtTextBox控件：虽然RichtTextBox不是真正意义上的所见即所得编辑器，但它比标准TextBox提供了更...
所见即所得编辑器是 Web 开发中的一个重要组件，能够让用户在线编辑和处理富 Web 内容，包括格式文本、表格、图片、媒体、链接等等。下面我们将详细介绍 22 个所见即所得在线 Web 编辑器，每个编辑器都有其独特的...
LineControl Editor是一款基于Bootstrap的响应式、所见即所得的富文本编辑器jQuery插件。该富文本编辑器可以使用textarea元素或任何一个容器元素来生成，它拥有常见富文本编辑器的所有功能，使用快捷方便。
对于所见即所得编辑器来说，第三方控件可能包括富文本编辑器、图片上传组件、代码高亮插件等。 常见的第三方编辑器有CKEditor、TinyMCE、Quill等。这些编辑器提供了丰富的API和文档，支持自定义配置和主题，可以...
wysiwyg.js是一款十分强大的、所见即所得的jQuery富文本编辑器插件。wysiwyg.js富文本编辑器体积小，支持选择、键盘、占位等众多事件。而且该富文本编辑器的兼容性十分好，甚至兼容IE6。
**百度Ueditor在线富文本编辑器** 百度Ueditor是一款由百度公司开发的开源、免费的在线富文本编辑器，主要用于Web应用中提供便捷的文本编辑功能。它以其强大的功能、良好的用户体验以及易于集成的特点，被广泛应用...
富文本编辑器的实现方式多样，常见的有以下几种： 1. **基于框架的编辑器**：例如CKEditor、TinyMCE等，它们是独立的开源库，开发者可以通过API和插件系统进行定制和扩展。 2. **基于组件的编辑器**：如Quill、...
在描述中提到的"Flutter-master"可能是指包含项目源代码的文件夹，其中可能包含了实现富文本编辑器的Flutter工程。通常，这样的项目会包含以下关键部分： 1. `lib/main.dart`：应用的入口点，定义了应用程序的基本...
富文本编辑器通常以WYSIWYG（所见即所得）的形式呈现，用户可以直接在编辑界面看到格式化的结果。在网页开发中，富文本编辑器常用于博客、论坛、内容管理系统等，允许用户无需HTML知识就能创建格式化的内容。 富...
"百度富文本编辑器"是一款广泛应用于后台消息发布的强大工具，尤其受到开发者的青睐。它提供了丰富的文本格式化选项，使得非程序员也能轻松创建出专业级别的网页内容。下面将详细介绍这款编辑器的主要特点、功能以及...
综上所述，"超级富文本编辑器支持移动端pc端"这一主题涵盖了跨平台兼容性的重要性，以及具体如Simditor这样的富文本编辑器如何实现这一目标。在开发过程中，选择一款合适的富文本编辑器可以极大地提升用户体验，并...
"jQuery富文本编辑器Notebook"是一个专为创建简洁、整洁且美观的所见即所得（WYSIWYG）编辑器而设计的工具。这款编辑器利用了流行的jQuery库，旨在提供一个用户友好的界面，使得内容创作者可以轻松地进行文字编辑、...
**ueditor富文本编辑器详解** ueditor是百度前端研发部推出的一款强大的Web富文本编辑器，它以轻量级、高效能、易用性著称。ueditor的设计理念是提供一个所见即所得（WYSIWYG）的编辑环境，使得用户在网页上进行...
富文本编辑器是Web应用中常见的一种组件，它允许用户以WYSIWYG（所见即所得）的方式编辑内容，如在网页上创建和编辑文章、博客等。在MVC3.0中，我们可以利用各种富文本编辑器插件，如CKEditor、TinyMCE或百度UEditor...