Total Pageviews

Monday 28 November 2011

如何使用网页上的富文本编辑器

问题主要集中在:
  1. 为什么 Word 粘贴进去的文本格式都变了?
  2. 为什么 Word 里的图片不能粘贴进去?
  3. 为什么我编辑器里看到的格式,到了网页上会变?

这里我就写一篇教程,集中回答下一下问题。

为什么网页上的富文本编辑器不识 Word ?

为什么会这样?
Word 是一个富文本编辑器,网页上的也是富文本编辑器,那到底什么是富文本?
简单的来说,富文本就是有格式的文本,
从视觉上看,它可以是粗体、斜体、有颜色、有背景色…
但是它是怎么存储数据的呢?它是用一些特殊的标记来存储的。

例如:
视觉上:粗体
实际数据:<b>粗体</b>

但是,为什么网页上的富文本编辑器不能很好地识别 Word 中的数据呢?
因为他们虽然用了同样的技术,但是标准不同,网页上用的是 HTML 语言,而 Word 中用的是 RTF 技术,他们在一些标准上有区别,同样的格式有可能有不同的表示方法。不仅如此,它们之间也有一些完全不兼容的格式。
虽然现在网页上的富文本编辑器都有转换功能,但是这种转换往往会很不彻底,特别是当你的 Word 排版很复杂的时候。

怎么解决?
方案一:如果你的 Word 排版不是特别的复杂,那么可以直接粘贴进去,并且查看一下实际的效果,如果效果还不错,那便不用再调整了,除非你是一个完美主义者…
方案二:先把 Word 中的数据粘贴到 Dreamweaver 中,然后利用 Dreamweaver 做一定的调整。
方案三:如果你真的是一个新闻工作者,或者是想在论坛发一个重要的帖子,那么你就不用该利用自动转换功能了,而是应该手动编辑,具体怎么编辑呢?下面将会详解。

从 Word 获取数据后在网页中编辑
i) 做这个的第一步,就应该先把 Word 中的格式清除。你可以先把 Word 中的文本粘贴到记事本(或其他普通文本编辑器)中,然后再粘贴到网页的编辑器中;有些编辑器会有这样的功能,能帮你直接清楚格式,找到类似于这样的按钮,把文本粘贴进去即可。

ii) 下面一步就是直接在编辑器中编辑了,用法和 Word 很相似,只不过功能肯定会比 Word 略差一点,但是这也是没办法的,除非你有很强大的前端知识,否则这个对于一般人来说,的确没什么办法能解决了。

什么 Word 中的图片不能粘贴进去?
这个问题… 问的我很纠结~
实原因也很简单,Word 中富文本的数据都是文本,但是怎么显示图片的呢?
其实也是利用一个特殊的标记,告诉 Word 这里应该显示图片,然后 Word 便把图片显示出来。
所以图片和数据其实不是在一起的。(Word中看起来是一个文件,但其实是一个压缩包,可以通过用工具解压得到原始数据)
网页中也是如此,网页中的图片是这样标记的:<img src=”1.jpg”/>
那么为什么粘贴不进去了呢。。为什么?
因为你粘贴进去的只是一个标记,标记中写了该图片的位置,网上的数据和本地的地址不同,是不能互访的,所以如果你想要显示图片,必须手动上传图片,或者直接引用别处的图片。


为什么在编辑器里好好的,在网页中却会变?

上面说的好好地,我已经全部编辑好了,为什么到了网页上,格式又变了?!
因为网页上的格式有继承机制,例如你在发布新闻,那么你只是在编辑新闻那部分。

例如你把文字粘贴到里编辑器中,没有设置字体大小,它会以编辑器页面的默认字体显示。
而新闻显示页面和编辑器页面的格式是不一样的,所以当你发布了新闻后,你会发现你的字体大小变了…

那么怎么解决呢? 很简单,手动设置下字体大小就行了~因为虽然有继承,但是它也有一个优先级,直接设置优先级高于页面的格式。

No comments:

Post a Comment