Review Squire:一个高效的HTML5富文本编辑器

什么是随侍& # 65311；乡绅& # 26159；一款极其轻量级的HTML5 & # 23500文本编辑器，最适合您应用程序的丰富输入表单和简单的文档创建。它提供跨浏览器支持，但刻意避免支持旧版浏览器的复杂性。它在歌剧10 & # 12289；火狐3.5 & # 12289；Safari 4 & # 12289Chrome 9 & # 21644IE8 & # 19978运行效果最佳。

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

在本教程中，我将向您展示如何下载乡绅& # 24182；使用它构建示例输入表单。如果您想了解斯奎尔& # 30340；实际应用，请访问演示。

乡绅从哪里来？FastMail & # 22242队构建了乡绅& # 26469；简化他们的网络邮件编辑器要求。FastMail & # 26159Gmail & # 30340优秀基于云的电子邮件替代方案& mdash我是FastMail & # 30340日常用户。由于它的总部位于澳大利亚，并且根据与美国不同的法律运营，因此FastMail & # 29992户的隐私保护略有改善。您可以在这里阅读更多相关信息：FastMail & # 31216其不受国家安全局& # 30417；视。

正如FastMail & # 22242队在他们的博客中所写，他们之前使用过编辑& # 65306；

虽然不是一个糟糕的选择，但像大多数其他编辑器一样，它是为创建网站而不是编写电子邮件而设计的。因此，默认情况下，简单地插入图像就会出现一个包含三个选项卡和比您想象的更多选项的对话框...它还附带了自己的UI & # 24037具包和框架，我们必须对其进行大量自定义才能适应我们正在构建的新用户界面的其余部分；维护起来很痛苦。由于我们关注速度和性能，我们也关心代码大小。我们用于之前（经典）UI & # 30340编辑& # 29256；本仅包含我们需要的插件，下载大小为159 KB & 65288；gzip & # 21387缩后；未压缩为441 KB & 65289；。这只是代码，不包括样式和图像。他们决定从头开始，打造乡绅& # 12290；压缩和gzip & # 21518的JavaScript & # 22823小仅为11.5 KB & # 65288未压缩时为34.7千字节。，并且没有依赖项，乡绅& # 38750；常轻量级。

结果令人印象深刻。加载整个撰写屏幕、基础库、邮件和联系人模型代码以及呈现整个屏幕的所有UI & # 20195码所需的组合代码重量现在仅为149.4 KB & # 65288未压缩时为459.7千字节。，比单独的编辑& # 36824；小。

乡绅& # 27809；有依赖性。没有XHR & # 21253；装器、小部件库或灯箱覆盖层。工具栏没有用户界面，这消除了加载两个UI & # 24037具包带来的臃肿。这只是一个简单的& lttextarea & gt组件，可以通过JavaScript & # 36827行操作。

斯奎尔& # 30340；工作原理随侍& # 20351；用选择和范围API & # 26469操作DOM & # 12290这消除了常见的跨浏览器不兼容性。再次来自FastMail & # 21338客：

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

安装squire& # 20854；次，将build/& # 30446；录的内容复制到您的应用程序中。p & gt

第三，编辑document.html & # 20013；的& ltstyle & gt块以添加您希望编辑器使用的默认样式（或链接到外部样式表）。

使用乡绅& # 35753；我们看一下乡绅& # 38468；带的演示应用程序。使用随侍& # 26102；，您可以使用& ltiframe src = " path/to/document . html " & gt；，而不是& lttextarea & gt元素。

在演示中：

& ltiframe src = " build/document . html " onload = " top . editor = this . content window . editor " width = " 500 " height = " 500 " & gt；& lt/iframe & gt；Document.html & # 26159；一个具有默认样式的空白画布，它会加载乡绅& # 65306；

& lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta http-equiv = " X-UA-Compatible " content = " IE = edge，chrome=1 " >& lttitle & gt& lt/title & gt；& ltstyle type="text/css " >...a { text-decoration:下划线；} h1 { font-size:138.5%；}...blockquote { border-left: 2px纯蓝；边距:0；填充:0 10px} & lt/style & gt；& lt/head & gt；& ltbody & gt& ltscript type = " text/JavaScript " src = " squire . js " & gt；& lt/script & gt；& lt/body & gt；& lt/html & gt；使用随侍& # 26102；，您可以将事件侦听器附加到iframe & # 30340加载事件。当此事件触发时，您可以通过iframe . content window . editor & # 33719；取对编辑器对象的引用。例如，演示iframe & # 21253括：

onload = " top . editor = this . content window . editor "

该演示有两种类型的链接，用于在斯奎尔& # 20013；操作内容。可以对任何选定文本进行操作的简单命令如下所示：

& ltspan id="bold " >Bold & lt/span&gt。

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

& ltspan id = " set font size " class = " prompt " & gt。字体大小& lt/span&gt。

演示应用程序如下所示：

演示页面顶部的JavaScript & # 20390听对这些span & # 21629令的任何点击。如果提示类存在，它会从用户收集更多信息：

& ltscript type = " text/JavaScript " charset = " utf-8 " >var编辑器；document . addevent listener(' click '，function ( e ) { var id = e.target.id，value如果(id & amp& amp编辑& amp& amp编辑

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

此页面的头块集成了自举& # 30340；样式表和名为squire-UI & # 30340；样式表。它还为此squire-UI & # 25552；供JavaScript & # 12290

& lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta http-equiv = " X-UA-Compatible " content = " IE = edge，chrome=1 " >& ltmeta charset="UTF-8 " >& lttitle & gtSquire & lt/title & gt；& lt！-[if IE 8]& gt；& ltscript type = " text/JavaScript " src = " build/I E8 . js " & gt；& lt/script & gt；& lt！[endif]-& gt；& ltlink href = '//fonts . Google APIs . com/CSS？family = Lato ' rel = ' style sheet ' type = ' text/CSS ' & gt。& ltlink href = " build/Squire-ui . CSS " rel = " style sheet " type = " text/CSS "/& gt；& ltlink href = " build/bootstrap/bootstrap . min . CSS " rel = " style sheet " type = " text/CSS "/& gt；& ltscript src = " build/jQuery/jQuery . js " type = " text/JavaScript " & gt；& lt/script & gt；& ltscript src = " build/squire-raw . js " type = " text/JavaScript " & gt；& lt/script & gt；& ltscript src = " build/Squire-ui . js " type = " text/JavaScript " & gt；& lt/script & gt；它还为正文中的文本区域提供了静态html & lt；div class="container " >& ltdiv class="row " >& ltdiv class="col-centered " >& lttextarea id = " foo " & gt& lt/textarea & gt；& lt/div & gt；& lt/div & gt；但在加载时，其JQuery $(文档)。准备好了& # 20989；数将静态# foo & # 25991本区域替换为其斯奎尔伊& # 12290；

& lt脚本& gt$(文档)。ready(function(){ UI = new squire UI({ replace:' textarea # foo '，height:300 })；});& lt/script & gt；工具栏配置是通过相当复杂的JQuery & # 12289阿贾克斯& # 12289；HTML5 & # 21644CSS & # 37197置来实现的。它正在加载此HTML & # 39029面以显示大部分工具栏：http://neilj.github.io/Squire/build/Squire-UI.html。

$(格)。load(options . build path+' Squire-ui . html '，function(){ this . link Drop = new Drop({ target:$(' # make link '))。first()[0]，内容:$('#drop-link ')。html()，position:'底部居中'，open on:' click ' })；以下是Squire-UI.html & # 28304；代码的子集，以便您可以查看正在加载的内容：

& ltdiv class = " menu " content editable = " false " >& ltdiv class="group " >& ltdiv data-action = " bold " class = " item " >& lti class="fa fa-bold " >& lt/I & gt；& lt/div & gt；& ltdiv data-action = " italic " class = " item " >& lti class="fa fa-italic " >& lt/I & gt；& lt/div & gt；& ltdiv data-action = " underline " class = " item " >& lti class="fa fa-underline " >& lt/I & gt；& lt/div & gt；& ltdiv id = " select font " data-action = " select font " class = " item " & gt；& lti class="fa fa-font " >& lt/I & gt；& lt/div & gt；& lt/div & gt；& ltdiv class="group " >& ltdiv id = " make link " data-action = " make link " class = " item " & gt；& lti class="fa fa-link " >& lt/I & gt；& lt/div & gt；& ltdiv data-action = " makeOrderedList " class = " item " >& lti class="fa fa-list " >& lt/I & gt；& lt/div & gt；& ltdiv id = " insertImage " data-action = " insertImage " class = " item " & gt；& lti class="fa fa-picture-o " >& lt/I & gt；& lt/div & gt；& ltdiv data-action = " increaseQuoteLevel " class = " item " >& lti class="fa fa-quote-right " >& lt/I & gt；& lt/div & gt；& lt/div & gt；...如果他们在分发代码中提供简化的Bootstrap & # 24037具栏作为附加组件，那就太好了，但您当然可以从他们在上面自己的演示中所做的事情中学习。

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

相关链接乡绅& # 65306；FastMail & # 30340富文本编辑器乡绅& # 28436；示页面Github & # 19978的乡绅& # 20195；码库以上是重访Squire的细节:一个高效的HTML5富文本编辑器。更多信息请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：Review Squire:一个高效的HTML5富文本编辑器 https://zhujicankao.com/95138.html