重温Squire:高效的HTML5富文本编辑器

   2025-07-19 admin00100

什么是Squire?

Squire是一款极其轻量级的HTML5富文本编辑器,最适合您应用程序的丰富输入表单和简单的文档创建。它提供跨浏览器支持,但刻意避免支持旧版浏览器的复杂性。它在Opera10、Firefox3.5、Safari4、Chrome9和IE8上运行效果最佳。

Squire不适用于创建和编辑所见即所得的网站页面。然而,对于许多富文本输入和网络应用程序来说,Squire可能正是您所需要的。它提供了不臃肿的力量。它还获得了麻省理工学院的许可,可以灵活重用。

在本教程中,我将向您展示如何下载Squire并使用它构建示例输入表单。如果您想了解Squire的实际应用,请访问演示。

乡绅从哪里来?

FastMail团队构建了Squire来简化他们的网络邮件编辑器要求。FastMail是Gmail的优秀基于云的电子邮件替代方案—我是FastMail的日常用户。由于它的总部位于澳大利亚,并且根据与美国不同的法律运营,因此FastMail用户的隐私保护略有改善。您可以在这里阅读更多相关信息:FastMail称其不受NSA监视。

立即学习“前端免费学习笔记(深入)”;

正如FastMail团队在他们的博客中所写,他们之前使用过CKeditor:

虽然不是一个糟糕的选择,但像大多数其他编辑器一样,它是为创建网站而不是编写电子邮件而设计的。因此,默认情况下,简单地插入图像就会出现一个包含三个选项卡和比您想象的更多选项的对话框...它还附带了自己的UI工具包和框架,我们必须对其进行大量自定义才能适应我们正在构建的新用户界面的其余部分;维护起来很痛苦。

由于我们关注速度和性能,我们也关心代码大小。我们用于之前(经典)UI的CKEditor版本仅包含我们需要的插件,下载大小为159KB(gzip压缩后;未压缩为441KB)。这只是代码,不包括样式和图像。

他们决定从头开始,打造Squire。压缩和gzip后的JavaScript大小仅为11.5KB(未压缩时为34.7KB),并且没有依赖项,Squire非常轻量级。

结果令人印象深刻。加载整个撰写屏幕、基础库、邮件和联系人模型代码以及呈现整个屏幕的所有UI代码所需的组合代码重量现在仅为149.4KB(未压缩时为459.7KB),比单独的CKEditor还小。

Squire没有依赖性。没有XHR包装器、小部件库或灯箱覆盖层。工具栏没有用户界面,这消除了加载两个UI工具包带来的臃肿。这只是一个简单的extarea>组件,可以通过JavaScript进行操作。extarea>

Squire的工作原理

Squire使用选择和范围API来操作DOM。这消除了常见的跨浏览器不兼容性。再次来自FastMail博客:

制作富文本编辑器是出了名的困难,因为不同的浏览器在这方面极其不一致。这些API都是Microsoft在IE全盛时期引入的,然后被其他供应商以各种不兼容的方式复制......大多数富文本编辑器执行命令,然后尝试清理浏览器创建的混乱。有了Squire,我们就巧妙地绕过了这个问题。

Squire的总体理念是允许浏览器做尽可能多的事情(不幸的是不是很多),但在任何偏离要求的地方进行控制,或者存在显着的跨浏览器差异。

安装Squire

其次,将build/目录的内容复制到您的应用程序中。p>

第三,编辑document.html中的块以添加您希望编辑器使用的默认样式(或链接到外部样式表)。

使用Squire

让我们看一下Squire附带的演示应用程序。使用Squire时,您可以使用

在演示中:

<iframesrc=https://www.yaozhongpeng.com/static/image/nopic320.png>
 
举报收藏 0打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  RSS订阅
Powered By DESTOON