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

wufei123 2024-05-28 阅读:64 评论:0
什么是 Squire? Squire 是一款极其轻量级的 HTML5 富文本编辑器,最适合您应用程序的丰富输入表单和简单的文档创建。它提供跨浏览器支持,但刻意避免支持旧版浏览器的复杂性。它在 Opera 10、Firefox 3.5、S...

重温 squire:高效的 html5 富文本编辑器

什么是 Squire?

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

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

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

乡绅从哪里来?

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

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

虽然不是一个糟糕的选择,但像大多数其他编辑器一样,它是为创建网站而不是编写电子邮件而设计的。因此,默认情况下,简单地插入图像就会出现一个包含三个选项卡和比您想象的更多选项的对话框...它还附带了自己的 UI 工具包和框架,我们必须对其进行大量自定义才能适应我们正在构建的新用户界面的其余部分;维护起来很痛苦。 由于我们关注速度和性能,我们也关心代码大小。我们用于之前(经典)UI 的 CKEditor 版本仅包含我们需要的插件,下载大小为 159 KB(gzip 压缩后;未压缩为 441 KB)。这只是代码,不包括样式和图像。

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

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

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

Squire 的工作原理

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

制作富文本编辑器是出了名的困难,因为不同的浏览器在这方面极其不一致。这些 API 都是 Microsoft 在 IE 全盛时期引入的,然后被其他供应商以各种不兼容的方式复制......大多数富文本编辑器执行命令,然后尝试清理浏览器创建的混乱。有了 Squire,我们就巧妙地绕过了这个问题。 Squire 的总体理念是允许浏览器做尽可能多的事情(不幸的是不是很多),但在任何偏离要求的地方进行控制,或者存在显着的跨浏览器差异。

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

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

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

使用 Squire

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

在演示中:

<iframe src="build/document.html" onload="top.editor=this.contentWindow.editor" width="500" height="500"></iframe>

Document.html 是一个具有默认样式的空白画布,它会加载 Squire:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> ... a { text-decoration: underline; } h1 { font-size: 138.5%; } ... blockquote { border-left: 2px solid blue; margin: 0; padding: 0 10px; } </style> </head> <body> <script type="text/javascript" src="squire.js"></script> </body> </html>

使用 Squire 时,您可以将事件侦听器附加到 iframe 的加载事件。当此事件触发时,您可以通过 iframe.contentWindow.editor 获取对编辑器对象的引用。例如,演示 iframe 包括:

onload="top.editor=this.contentWindow.editor"

该演示有两种类型的链接,用于在 Squire 中操作内容。可以对任何选定文本进行操作的简单命令如下所示:

Bold

需要额外用户输入的复杂命令如下所示;他们添加了提示符 c:

字体大小

演示应用程序如下所示:

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

演示页面顶部的 JavaScript 侦听对这些 span 命令的任何点击。如果提示类存在,它会从用户收集更多信息:

<script type="text/javascript" charset="utf-8"> var editor; document.addEventListener( 'click', function ( e ) { var id = e.target.id, value; if ( id && editor && editor[ id ] ) { if ( e.target.className === 'prompt' ) { value = prompt( 'Value:' ); } editor[ id ]( value ); } }, false ); </script>

然后,它使用命令和任何用户提供的值调用 Squire 编辑器。然后,Squire 将命令应用于当前选定的文本:

编辑器[ id ]( value );

您可以了解有关 Squire 的更多信息,并在自述文件中查看其完整的 API 文档。

扩展演示

作为示例,让我们添加两个读取 Squire 编辑器状态的命令。我们将在演示命令标题的底部添加两个链接:

<p> <a href="#" onclick="alert(editor['getSelectedText']());">get selection</a> | <a href="#" onclick="alert(editor['getDocument']());">get doc</a> </p> </header>

当您选择某些文本并单击它时,所选内容将在警报中弹出,如下所示。

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

让我们来看看更美观的演示及其工具栏:

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

此页面的头块集成了 Bootstrap 的样式表和名为 Squire-UI 的样式表。它还为此 Squire-UI 提供 JavaScript。

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8"> <title>Squire</title> <!--[if IE 8]> <script type="text/javascript" src="build/ie8.js"></script> <![endif]--> <link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href="build/Squire-UI.css" rel="stylesheet" type="text/css" /> <link href="build/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="build/jQuery/jQuery.js" type="text/javascript"></script> <script src="build/squire-raw.js" type="text/javascript"></script> <script src="build/Squire-UI.js" type="text/javascript"></script> It also offers static html for a textarea in the body <div class="container"> <div class="row"> <div class="col-centered"> <textarea id="foo"></textarea> </div> </div>

但在加载时,其 JQuery $(document).ready 函数将静态 #foo 文本区域替换为其 SquireUI。

<script> $(document).ready(function () { UI = new SquireUI({replace: 'textarea#foo', height: 300}); }); </script>

工具栏配置是通过相当复杂的 JQuery、AJAX、HTML5 和 CSS 配置来实现的。它正在加载此 HTML 页面以显示大部分工具栏:http://neilj.github.io/Squire/build/Squire-UI.html。

$(div).load(options.buildPath + 'Squire-UI.html', function() { this.linkDrop = new Drop({ target: $('#makeLink').first()[0], content: $('#drop-link').html(), position: 'bottom center', openOn: 'click' });

以下是 Squire-UI.html 源代码的子集,以便您可以查看正在加载的内容:

<div class="menu" contenteditable="false"> <div class="group"> <div data-action="bold" class="item"><i class="fa fa-bold"></i></div> <div data-action="italic" class="item"><i class="fa fa-italic"></i></div> <div data-action="underline" class="item"><i class="fa fa-underline"></i></div> <div id="selectFont" data-action="selectFont" class="item"> <i class="fa fa-font"></i> </div> </div> <div class="group"> <div id="makeLink" data-action="makeLink" class="item"><i class="fa fa-link"></i></div> <div data-action="makeOrderedList" class="item"><i class="fa fa-list"></i></div> <div id="insertImage" data-action="insertImage" class="item"> <i class="fa fa-picture-o"></i> </div> <div data-action="increaseQuoteLevel" class="item"><i class="fa fa-quote-right"></i></div> </div> ...

如果他们在分发代码中提供简化的 Bootstrap 工具栏作为附加组件,那就太好了,但您当然可以从他们在上面自己的演示中所做的事情中学习。

我希望您发现 Squire 对您自己的应用程序很有用。请随时在下面发表更正、问题或评论。您还可以通过 Twitter @reifman 联系我或直接向我发送电子邮件。

相关链接
  • Squire:FastMail 的富文本编辑器
  • Squire演示页面
  • Github 上的 Squire 代码库

以上就是重温 Squire:高效的 HTML5 富文本编辑器的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

    BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
    知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
  • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

    闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
    闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
  • boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)

    boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)
    求职宝典:boss直聘面试技巧及取消预约方法 各位求职者注意啦!在Boss直聘上,随意取消面试预约会留下爽约记录,影响后续求职!本文将指导您如何避免爽约,以及如何取消已预约的面试。 如何取消Boss直聘面试预约? 打开Boss直聘APP,进入“我的”页面。 点击“待面试”,查看面试日程。 选择需要取消的面试,点击“取消面试”按钮即可。 Boss直聘面试爽约的后果? 爽约行为会在HR端留下记录,影响您的求职成功率。其他HR也能看到您的不良记录,所以务必重视面试预约。...
  • 蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)

    蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)
    蛋仔派对2025最新皮肤兑换码大放送!游戏内新增多款皮肤兑换码,包含最新、福利和通用三种类型,助你轻松获取精美奖励! 赶紧来看看如何兑换吧! 兑换码列表: 最新兑换码: ccewndj4k4k、cdkqdfm4fh、peetnmp4ef、cdxymk8f67 福利兑换码: cca863ywtfa、eggy2310am、eggy2311gz、eggyeggy9wz 通用兑换码: pec74dkcty、jsrqkrrjmh、cd3wt7wrph、ccepn7d8cjf...
  • python怎么调用其他文件函数

    python怎么调用其他文件函数
    在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...