Posts Tagged ‘富文本编辑’

九月 27th, 2009

浏览器中的HTML富文本编辑（二）

2 Comments, 前端开发, 翻译, by army8735.

原文标题：《Rich HTML editing in the browser: part 2》
原文地址：http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-2/
介绍
在本系列文章的第一篇中，我详细阐述了如何利用javascript语言在设计模式（designMode）和可编辑内容（contentEditable）中创建html富文本编辑器的理论知识。这些文档对象模型（DOM）已经成为HTML5标准的一部分，并且现代主流浏览器也陆续地开始支持。本篇文章作为第二部分，我将化理论为实践，带你走进制作一款简单而跨浏览器的在线文本编辑器的世界。
你可以在这里看到在线完成的版本，点这里能下载它的源码。下面列出的将是代码中最重要的部分，我们将详细地来叙说它，其余乏味的地方就被省略了。
所有代码被分割为3个文件：

editor.js：主要的应用程序结构
editlib.js：一个修改选区的方法集合
util.js：一些有用的方法

框架
我们将使用一个空白的内嵌（IFrame）页面作为画布：
<iframe id=”editorFrame” src=”blank.html”></iframe>
我们可能会这样用：清除源文件中的代码从而得到一个body里完全没有任何元素的空白页，但是我更倾向于创造一个自定义“空白页”，里面放入一个空的段落，就像：
<title></title>
<body><p></p></body>
这样做自然有它可取之处，因为使用p元素作为开始来包含内容的话，Mozilla便能够和其它浏览器兼容了。（倘若不这样做，Mozilla将直接进入body元素的内容区。）使用可编辑内容属性（contentEditable attribute），我们能够避免使用框架而直接在页面上创建一个可编辑的div区域，但是Firefox 2并不支持，所以为了兼容性最好还是以内嵌页面（IFrame）为基础来制作跨浏览器的编辑器。
激活编辑模式
当页面加载完成时，我们使用下面的方法来激活编辑模式（editor.js中）。
function createEditor() {
var editFrame = document.getElementById(“editorFrame”);
…

Tags: ,

九月 25th, 2009

浏览器中的HTML富文本编辑（一）

2 Comments, 前端开发, 翻译, by army8735.

原文标题：《Rich HTML editing in the browser: part 1》
原文地址：http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/
介绍
时光倒流。在世界上最早的浏览器——提姆·伯纳·李（Tim Berners-Lee）发布于1990年——诞生的时候，我们可以直接在所见即所得模式下编辑网页的内容，那时的网页被构思为一种可读可写的媒介。后来经过一段时间的发展，浏览器基本上变得只读了，除了只能在form控件中输入一些纯文本而已。
Internate Explorer 5的发布将浏览器的所见即所得编辑特性带回了主流：新的设计模式（designMode）属性允许用户编辑整个文档（document）。一开始这一特性显得多少有些疏忽，因为它最初是Windows操作系统下IE专有的。
近些年来，另一些可以和IE抗衡的浏览器——Mozilla、Safari和Opera——跟随并实现了这一IE独有的特性。排版引擎比较组织（WHATWG-group）也致力于编辑系统标准的建立——HTML5中设计模式和可编辑内容文档对象模型属性（contentEditable DOM properties）的介绍。看起来在浏览器中，所见即所得编辑最终将成为网页整体的一部分。
这篇文章利用HTML5的可编辑特性来评审现今浏览器的基本概念和挑战。这些科目包括：

不同的可编辑模式
编辑命令
编辑产生的HTML代码
和DOM的配合

这篇文章是两篇系列文章的第一篇，第二篇内容将覆盖到一个详细的例子来实现一个编辑器。
注意：我只考虑到最近的主流浏览器所支持的特性：Opera 9.5、Firefox 2+和Safari 3，较旧的版本有太多的bug和不稳定的地方了。IE中的实现直到5.5版本才有了明显的变化。
可编辑系统预览
可编辑系统允许用户编辑页面或者页面中的一部分，它有如下几个方面：

光标（caret）标识当前的插入点。用户可以输入、删除等。使用键盘或鼠标可以移动光标或者选区。
一些浏览器提供UI组件用户缩放重定位图片、表格和其它可重定位的元素（elements）。
内置了一系列独立的编辑命令：粗体、斜体、插入链接、粘贴、撤消等。这些可以被快捷键、脚本命令接口（script command API）调用。使用API可以轻易实现一个编辑器的工具栏（toolbar）。
使用范围和选区接口（range and selection…

Tags: ,